Search code examples
fontscross-browserfont-facefont-sizetruetype

How can I create a font where the glyphs cover 100% of the font-size height?

I am currently developing my own custom font to use for symbols and other graphics that I want to be vector based. The problem is how to create a font where the glyphs cover the full height of the given font-size.

If I have a block of 40px height and set the font-size and line-height to 40px I want the top-most part of the glyph to be at the block top and the bottom-most part to be at the bottom of the block. In other words, the glyph should vertically fully cover a block of the same height given the same font-size/line-height.

Well, the problem is, it doesn't... I have tried setting the baseline and descent to 0, and setting x-height, caps height and ascent to eg 1500. If I then draw all my glyphs between these vertical lines, they all show up the desired way. Except on a Mac! In Mac FF they are offset to the top by approximately 50%. In Safari and Chrome they don't show up at all, unless you set "display: inline-block" instead of "display: block".

I have also tried setting up a completely new font in Type 3.2, with default metrics etc. It seems to me that the descent line decides where the bottom-most tip of the glyph renders. The top on the other hand seems to be somewhere between the caps height and the ascent line, but more to the caps height. If I draw a glyph from descent to ascent the glyph top gets chopped off. If i draw a glyph from descent to caps height there is a space between block top and glyph top.

Are there any "standard" metrics that I could apply, and how should I position my glyphs to get it as described above?

A copy of the font in it's current state resides here:
https://s3-eu-west-1.amazonaws.com/public-karlis-rode/stack-overflow/Custom-Icon.ttf

EDIT: A working example can be found here:
https://s3-eu-west-1.amazonaws.com/public-karlis-rode/stack-overflow/index.html

The left block contains an element of my custom font (case a). The next block contains an element from the font used in Twitter Bootstrap (case b). The last two blocks (case c and d) contain elements from a test font I have made that makes use of the default settings of Type 3.2. The first test element (c) has lowest point at the descent line and its top-most point at the caps height line. The last element (d) has its lowest point at the base line and its top-most point at the x-height line.

How it renders in all browsers on Ubuntu and Windows7 (in this case FF in Ubuntu):

This is the desired behaviour!

How it renders in FF on Mac:

How it renders in Safari on Mac:

Since both b, c and d render the same across all browsers and all operating systems, it really seems to me that my own custom font lacks and/or has some contradicting information in the metrics to make it render consistently.

Solution

  • It turns out there are a few more metrics that have to be applied in order to get a font working on all platforms. What seems to have done the trick was setting the hhea/typo ascender in the advanced metrics section.

    I've added some screenshots of the settings I applied and that worked for me. The descent line is set to 0 and the ascent line as well as the caps height and x-height are all set to 1250. I chose 1250 since a font I previously looked at had this number, but it seems to be of no importance as long as it is the same for all ascents and heights. I suppose the x-height really doesn't matter in my case since all glyphs are set to equal height. Maybe the caps height isn't necessary either, please drop a comment on that!

    I also added a screenshot of my FontSquirrel settings. I am not sure at all which parts are necessary, but I prefer to go safe. I unset the "Fix Vertical Metrics" option since it very well could be an unwanted "black box". The x-height matching is set to None, but probably doesn't matter.

    What matters is the Base64 Encode setting. Without this you can't load the font from another domain, which is due to browsers implementations of SOP (Same Origin Policy). More on this here: @font-face fonts only work on their own domain.

    I really don't know if it is necessary to use the same Em Square Value I used when I created the font, but it seems reasonable. To be frank, I don't even know what it means... :-)

    If you feel that you can contribute to a better understanding of these metrics, or if there are any mistakes/unnecessary values set, please add a comment!


    Font metrics setup in Type 3.2
    Font metrics setup in Type 3.2

    Advanced font metrics setup in Type 3.2
    Advanced font metrics setup in Type 3.2

    Glyph example
    Glyph example

    enter image description here