A guide to Web typography
The Basics
Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web pages come to life through great typography.
First, it’s worth noting that Typography is not just about choosing a font, or even distinguishing one typeface from another. In recent experiments, trained monkeys were able to correctly identify Helvetica 90% of the time.
Today we’re going to talk about web typography in terms of a recipe of four fundamental ingredients. If you’ve ever tried to cook a soufflé, you’ll know how important the recipe is. Follow this recipe and your typography will rise up like … that’s enough of the culinary metaphors, let’s cook:
Contrast
Pale pink text on a pale blue background, might match your t-shirt, but it just doesn’t read well. Text exists to be read; make sure that it contrasts enough with the background to achieve that. If you’re ever unsure about contrast, then take a screen dump of your page, open up your image editing software and reduce the image to grey-scale. You’ll soon see if you have enough contrast. Robert Bringhurst, the consummate typographer writes, typography exists to honor content. Are we honouring the content, if we design our pages in such a way that the text, the content, is difficult to read?
Personally I dislike reading long stretches of reversed out text (i.e. light text on a dark background); how often do we see books set like this? It may well be appropriate for shorter stretches of text on-screen, but I find it very tiring to read for any length of time.
Size
With the birth of Web 2.0 I noticed a rather annoying trend; namely small type. I’ve even emailed site authors and kindly suggested that they increase the default font size. I’ve received mixed replies from, tough, get yourself some glasses to thanks, I’d never even considered that my type might be too small for the average reader. I’ve even heard tiny body text defended with, “it matches my minimalist design”, or similar. It most likely reflects a small something else. Unless Super Man and 20/20 Vision Girl (Marvel Comics, keep your hands off, she’s mine) are your only readers, then small type is just not on.
Don’t set body text below 10 or 12px and, if possible, make it bigger. Remember, what’s legible on your 65 inch High Definition Plasma monitor, might not be so on a 15 inch MacBook. If in doubt, make it bigger. The body text on ILT is set at 16px.
Hierarchy
Varying type size is one of the best ways to differentiate content. Colours and pretty boxes might help, but different sizes of type, used consistently throughout your pages, will signal loud and clear to your readers the relative importance of your pages’ elements. It also means that if your readers are in a hurry, they can quickly pick out the important bits — and that could mean that they stay longer and read on.
Hierarchy can be achieved in other ways too. We’ve just mentioned using different sizes of type to achieve it, but we can also use different styles; for example, all-caps, or using italic for sub-headings. Serif and sans serif faces can also be mixed to good effect.
Space
Let your type breathe. Don’t be afraid to leave blank spaces in your pages. This negative or white space will help focus attention on the text—and it’s the text that speaks loudest, so let it be heard. Next, remember the line-height CSS property; a good rule of thumb is line-spacing that’s at least 140% of your text size (remember, I’m writing about web typography here). Good type designers put a whole lot of effort into the micro white space that sits inside type. They spend countless hours attempting to achieve a balance between the black of the type and negative or white space that it envelops. Likewise, we should take time to consider the macro white space, the ‘voids’ that shape our blocks of text.
Remember, these are not rules, but rather guidelines. However, follow them—contrast, size, hierarchy, and space—and your typography will rise like one of Gordon Ramsay’s Soufflés. Oh, and I was only kidding about the monkeys.
In a future three-part series on the fundamentals of typography, I’ll look at all of the above in more detail. I’ll also be discussing numerous things (details) that will go a long way to improving your typography both on- and off-screen.
What works for you? Do you have some tips you’d like to share?
This post is an extended version of an article I wrote for the British .net magazine.
Subscribe to ilovetypography.com
Justin
Excellent guide. I wish every designer out there (and everyone those designers answer too) had “Space! Don’t underestimate it” stenciled onto their desks.
On thing that I notice all the time on the web is poor kerning. A title set in 24px Helvetica Neue looks great, but not if there’s the default space between the letters. Use CSS to set letter-spacing: -1px or -2px, play with it. Remember: tight but not touching.
Feb 28, 2008
Hamish M
Fantastic article, this is really great advice John.
By the way, I love the monkey. Great blending on the hair there. That’s no easy task. Hehe.
Of course, I don’t think even that can match your example of Space. Pure brilliance.
Looking forward to more. :)
Feb 28, 2008
johno (iLT)
Justin
Apologies that your comment found its way into the hellish void that is Askimet’s spam folder. Odd. You make a good point about tighter spacing in titling.
Hamish
Thanks. The monkey could have been better (don’t zoom in, or you’ll see how poor it really is). Did you notice that I lost my hatch marks/dumb quotes (15 inch and 65 inch). I wonder how I can get typogrify to let those through?
Feb 28, 2008
david gouch
I think it’s unfair to criticize reversed type by pointing out that books don’t use it. I’m gonna guess books rarely use reversed type because it will cost quite a bit more to print, and because you have to worry about the dark color bleeding into the letters – two issues that don’t exist with screen type.
Feb 28, 2008
Alec
I’m always impressed with sites (like this one!) that manage to practice good typography. For me, the web has always been somewhat antithetical to good typography — the paucity of standard web fonts; the vagaries of CSS and HTML rendering engines across browsers, versions, and platforms; the varying sizes and resolutions and shapes and technologies of computer monitors; user preferences that can override designer preferences; incomplete typographic support (e.g., faux small caps in most browsers); etc. etc. Hacks have come and gone to increase the availability of fonts (WEFT through sIFR), but the web remains such a hodge-podge of standards and malevolent flexibility that it’s something of a miracle that there are any beautiful sites at all. It’s gotten to the point that every new site I develop I even think about doing it all in Flash. How sad is that?
Oh, and david gouch makes a point…
Feb 28, 2008
Mahoney
Ditto on the small type. I actually think the small type thing is a holdover from late 90s web design where EVERY.SITE.ON.THE.INTERNET. was set in 10px Verdana. There’s just no reason not to have a more comfortable font size, especially since there are logistical concerns with line length and small fonts means little space taken up before you cross those thresholds.
Feb 28, 2008
johno (iLT)
David
I wasn’t criticizing reversed out type per se. In fact, the contrast illustration demonstrates that it can work. Interestingly, reversed-out type on a display can actually look fatter than black text (at the same size) on a white background (the opposite of what happens in print), owing to, what I think they call, flare. However, I don’t think that cost is the only barrier to the reversed-out novel. Perhaps I will be proven wrong. Thanks for raising this. I’d be interested to know what others think about it.
Alec
What I find most frustrating is how different browsers render the same page in so many different ways. The printed page in contrast is just about immutable, and you know (unless your printer fowls things up) that those tiny details you’ve worked so hard to get right, will be honored by the ink and paper. I guess it’s about making the most of what we have. 400 years ago, typographers worked with fewer tools, and yet they produced some of the most beautiful pages ever to grace this earth (pages that I could only dream of making). And as for the web (and screen fonts), things can only get better. My first computer was a ZX-81, and—thankfully—we’ve come quite a long way from that.
Feb 28, 2008
John
Great article. And since you mentioned Robert Bringhurst, I thought I’d mention the very useful Elements of Typographic Style Applied to the Web.
— Next, remember the line-space CSS property; a good rule of thumb is line-spacing that’s at least 140% of your text size. —
And I hate to be “that guy,” but I think you meant line-height, not line-space
Feb 28, 2008
johno (iLT)
Mahoney
You make a good point about font size in relation to line length. More about that in a future article.
John
Thank you. And thanks for posting that link—it’s a great resource.
Well, if you hadn’t been “that guy”, I’d never have noticed; you’re absolutely right—line-height it should be.
Feb 28, 2008
Justin
The other side of the coin:
We, as web designers, are not restricted by any of the trappings of print. We can have fluid text, allow for resizing, even animate. Rather than looking at print and seeing what we can’t do, it’s good sometimes to look at print as a restriction, and celebrate all the things we can do now that we’ve shaken off this analog coil.
Feb 28, 2008
Justin
Man. You suckered me right in with the monkey business.
Might have to do that for my senior project…if only monkeys weren’t so hard to come across in Iowa. Maybe I’ll use Communication Studies faculty instead. They do all their powerpoint presentations and word documents in Arial.
Every. Single. One.
Feb 28, 2008
Alec
Wow — I had to look up the ZX-81 — never heard of it before. It looks pretty cool, anyway. My first computer was the Victor 9000, which could dual-boot MS-DOS and CP/M 86. And it had double-sided floppy drives. I remember saving up for my Victor, and by the time I was ready to buy one, IBMs were out with color monitors. And I remember saying to myself “Whatever — as if color matters. All I need is black and green.” I guess we have come a long way after all.
Feb 28, 2008
Heidi
Great topic! I’m finding that type for screen-reading is such a different animal than for print. Especially when i’m designing on-screen, and actual size renders at 133% on my screen. Who knows what size it will look like on everyone elses’s monitor??
Also, i sometimes get irate emails back from people that my email font is way too tiny to read comfortably… not from everyone, only SOME folks. Then i make it larger, wondering if OTHER folks think “geez, she’s such a dork using that HUGE type!”
*sigh*
Feb 28, 2008
Hamish M
John
Good catch. I thought that case was handled, though apparently it’s not.
A bit of digging shows it’s the SmartyPants filter that’s doing it, seems like it doesn’t handle units and quotes like that. I think the best solution would be to reverse the effect with a pass from Typogrify, e.g. check for any set of numbers followed by quote, and dumb down said quote if necessary.
I’ll look into it.
Feb 28, 2008
Jeff Blaine
See also:
Compose to a Vertical Rhythm
24ways.org/2006/compose-to-a-vertical-rhythm
Web Typography (semi-cheesy site look IMO, great content)
www.safalra.com/web-design/typography/
A List Apart : How to Size Text in CSS
(who would do well to increase their font size… ahem)
www.alistapart.com/articles/howtosizetextincss
Feb 28, 2008
Brian F
Lately I’ve been using letter-spacing: 0.01em; (roughly, depending on your base size). It gives *just enough* space between letters to make it a smidge easier on the eyes, to keep the flow between words.
Feb 28, 2008
Brad
Great post, as always. I am loving the technical, yet passionate work about Type on this site.
I will definitely be keeping these guidelines in mind as I work on some new sites.
Thanks!
Feb 28, 2008
Tlönista
Minor nitpick: the “monkey” is an orangutan and therefore…an ape.
OK I’ll read the actual article now.
Feb 28, 2008
Katie
This is a great article. thanks! I’m forwarding the paragraph about white space to the people I work with that write the copy. Copy writers need to remember that. :)
Feb 28, 2008
Ian Stewart
Great article, as always, Johno! Except… that’s an ape, not a monkey. :)
[edit to point out my slowness: apparently Tlönista noticed that too.]
Feb 28, 2008
Rik Hemsley
Heidi, you can probably fix your email problem by finding the option to turn off composing email in HTML format and do it in plain text instead.
In ye olden days, it was considered the height of rudeness to send email in HTML, but it only takes a couple of programmers threatened with the sack before every manager who dreamed of sending their messages in all-caps magenta Comic Sans found they had it their way.
Feb 28, 2008
Samantha Armacost
I’m so glad that I read this article all the way through, not only for the refresher, but so I didn’t start telling everyone I know that monkeys can identify Helvetica.
After visiting this Arial or Helvetica quiz, I know the primate would give me a run for my money.
Feb 28, 2008
Silviu
I took the liberty to augment your list with three more tips.
Thanks for making web designers conscientious about their type.
Feb 28, 2008
Dylan
Increasing the line-height works when using light-on-dark, just make sure it doesn’t throw your baseline out of whack.
Also, this little nugget of info is great.
I second your points Silviu. I try to make linkes 60-70 characters long.
And don’t use text-align: justify; because it doesn’t work well enough yet.
Thanks Johno
Feb 28, 2008
JakeT
Yeah, text size is really tough, because there’s so many factors: browsers, individual settings, monitors, resolutions.
What looks great on my cheap, little laptop turns ridiculous on my widescreen monitor at work.
And vice versa.
Feb 28, 2008
Chris Papadopoulos
“Next, remember the line-space CSS property; a good rule of thumb is line-spacing that’s at least 140% of your text size.”
I often use a font-size to line-height ratio of 1 to 1.5 for internet stuff to make mentally calculating things a bit easier.
“Personally I dislike to read long stretches of text reversed out”
Regarding the bit about contrast, I personally don’t mind darker sites, but such a large percentage of people dislike that look so I tend to shy away from that.
Feb 29, 2008
Dave
I anticipate the forthcoming in-depth articles : D
You da man.
Feb 29, 2008
Adrian
Excellent points. I also have noticed the *flare that occurs with ‘reversed out’ text. But I kind of like it. I’m building a site right now that ILT has inspired me to build - using white and grey on black mostly. But the content will be in short bursts, with plenty of spacing so I consider it to be OK. I also will be experimenting with fonts and serif/sans serif style switching on the fly. My CSS will include new Vista fonts that are pretty slick. Johno, any thoughts on those fonts? (ie. Cambria, Calibri, Candara, Consolas, Constantia and Corbel)
Feb 29, 2008
Nour
Great article as always John!
One thing that’s always impressed me is that even with a limited number of web fonts, there are so many websites out there that are differentiating themselves with creative use of only those fonts. It makes me want to forget about sIFR for now. (I still think you should write an article about sIFR though!)
I’ve been meaning to do a complete overhaul of my site, but I didn’t know where to begin. Now I’m feeling inspired by your “recipe.”
Keep it up John!
Feb 29, 2008
Robert
Good advice John. I have really seen a big change in recent years of amazing web typography. I remember back in the yahoo geocities days it was comic sans this, comic sans that ha ha. Yeah tiny type gets on my nerves too, but usually the things that are ridiculously small aren’t worth reading anyway.
Feb 29, 2008
mwanafunzi
Great article, can’t wait for the follow up.
As for font sizes information architects japan have written a very interesting article..
The 100% Easy-2-Read Standard.
Feb 29, 2008
jacoov
i’m new to typography and it was very helpful!
Feb 29, 2008
inspirationbit
oh, I’m so glad you’re covering Web typography on iLT, John. Thanks so much. I think the small font size became rose in popularity because of Flash, and then people were trying to fit everything on a page without having to scroll it down, and I think you’re right about the age of designers who use very tiny font size on their sites - most of my students, aged 18-20 who were very much into Flash suffered from this tiny font size.
Regarding the reversed out text: a colleague of mine was complaining of having a headache from spending too much time reading from the computer screen (he’s an editor), until another colleague of ours suggested him to reverse the colour settings on his Mac, which he did and admitted that the headache was gone and he doesn’t have to strain himself while reading from the screen.
I also know many programmers (I don’t belong to this category) who like to write code by switching the colour settings in their editors to be light text on a dark background.
I’m not trying to defend light on dark schemes here, but I do think that when designed well light on dark can be as easy on the eye, as dark on light. Also white background on a screen is much more bright than white paper in a book, don’t you think so?
Oh, and I hope you’d be also covering in your Web Typography articles the efficient and beautiful type combinations (web-safe) achieved with CSS and Hierarchy, kind of how you demonstrated that Hierarchy example in this post.
Feb 29, 2008
TypoJunkie
I completely fell for the “ape” joke (Discwolrd anyone?); here I was thinking: “I wonder what Helvetica was compared to; I’m sure it’s easy to spot next to Zapfino, but not so much vs. Akzidenz”.
I Completely agree with the lack of white space in design; as I like to say: “White space is your friend”.
Anyways, the article comes in handy as I’m about to design a couple of websites, so thanks!
Feb 29, 2008
Zach
I think that these are very important guidelines! Everyone should know these things if you think you’re ever going to be a graphic or web designer. It makes the web a much easier place to read and look at. I dread the sites with low contrast background and type, and I often opt for my own style sheet for these sites. Good post.
Feb 29, 2008
Lydia
These are very helpful reminders. Love this site and look forward to each new post!
Agree with small type size issue - and it looks like CSS has helped this problem.
Another pet peeve of mine is too many different styles - in other words using 4 different typefaces instead of sticking to two. I remember reading somewhere that exceeding 3 different typefaces on the same webpage is pushing it. Of course, there are exceptions to every rule.
Feb 29, 2008
Alphabetix
Cool info on typography. Definitely not being afraid of white space is important!
Feb 29, 2008