line-height is uneven. Larger space above text than under

Question

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.

Answer 1

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.

Answer 2

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