CODEWITHSUNDEEP
fontsfont-facefontforge
Paul d'Aoust
Paul d'Aoust

Reputation: 3209

custom font overriding explicit line-height in Firefox and IE

I have a custom icon font that I've been building in FontForge. I'm experiencing something unusual, in that it changes the height of block-level elements in HTML, but not in Chrome.

Example:

<html>
    <head>
        <style>
            html { font-family: Arial, Helvetica, sans-serif; }
            .double { font-size: 200%; }
            div { margin-bottom: 1.5em; }

            @font-face {
                font-family: iconfont;
                src: url('http://cheesefish.net/techchoicesymbol-webfont.eot');
                src: url('http://cheesefish.net/techchoicesymbol-webfont.eot?#iefix') format('embedded-opentype'),
                     url('http://cheesefish.net/techchoicesymbol-webfont.woff') format('woff'),
                     url('http://cheesefish.net/techchoicesymbol-webfont.ttf') format('truetype'),
                     url('http://cheesefish.net/techchoicesymbol-webfont.svg#techchoicesymbolmedium') format('svg');
                font-weight: normal;
                font-style: normal;
            }

            .action {
                display: inline-block;
                line-height: 1.5;
                background-color: orange;
                padding: 0 0.5em;
            }

            .iconfont { font-family: iconfont; }
        </style>
    </head>
    <body>
        <div>
            <span class="action"><span class="iconfont">&#xE013;</span> Go for a drive</span>
            <span class="action">&#x2603; Have a snowman</span>
        </div>

        <div class="double">
            <span class="action"><span class="iconfont">&#xE013;</span> Go for a drive</span>
            <span class="action">&#x2603; Have a snowman</span>
        </div>
    </body>
</html>

Live: http://jsfiddle.net/aGHxw/2/ or http://cheesefish.net/symbol-test.html if your browser doesn't support CORS

(note: make sure your result pane is wide enough that the 2x-sized buttons are side-by-side).

As you can see, there's an explicit line-height of 1.5 on each yellow button. This should override any weird metrics in the font, and indeed in Chrome it does -- the content is 24px tall (or 48px tall in the case of the 2x-sized buttons).

But in Firefox and IE both, the results are slightly different. In Firefox, the button with my custom webfont enlarges to 25px tall (or 49px tall for the 2x-sized buttons). In IE, the sizes are okay, but in the case of the 2x-sized buttons, the button with my font is offset upwards by a pixel.

There's some slightly weird vertical metrics in this font; some glyphs are 1.5em tall (extending 0.375em below the baseline, and 1.125em above. Ascent is 1024 (the em being 1024 units) and descent is 0, and in the OS/2 table all ascenders and descenders are set to contain the largest glyph (ascent 1152 and descent -384, or in the case of 'Win Descent', +384).

Am I doing something terrible? I've run this font through the FontSquirrel @font-face generator, and the results you see in the above samples are with 'fix vertical metrics' turned off. Turning that setting on produces equally weird, but different, results.

Upvotes: 1

Views: 1531

Answers (3)

summitdigitaluk
summitdigitaluk

Reputation: 21

I experienced a similar challenge with a client's custom typeface that I processed through FontSquirrel. In desktop Chrome the browser would use the 'Win Ascent' value found in Element > Font Info > OS/2 > Metrics in FontForge, but mobile Chrome was using the Ascent value found in the Element > Font Info > General Tab. This resulted in what looked like different line heights in the two browsers.

The solution for me was to explicitly override the ascent value in CSS, which would look like this in your example:

@font-face {
  font-family: iconfont;
  src: url('http://cheesefish.net/techchoicesymbol-webfont.eot');
  src: url('http://cheesefish.net/techchoicesymbol-webfont.eot?#iefix') format('embedded-opentype'),
    url('http://cheesefish.net/techchoicesymbol-webfont.woff') format('woff'),
    url('http://cheesefish.net/techchoicesymbol-webfont.ttf') format('truetype'),
    url('http://cheesefish.net/techchoicesymbol-webfont.svg#techchoicesymbolmedium') format('svg');
  font-weight: normal;
  font-style: normal;
  ascent-override: 100%;
}

Upvotes: 1

allcaps
allcaps

Reputation: 11248

In metal type, the point size is measured as the height of the metal body from which the letter rises. This concept made it into digital type.
Browsers align fonts in the same text line by baseline. But the position of the letter shape on the body varies. This has to do with variations in the x-height, ascent and descent.

The reasons why your two block-level elements have different heights:

  • The car comes from the @font-face font.
  • The snowman is not availeble in the @font-face font and therefore comes from the default browser font.
  • Different fonts! Therefore different x-height, ascent and descent ratio.

See my fiddle as proof of the variation in body and contour position. JS:

* {
    font-size: 48px;
}
@font-face {
    font-family: iconfont;
    src: url('http://cheesefish.net/techchoicesymbol-webfont.ttf') format('truetype');
}
span {
    background-color: gray;
    color: white;
}
.iconfont {
    font-family: iconfont;
}
.arial {
    font-family: Arial;
}
.times {
    font-family: Times;
}
.helvetica {
    font-family: Helvetica;
}

HTML:

<!-- All fonts are 48px but still have diffrent body size. -->
<!-- Iconfont doens't have a-z, A-Z, 0-9 but does display a snowman! :/ -->
<span class="iconfont">&#xE013; a-z, A-Z, 0-9 &#x2603;</span>

<span class="arial">Hx</span> 
<span class="times">Hx</span>

<span class="helvetica">Hx</span> 
<!-- Snowman isn't an iconfont glyph. -->
&#x2603;

Chrome:

Chrome screenshot

FireFox:

FireFox screenshot

Your car is big because the some values are wrong. If you create a new font in FontForge the default values are em 1000, ascent, 800 and descent 200.

FontForge font info dialoge

Minor thing: The car it's not in right Unicode slot. But somewhere in the Private Use Area. It should be at AUTOMOBILE (U+1F697).

Conclusion: The body of fonts differ. That is okay because fonts are aligned by baseline. When an icon enters the font-world it should behave like a letter and have a reasonable baseline position, x-height, ascend and descent.

Upvotes: 0

allcaps
allcaps

Reputation: 11248

I think you are experiencing staircase scaling:

When text is scaled up or down, browsers calculate the final size of the text (which is the specified font size and the applied scale) and request a font of that computed size from the platform's font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

As a fix you can add text-rendering: geometricPrecision; to your stylesheet.

Upvotes: 0

Related Questions