-1

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.

Karlis Rode
  • 3,643
  • 2
  • 16
  • 16

3 Answers3

1

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

Community
  • 1
  • 1
Karlis Rode
  • 3,643
  • 2
  • 16
  • 16
0

The height of the icon in your font is determined by the font-size. Set it to 40px, and your icon will be 40 pixels tall. This is regardless of any font metric, like baseline height. The only condition is that your icon's design should cover the full "artboard" 1 height. The font you linked to does that, so the problem doesn't lie there.

Most likely you're running into a Firefox-on-Mac-specific problem. If you post an example, maybe people who're familiar with that setup can help?

1 I've taken the term "Artboard height" from Illustrator. It's the height of the canvas: (Left icon is full height, right icon isn't)

RoelN
  • 2,181
  • 13
  • 15
  • Unfortunately, this really seems to have a strong connection to how the font metrics are chosen (see edited post). What is to be considered as the "full artboard height"? That's actually what I am trying to understand here. The last two elements use default metrics and suddenly appear (almost) cross-browser/cross-platform consistent, but I cannot grasp what constitutes a "full artboard height". Obviously the bottom point should be the descent line, but where can I find my top line? – Karlis Rode Dec 13 '13 at 14:02
  • 1
    I've edited my post. The right icon would look misaligned in your page if the actual design was bottom aligned — but this is not the case with your font. Looks like FF/Safari on Mac indeed interpret the font metrics differently, see: http://stackoverflow.com/questions/11648488/creating-a-cross-browser-icon-webfont – RoelN Dec 13 '13 at 15:03
  • +1 for the link. It did not solve the case, since it recommended using FontSquirrel's black box "Fix Vertical Metrics" solution, but it gave a good insight into other vertical metrics options used for Mac that were previously unknown to me! – Karlis Rode Dec 16 '13 at 11:37
0

You can use the Icommoon app. It allows you to create your own custom fonts using glyphs from existing fonts, imported SVGs, etc. from an intuitive web interface. I used it myself to create the Emoji icon font as well as project specific icon fonts.

Using the Icomoon app, each glyph can be mirrored, rotated, resized or repositioned within a rectangular grid. The grid itself can also be resized. See the screenshot below for an overview of that interface.

Icomoon

John Slegers
  • 45,213
  • 22
  • 199
  • 169