creating a font suitable for web and mobile

Baxendale's picture

I've created multiple typefaces over the last few years and was recently asked to create a typeface for a client based on the custom made logo. I've created the type and I've made it work in Glyphs. So good so far.
The client specifically said that the typeface is going to be used on web and mobile applications. It's a really bold header typefaces which shouldn't be used very small because of readability, but I'm curious if there is any thing I should be aware of while creating or exporting the typeface that has to do with the online use. I know there used to be different ways of implementing a typeface on a website that have an effect on the typeface, but thats not my responsibility.

I would love to know if any of you know if there are implications on my side while creating the typeface in Glyphs. Anyone?

Frode Bo Helland's picture

On shapes: When I drew my (first) low resolution text face, I did the proofing solely on screen. Looking at how the screen – in fact lots of screens – interprets shapes was important, because I learned I got better results by rethinking some of the optical tricks I usually apply to print faces.

On hinting: Type used online should, generally, have hinting instructions – most likely TrueType hinting. This can be done manually, or automatized. You would need to go outside of Glyphs to do this.

On vertical metrics: Vertical metrics for the web is a hornet’s nest.

On font formats: WOFF, EOT, TTF & SVG.

Baxendale's picture

Hey Frode! Thanks for the link, that's very useful!
One question; Hinting is somthing you do in css or php right? and how relevant is it with all those new high-ress retina-like screens?

Frode Bo Helland's picture

It is something you do in a font application. If you are making quality type, it is very important, because the only way to have any control over the font rendering in Windows is hinting.

Richard Fink's picture

1) Vertical Metrics shortcut:
 Run your font through the Font Squirrel generator. It will automatically measure and change the vertical metrics. Transplant those vertical metrics to the originals.
(Caveat: I believe you still can't run a font with more than 600 chars in it on Font Squirrel.)

Note: Make sure the embedding bit is set for Installable. Otherwise the font might malfunction if IE is a part of your test suite.

2) Hinting for Truetype

TT hinting is necessary for the font NOT to look like hell in browser's running on versions of Windows. As Frode testified.
Either output a new original TTF with the updated vertical metrics (changing the vertical metrics after font generation can be done but you'll have to turn to special tools for that - better they should be in the font from the start) or make a new source file (vfb, sfd) that has Truetype curves.
Once you've got that, output the font as a TTF without any hints provided by Fontlab or FontForge or whatever other app you're using that might try to add TT hints.
Download ttfautohint.
Latest version is .97
There's a GUI for both Mac and Windows included. Use one of those - easiest way. Self explanatory. Employ common sense.
The TT hinted file will be a bit bigger than the original. Check it out visually in a HTML page and if it looks good, it is good.
A Drag and Drop test page that makes testing (within a limited charset at the moment) very easy, is located here:

Ya want/need help? Or got a lot of fonts to process and don't have the time and/or expertise?
Drop me a line on my blog I THINK it will make it to my inbox if, if Media Temple continues to behave itself.


Frode Bo Helland's picture

Re. autohinting: If you are making quality type, you need to hire a TrueType hinter or spend time learning it. Or wait 5–10 years. Or more. Or less.

Richard Fink's picture


ttfautohint relies on the same TrueType interpreter that exists in the open-source Ubuntu operating system.
It's been a couple of years in development and has become, with each new iteration, more and more capable.
As far as Frode's statement:

>“Re. autohinting: If you are making quality type, you need to hire a TrueType hinter or spend time learning it. Or wait 5–10 years. Or more. Or less.”

Well, let me just say that my day in day out experience with ttfautohint - applying it to a wide variety of fonts and then examining the results closely in a variety of browsers on Windows - tells me Frode is wrong.

(Plus, I doubt if we could even agree on a definition of what constitutes "quality" in a webfont. So I certainly don't want to argue with him further. I just don't want you to be biased before you've had a chance to see for yourself.)

Bottom line: I think you'll like the results ttfautohint gives you. If you don't, let me know. I'll be glad to take a look.


Baxendale's picture

Thanks for the tips both of you!
There is always a question on what quallity means, I think character in type is most important, and that is another value than for instance readabillity. Those two dont nececarily match...

I'll check out the methods and see what happends!
Thanks !

Syndicate content Syndicate content