Presenters
Frank Chimero, Office of Frank Chimero
Jason Santa Maria, Creative Dir Mighty LLC
Stephen Coles, Type Dir Typographica/Fonts In Use
Tiffany Wardle, Typegirl
More Information: http://j.mp/fontcure
There are hundreds of thousands of fonts available and grows every year. It gets difficult to choose types so we many times just rely on the ones we always use.
Typography Basics
Methods for Typography:
How vs. Why, practical execution in addition to theory and rationale.
Arranging the Furniture
Does the furniture fit who it’s for? – don’t put chairy in a modern room
Does the arrangement make sense? – don’t just throw a bunch of pillows in the room
Is there room to get around?
Choose a good typeface:
Good meaning high-quality and proper. Proper for the format, for the content, for the reader. You can set the tone with the word “party” and let the font tell you want type of party it’s going to be. Typopedia
Don’t use too many:
It’s a juggling act. The fewer typefaces one uses the less likely they are to drop the balls. Use faces in the right order – certain typefaces work in body and certain ones work larger.
Have a clear hierarchy:
Make more important things bigger, and less important things smaller. You’re already doing this in markup (H1, H2, H3, etc.).
If in doubt, read it:
Excellent type comes form empathy for the reader. Huffington Post doesn’t pass the read test. It is very hard to read a full article.
How to Evaluate the Quality of a Font
Are there too many choices? Not all fonts are created equal.
Does the font have a minimum character set?
Is it all uppercase? Does it include all punctuation?
Does the font have extended Latin or non-Latin?
Will you need to do anything internationally to support other languages? Find a family that includes all of it.
Does the font have siblings and cousins?
Make sure you’ve got italics and bold in your font. Do you also need condensed or something else?
Is the font well-spaced?
Don’t confuse tracking with kerning. Even well-spaced fonts need some kerning. Look for letters that depend on kerning.
Does the font look good across browsers and platforms?
Look at as many applications of the font as possible. Make sure the fonts are well-hinted.
What makes a good text face?
Pretty much all the web is text. You want people to actually read your content, and connect with it.
When we read:
Take a chunk of text and block out the bottom of it, it’s still legible. If you block the top, it becomes hard to read. Most of the font information is in the top. Find a text face that is easily discernable.
Display Faces:
- Bauer Bodoni
- Myriad Condensed
- Bello
Look for good x-height.
Look for definition in the letter forms (Verdana). Look at #1 Capitol I and lower-case L (1Il).
Don’t hinder reading in any way if you can help it.
Look for workhorse typefaces that can stand up. Bodini looks good large and shrinks down to nothing when small. Meta looks good large and small. When you have a flexible typeface you can use fewer faces.
Get dirty – take a bunch of text from a project and just see what it feels like to read. See how things look at size.
- Versatile
- Sturdy
- Recognizable
Helvetica
It looks good in interface design. It looks good really big. Calvetica calendar lists it as a feature. It’s a versatile font, but not in branding.
Too many people use Helvetica for branding. It doesn’t set you apart. Try and do something different to make yourself stand out. 15 of the top 20 retailers use Helvetica in their campaigns.
There are other fonts that are different (newer). You don’t always have to stick to the tried and true.
Times New Roman
Alternate: Le Monde (more modern for newspapers and better for screen.
Gill Sans
Has very inconsistent width and weight (letter A)
Trade Gothic
It has inconsistent widths and weights
Helvetica
Alternate: FF Dagny – has a cleaner design, less formal
Alternate: Museo Sans
Georgia
It’s been the serif for the web forever – it was designed for the screen.
Alternate: BentonModernRE – less contrast, a bit wider
Alternate: FF Meta Serif – more contemporary serif, more condensed
Alternate: Minion – bets neutral typeface, like you’d see in a book
Frutiger
Great font for wayfinding – used in London airport and many many others.
Questions & Tools
- Readability Bookmarklet is a handy tool to put sites into a different style.
- Books:
Elements of Typographic Style
Thinking with Type
Detailed in Typography
Stop Stealing Sheep and Find Out how Type Works