Typophile

designing a face from small -> up

Amado

I'm a web designer, not a type designer. But recent experiments with @font-face embedding and in drawing some glyphs myself (i.e., torturing letterforms in Photoshop and Illustrator) have put me in mind of this question:

Have you ever started designing a typeface based on how it will render on-screen at particular sizes?

For example, imaging the following spec: "At 16px, the x-height shall be 8px, the cap height shall be 11px, the ascender height shall be 12px (from the baseline), and the descenders shall descend 4 px. At 14px, those same numbers shall be 7px, 10px, 11px, and 3px respectively. At display sizes, it shall look like an English Old Style or a Trump Mediaeval, with the following mildly quirky details..."

Does such a workflow make sense? Is it bass-ackwards? If you've done something like this, has it led to fruitful results?

If you start with average specs, you'll probably end up with average results.

Just sayin’…

IIRC Frode (http://typophile.com/user/17101) did some experiments along these lines, mostly to optimise hints.
And then, of course, there are pixel fonts, bitmap fonts and grayscale fonts.

To me what you've described is in fact the best way.

BTW, not an outline font per se, but:
http://www.themicrofoundry.com/manademo/

hhp

----

Today, learn about the Armenian Genocide.

Grant that my example spec is just that: an example. That said, in what way is it ("merely," as I infer from your response) average? Seems to me that if I were to learn that, I would learn something useful.

I've seen the comment in these forums that true design is a process of reconciling conflicting needs, or words to that effect. I'm groping toward on-screen body-text readability and transparency that looks "the same" as printed display-size beauty and personality. On-screen is obviously a reduction in detail.

If that's a merely average goal, teach me how.

IIRC Frode (http://typophile.com/user/17101) did some experiments along these lines, mostly to optimise hints.

I still am, but somewhat different.

Unless you are the only user (meaning both designer and reader) there’s no way to be sure of the exact output size nor the system. What I am doing is optimizing my fonts for a small range of sizes on systems that do not use hinting. Whoever told us OSX can do all the heavy lifting on its own was a fool. Even the Quartz rendering engine involves some degree of math “magic”, causing diacritica and base glyph crashes, alignment errors, filling in of tight contours, heavier diagonals &c. I spend a lot of time getting all that right, simplify A LOT of details, and then -- then I hint.

And I optimize so that I need as few hints as possible.

Sounds kind of like how Verdana was developed to me.

Both Verdana and Georgia, no?

David Berlow also did something along similar lines with his Franky exercise.

I'd like to see the Franky stuff.

So, this workflow has been used: [A] make bitmap/greyscale glyphs at target sizes; [B] draw TrueType outlines that you think should result in those bitmaps at those sizes; [C] hint them so that the output is reasonably faithful to the outlines at all/most sizes; [D] compare the rendering at the target sizes to the original bitmaps and iteratively adjust, tweak, adjust, tweak, adjust.

Ta daa, Verdana and Georgia.

If fussy details are part of what gives display-size faces their beauty, and and absence of distracting details is part of what gives body-text faces their readability, then one task would be to put details into the outlines that are designed to be lost as the face is scaled down.

And of course, one would want to use proportions that are appropriate/beautiful for print work and successful/readable at small sizes on-screen. Compromise? Perhaps. Fatal? I suspect that depends on the designer. Not a task for the likes of me, certainly.

The only other thing I'd like to know is, what other typefaces have been designed with a workflow like this (especially any commercially-successful typefaces)? Or perhaps: have any of your type designs started with an idea of the outlines you'd like, then considered the bitmap rendering on-screen at one or more target sizes, and then proceeded [A] thru [D] from there? (Or, do you know of any?)

I'd like to see the Franky stuff.

http://static.fontbureau.com/test/franky/

But wait... (and thanks for the spec., it helps focus the discussion)

"For example, imaging the following spec: "At 16px, the x-height shall be 8px, the cap height shall be 11px, the ascender height shall be 12px [...] At 14px, those same numbers shall be 7px, 10px, 11px, and 3px respectively. At display sizes, it shall look like an English Old Style or a Trump Mediaeval, with the following mildly quirky details...". "

With one font it is not possible right now to get from pixel specific design to English old style or Trump medieval, (my voice recognition systems capitalization sorry;)

Text and display faces for screens are two separate outline fonts.

And Franky is an old experiment to demonstrate what would happen if hints were not available for rendering type on screens, this thread being a good example.

One thing to consider here is that Verdana and company wrapped outlines around intended 1-bit (b&w) rendering, and they required a lot of small size-specific glyph-wise tweaks (delta hints). When your intent is grayscale, and to avoid those tweaks, you end up with having to make size-specific outlines...

BTW, also notable here is Elementar:
http://www.typotheque.com/fonts/elementar

hhp

Captured from web.archive.org on 13 Oct 2013. view this capture