0

I am using Bulma css framework with custom font Comfortaa from https://fonts.google.com/specimen/Comfortaa

But the font has some extra space at bottom and it makes all text of elements to be little higher than it should be.

On img: 1) comfortaa 2) roboto 3) Segoe UI (with button and h1 with border)

see comparision img

How to make text of elements with Comfortaa font on same level as others ? Preferably in Bulma. Thank you.

Suche Ganbaatar
  • 1
  • 1
  • 3

1 Answers1

1

You could add extra padding to the text container to push it down a little. You'll need to tweak the amount of padding to suit. Below is an example of how that could work. I have created a class .text-offset that pushes the text down 1px with padding-top.

The whitespace you have outlined in your image is the fonts line height, it is different from font to font. Apparently, some web fonts try to balance the top and bottom spacing out for this reason. 

body {
  font-family: 'Comfortaa', cursive;
  padding: 20px;
}

.text-offset {
  padding-top: 1px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<a class="button is-primary">
  <span class="icon is-small">
    <i class="fab fa-github"></i>
  </span>
  <span class="text-offset">GitHub</span>
</a>
OrderAndChaos
  • 3,547
  • 2
  • 30
  • 57
  • ok that's working if there is some global solution, eg: for all components and elements via sass that would be great. ! Anyway thank you. – Suche Ganbaatar Apr 12 '19 at 21:37
  • 1
    It's a quirk of the font, I don't think there is a global way to solve this. Rather than having a `text-offset` class you might consider creating `margin` and `padding` helpers for nudging elements around here and there. Bulma does not have them that I know of https://github.com/jgthms/bulma/issues/451. But libraries like Tachyons http://tachyons.io/docs/layout/spacing/ and Twitter Bootstrap have nice ones https://getbootstrap.com/docs/4.3/utilities/spacing/. – OrderAndChaos Apr 12 '19 at 22:51