Menu
I'm having issues with fonts such as Josefin Sans where the space above, and below the text is uneven. This makes it impossible to vertical align the text.
Look at this http://jsfiddle.net/G5aVK/.
HTML
<div class="text">
Hello World
</div>
<div class="text2">
Hello World
</div>
CSS
.text{
font-family: 'Josefin Sans';
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
}
.text2{
font-family: serif;
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
}
As you can see the normal serif font is aligned vertical center in the div. But the Josefin Sans one is not, it has more space above each letter than under.
Is there any way to fix this? Is there any way with CSS or maybe Javascript to change the height above, and below the font? If you try line-height you will see it does not fix the issue.
EDIT: A lot of suggestions seem to be quickfixes that would only solve exactly this font size, exactly this font and so on. I would need a solution that would work over different fonts and sizes, because the content in this case is generated by the users so I can't control what size or font they will be using.
So if talking pseudo-code, a solution that I would look for would be "font-vertical-align: middle" or something like that. But maybe the only way to fix this is by doing ugly pixel-specific fixes.
484
While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size. While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.
If the value of the line-height property is smaller than the value of the font-size , text may overflow the element, and text on one line may overlap text on another line above or below it. It is often convenient to set the value of the line-height in the font shorthand property.
Line height, also known as leading, is the distance between each line when you have two or more rows of text. Letter spacing, also known as tracking, is the size of the gaps between each letter of each word.
It turns out that's pretty simple: just use the line-height CSS property and then apply it. I have an example below. Then, you can apply that CSS class to your HTML. Now, the space between the lines changes.
That space belongs to the characters themselves; Which means you have to edit the font via a Font editor application to align the characters vertically in their code point.
However, you can play with line-height and min-height properties to achieve the goal:
.text {
font-family: 'Josefin Sans';
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
line-height: .95em; /* Reduce the line height */
min-height: 1.2em; /* Set a min-height to the container */
}
WORKING DEMO.
142
Try this,
.text{
font-family: 'Josefin Sans';
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
height:36px; // add height
line-height:24px;// add line-height
}
Demo
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
