designing a face from small -> up

Primary tabs

13 posts / 0 new
Last post
Amado Ohland's picture
Offline
Joined: 12 Apr 2011 - 8:09am
designing a face from small -> up
0

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?

Nick Curtis's picture
Offline
Joined: 21 Apr 2005 - 8:16am
0

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

Just sayin’…

Riccardo Sartori's picture
Joined: 13 Jul 2009 - 4:20am
0

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.

Hrant H Papazian's picture
Joined: 3 May 2000 - 11:00am
0

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.

Amado Ohland's picture
Offline
Joined: 12 Apr 2011 - 8:09am
0

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.

Frode Bo Helland's picture
Joined: 26 Feb 2007 - 1:03pm
0

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.

Craig Eliason's picture
Offline
Joined: 19 Mar 2004 - 1:44pm
0

Sounds kind of like how Verdana was developed to me.

Frode Bo Helland's picture
Joined: 26 Feb 2007 - 1:03pm
0

Both Verdana and Georgia, no?

Kent Lew's picture
Offline
Joined: 21 Apr 2002 - 11:00am
0

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

Amado Ohland's picture
Offline
Joined: 12 Apr 2011 - 8:09am
0

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?)

Riccardo Sartori's picture
Joined: 13 Jul 2009 - 4:20am
0

I'd like to see the Franky stuff.

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

David Berlow's picture
Offline
Joined: 19 Jul 2004 - 6:31pm
0

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.

Hrant H Papazian's picture
Joined: 3 May 2000 - 11:00am
0

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