How I go about choosing typefaces for the web
A short introduction
Typography on the web was one of the hardest things for me to grasp. There is a ton of control that I had to let go of that I was used to having in print. Things like ligatures, glyphs, kerning, even choosing an exact typeface, need to be thrown out the door. The limited choices and lack of total control isn’t a free pass on typography though, you can still create some beautiful designs with what you are given.
The game changer could be @font-face. It will hopefully let us open up our type libraries to the web but that is hinging on some copyright issues. As of right now, there are several ways to display your type within the copyright. Its my suggestion that you experiment with all your options and pick the tool/hack that works best for each project.
Made for print
It doesn’t help our cause that a majority of typefaces were designed for printed material which affects how it looks on screen. Much like putting truck tires on a compact car, putting a print typeface on the web might work fine, but look sourly out of place. Of course this is not a rule, some print faces can still look incredible on screen, you just need to test each out. Print designers will print out and test different typefaces on different pieces of paper with different kinds of inc. I like to test out each face and how it works not only on screen but how it works with the rest of the design on the site. You should also check to see what the typeface was originally designed for and what its past uses have been. Wikipedia has been invaluable to me for this and the newly launched Typedia might be an even better resource.
Choosing a Font for the Body
Choose a typeface with a high x-height and it will usually be an easy read. The extra space and counters within the larger x-height makes it easier to view and read groups of letters. Look for typeface’s that have been built for screen use Verdanna and Georgia are a bit over used but rightfully so. They both scale down well and are an easy read on screen. There are several typefaces that have been traditionally used for printed body copy, like Palantino, and will show pretty well on screen.
Take into account how well the font you choose reads at the size you have implemented. I would suggest keeping the body at least 14px or larger for any long body of copy. Wilson Miner does a good job explaining why you should go big on your body copy in his post Relative Readability. Depending on the user base, I also check out how the font renders in Windows. Windows generally renders type a lot worse than a Mac, so its important to see the differences and adjust accordingly. Make sure your line height isn’t too large or small. I generally keep mine around 1.5 but Ill change it to add or take away the weight of the text on the page.
Choosing a Display Font
Your display/title/header font should bring style and a certain uniqueness to the page. The display typeface play an important role in giving the reader an indication of what kind of information they are about to read. Make sure the chosen font leads in the reader but doesn’t take away from the content you are trying to design.
The line height for titles can vary with the font you choose. By shortening the line height you will give the title more weight and importance. Be careful though if the line height is any less than 1em the ascenders and descenders could collide.
By setting the tracking (letter-spacing) in titles you can add legibility and style to the font. Titles set in all caps and type set in reverse should have some extra tracking so it is easier for readers to make out the letters. Titles set in upper/lower can get negative tracking to add to the weight that the header carries.
Pairing typefaces
This can sometimes be a little tricky and bit of a problem. An easy way to get around it is a serif and san-serif pairing. This works because of the obvious contrast in styles. If you can get away with using one typeface with varying weights and sizes to differentiate your content, it will be even easier. A good ground rule make sure that the two font styles are distinct.
I usually start with the display face and find a body font that I can pair it with. I try to contrast weights, styles, and the typefaces classification. The body should tend to blend behind the style and strength in the header.
Be sure to look at other sites and printed material that you like and see what pairings that they are using. The more pairings you see the more you should realize which ones are working and which are not.
Mess with stacks
Even with @font-face, the best way to deploy your chosen font is through CSS stacks. There are a few standard stacks which all get pretty boring after a while but I like to mess with mine a little bit, especially with the display font.
I had the chance to see Richard Rutter present Facing up to Fonts’ at the Head Conference. He encouraged getting more creative with font stacks, using non-standard fonts in non-standard stacks. Ever since I have not been afraid to really drill down to the exact font I want to use.
The best resource I have found for font stacks is an article written by Nathan Ford at Unit Interactive called Better CSS Font Stacks I will usually start with one of Unit’s stacks and work in some other magic. If I see a font or pairing that I really like while browsing other sites, I’ll peek at the code and stash away the stack in a Google doc for later abuse.
When building a stack, I usually will put on next to each other test them in Illustrator, Photoshop or right in the browser. Just to make sure that there are few discrepancies between the fonts in the stack. If you feel really crafty, don’t be afraid to mix in serif with san-serif. I have never done it but I have wanted to try it out. I also will test the stack in the design by taking the front few typefaces off one at a time. This gives me an idea of what other potential visitors will be seeing if they don’t have the ideal font.
Further readings
Elements of Typographic Style by Robert Bringhurst
Five Simple Steps to better typography by Mark Bolton
Colophon
The title for this article is set in Report by Typodermic and implemented with TypeKit
Let me know
I would love to hear how you choose a font and how you implement it and what your thoughts are on parts of my process. Post your favorite font stacks in the comments too.
Posted on September 29th, 2009 By Kyle Fiedler
8 awesome responses
Kevin Holesh
14Dec09
4:15pm
My personal favorite font stack is:
font-family: Palatino, ‘Palatino Linotype’, Georgia, Times, ‘Times New Roman’, serif;
I love Palatino for body text and Georgia provides a solid backup.
One font I’m very excited to use for headlines is Whitney Condensed. I’m looking forward to the day I find the perfect application for it.
Travel Stock Photos
08Feb10
10:08am
Thanks for the post! Great layout and useful information.
I love AG_Letterica font family and Officina.
Color Theory 1,2,3 « IM190 Web Basics
09Feb10
6:13pm
[...] web fonts and examples of good use of font stacks. Another great post from Kyle Fiedler on how he chooses typefaces for the web is a good place to get some inspiration and insight. Don’t forget to check out all of the [...]
Jason
11Feb10
5:43pm
I really love your thought process however shouldn’t “inc” be “ink” in the made for print section? If I am wrong please let me know.
Amrinder
25Feb10
10:39pm
Impressed with the use of different typefaces here. Recently, I wrote an article about font-stacks where I compared different typefaces available on Mac and PC. Based on their share, I attempted to create more relative font-stacks.
Hope you find it useful.
lono
10Mar10
10:49am
great and informative, I often have to try and explain to clients why you cant use their corporate font on the web.
Kyle Fiedler, designer, developer and part time astronaut | How I go about choosing typefaces for the web « BloodStudios.com
15May10
9:06pm
[...] kylefiedler.com/articles/choosing-typefaces/ [...]
Joseph Conlon
01Jun10
6:04pm
Good article, typography can only get better for the web with projects such as the Google Font API.
Flap your gab