Typophile

Designing a font for @font-face

mark.johnson

Hey Typophiles,

This is my first post on here but I’ve been reading the forums a bit for the past year or so.

Anywho, I plan on creating a typeface for use on the web and I haven’t ever done that...sooo I was wondering if anyone had some advice from experience and examples if possible.

I’ve been examining Verdana’s development and other current web standard typeface features, but I’m just looking for some things to keep in mind when designing this typeface.

This typeface will be used as body copy and that will be its primary use. I might extend it later but right now the plan is just to develop a nice typeface for use on a website I’m creating.

Ben McElroy

Be forewarned that you’re going to get discouraged and wonder why you’re putting so much effort into what seems like so little reward.

I suggest ignoring this voice and keep plugging away.

mark.johnson

haha awesome thanks.

Michael Hernan

I was looking at Verdana and Georgia the other day as I am tentativly looking to go in this direction - though TT hinting is a world of pain I have managed to avoid so far...

anyway... I noticed how round they both are.

and this has just reminded me of David Crossland’s Cantarell which is a @font-face compatible font on
Font Squirrel

Does anyone have any pointers as to how to match a known pixel height to a UPM for very accurate alignment of line to pixles?

/m

Hrant H Papazian

If you’re making a pixelfont, set the UPM to 1000 and use a grid of 125 for everything (including kerning, vertical metrics, etc.) so when you set the point size to 8 at 72 dpi (a pseudo-standard of sorts) it all clicks.

hhp

Michael Hernan

I will try this! Cheers hhp!

John Hudson

point size to 8 at 72 dpi (a pseudo-standard of sorts)

What sort of pseudo-standard?

Hrant H Papazian

There isn’t a lot of pixelfont action these days, but when they were “in” the accepted way to make them render out predictably was to shoot for 8 point (at 72 dpi) no matter how many pixels high the font actually was. For example my three sizes of Mana* all need to be set at 8 to come out right (you just need to determine the leading accordingly). Yes, it’s a hack, but it makes -or at least made- things as controllable as possible.

* http://www.themicrofoundry.com/manademo/

hhp

nina

Wait, so that means each little square that makes a pixel needs to be 125×125 units, no matter what number of pixels you need?

Hrant H Papazian

Yes.

Of course if your font is very large (which rarely makes sense though) you get in trouble, so you might use 20. Nothing in between works well* because Windows uses a nominal dpi of 96, so you want 75% (72/96) of the number to result in an integer. The problem with anything besides 8 is that the user needs to be aware of what size to use for it to click.

* Remember, it has to divide 1000 evenly.

hhp

nina

Whoa, brain-tangling stuff! Thanks.

Captured from web.archive.org on 3 Jan 2010. view this capture