Typophile

Rendering experiment

Frode Bo Helland


The image above shows a bold sans serif on the left, and a grid fitted version of the same typeface on the right. The latter is adjusted so that every stem lands on a whole pixel when displayed at 8px size. (One pixel = 125 units)

Below, I’ve attached an image showing the rendering in OSX and Windows.

At these sizes you have very little control over spacing and the shapes will look crude if the web user for some reason decides to resize the text. However, I can imagine designing for a bigger size might work quite well. You’ll get improved rendering at the intended size, and with hinting you won’t lose much compared to other fonts if the user zooms in or out.


Another image: Grid fitted on top.

The idea isn’t far from opticals sizes in print fonts.


A quick mock up with a 10px font. Screenshot from FF Mac.

Looks great Frank!

>The idea isn’t far from opticals sizes in print fonts.

With the exception that optical sizes are fairly easy to deploy for the given size, while on the web not even specifying in px will assure the font will be used at that size.

Cheers!

Your stuff was way more impressive, David. How did you have control over all those weights?

on the web not even specifying in px will assure the font will be used at that size.

The same applies to print. Ever seen some rookie designer blow up those small versions of Gill Sans? Anyway: Designing for one intended pixel size (and hint for the rest) is better than designing for print and using it on screen.


10px font, Google Chrome, Windows.

* Correction: Not exactly the same. On the web the designer is never really in total control, as in print.

I wonder if combining a set of size opitimized fonts with something like this might work: http://www.alistapart.com/articles/fontresizing/

Frank, does your font contain any hints? It shouldn't, but I'm wondering about the different rendering of the ear of the g, whether this is due to Apple's rendering engine applying antialiasing in both directions while Windows only applies in one direction, or whether this is being affected by hints (possibly autohints during font generation?)?

>I wonder if combining a set of size opitimized fonts with something like this...

I'll let you know shortly.

>How did you have control over all those weights?

I put the contours right where I needed them for each.

Cheers!

@John: I’m also wondering about that ear. I don’t know the first thing about hinting. (I really should, though!) Unless Fontlab does something on it’s own when I export, there are no hints.

@David: I’m guessing your stems doesn’t add up to whole pixels, but they are centered on a pixel. Likewise, I’m guessing all glyph widths (with sidebearings) adds up to the nearest pixel value. Am I right?

Frank, in FontLab's TrueType/OpenType generate options, there is an option to 'Autohint unhinted glyphs'. You should see whether this is checked; if it is, then FontLab will have first applied its PS autohinting and then converted these hints to TT instructions. For your purposes, you probably want to turn this option off.

>... but they are centered on a pixel.

I go by Frutiger's theory of sharp left sides, and do not center the stem on a pixel.

>... all glyph widths (with sidebearings) adds up to the nearest pixel value

I go by someone else's theory of whole-pixel widths unless under designed control.

> l’m also wondering about that ear.

Not to worry. This is a fairly typical example of what happens when clarity is presented. When I started this kind of demo, someone else was concerned that my fonts were not protected enough to look this good. ;)

Cheers!

Do you mind me mailing you offline about this, David? I’m very interested in your process.

Designing for one intended pixel size (and hint for the rest) is better than designing for print and using it on screen.
I’m not so bombastic about this topic as I might seem. I just think it’s really interesting.

I’m curious how this’ll look in your browsers: http://www.frodehelland.com/prosjekter/gridfit/

I unchecked 'Autohint unhinted glyphs'.

FireFox 3.6, Windows Vista:

Note b and d bowl heights in the medium size. Spacing is problematic.

>Do you mind me mailing you offline about this, David

That's fine.

Cheers!

The experiment continues: Instead of adapting an existing design, these letters are drawn from scratch. The leftmost sample is viewed at the optimized size.

A link for those interested. Btw, the slab version is done in a hurry, purely for experimentation. There have also been some changes since the image above. It’s drawn for 10 px.

Captured from web.archive.org on 28 Jun 2010. view this capture