CODEWITHSUNDEEP
javascriptjquerycss
Marcus Lind
Marcus Lind

Reputation: 11460

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

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.

Upvotes: 10

Views: 7108

Answers (3)

Denis Tsoi
Denis Tsoi

Reputation: 10414

The Reason why the font isn't aligning vertically is due to the font type (some font types can have their typography lines offset to most conventional fonts)

http://jsfiddle.net/denistsoi/28zx2/

I added the following css rule

.text {
padding-top: 8px;
}

Update

http://jsfiddle.net/denistsoi/28zx2/3/

Another way is to

HTML

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet'     type='text/css'>
<div class="text">
    <p class="content">Hello World</p>
</div>
<div class="text2">
    Hello World
</div>

This way you can also adjust the vertical alignment with your margins~

CSS

.text > .content {
    display: inline-block;
    vertical-align: middle;
    margin: 2px 0 -2px 0;
}

Upvotes: 1

Hashem Qolami
Hashem Qolami

Reputation: 99544

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.

Upvotes: 5

Rohan Kumar
Rohan Kumar

Reputation: 40639

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

Upvotes: 1

Related Questions