CODEWITHSUNDEEP
cssfonts
dtbaker
dtbaker

Reputation: 4919

How to get even spacing around different fonts?

Different fonts sit differently within these boxes:

enter image description here

I'm trying to find a way to make the padding "around" the text the same no matter what font is chosen. So the space between the bottom of the y and the border should be the same as the top of the T and the border.

(I hope that makes sense?)

I can manually adjust line heights/paddings to make each font sit nicely in the middle of the box, but it would be nice if there was some automatic way to do this.

jsfiddle for that screenshot: http://jsfiddle.net/dtbaker/4qkv2ncL/2/

html: 

<div id="bg">
    <div class="text">
        <span>Asdgh YiyjJT</span>
    </div>
    <div class="text">
        <span class="font1">Asdgh YiyjJT</span>
    </div>
    <div class="text">
        <span class="font2">Asdgh YiyjJT</span>
    </div>
    <div class="text">
        <span class="font3">Asdgh YiyjJT</span>
    </div>
</div>

css:

@import url('https://fonts.googleapis.com/css?family=Special+Elite:400,700,400italic,700italic|Lora:400,700,400italic,700italic|Lobster:400,700,400italic,700italic');

#bg{ background-color: #000; padding:20px; }
.text{
    padding:20px;
}
.text span{
    color:#CCC;
    background:#FFF;
    font-size:60px;
    font-weight:bold;
    line-height:1em;
    padding:2px;
}
.text span.font1{
    font-family:"Special Elite";
}
.text span.font2{
    font-family:"Lora";
}
.text span.font3{
    font-family:"Lobster";
}

Upvotes: 2

Views: 561

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201508

It’s not possible, because the phenomenon depends on the design of the font. CSS has no access to font metrics. The way in which glyphs use the vertical space defined by the height of the font (and possibly extend beyond that space) is decided by the font designer. There is no single quantity that describes it.

The only quantity related to font metrics that is even theoretically available is the x height, via the em unit and via the font-size-adjust property. The latter has very limited and buggy support. Besides, the x height is just the height of letter x and similar lowercase letters with no ascenders and descenders, so it would not help to get at the total heights of glyphs.

Upvotes: 1

Related Questions