The latest issue of Design Edge Canada magazine – a publication for Canada’s graphic design industry – was a web typography special for which I contributed the following top ten tips for web typography:
- Use quote and dashes; not primes and hyphens
- Don’t rely on a browser’s default margins and indentations
- Design to a scale
- Limit you number of typefaces and font sizes
- Ensure line lengths are comfortable for reading on screen
- Be generous with leading
- Embrace web fonts such as Arial that are well designed for the job
- Ensure you design won’t break when users increase the text size
- Specify a print style sheet to ensure your website prints out well
- Prepare for print-resolution screens
Yes I did say embrace Arial. It is a good screen font. Rubbish in print, but good on screen q.v. Subtraction.
Also in the magazine is a very decent article on the current state of web typography, featuring contributions from me, Dave Shea, Joe Clark and even typographer Matthew Carter. If you’re based in Canada you can order the magazine for free (those outside of Canada will have to fork out $60). I’m hoping the articles will make their way online soon.
Comments
1
I hope the articles make it to the web as well – looks like some interesting reads. That is a great list of tips. I like ‘embrace Arial’. Not that it is bad, and I am guilty, but many people went searching for new typefaces, abandoning the ones that still ‘worked’. I still don’t think it is bad – I just don’t think some of the basic fonts are a bad choice.
Anyway, much more could be said – but I enjoyed the tips.
2
Nice tips for a newbie like me. Thanks
3
I certainly hope that people cease to claim that “primes and hyphens” are the converse of “quotes and dashes.” Hyphens are still needed, and prime characters are used for rare purposes. You mean stop using neutral apostrophes and quotation marks. That’s what they’re called, not “primes.”
4
Yes you’re quite right Joe, neutral apostrophes they are from now on. Same end result though, I hope.
5
Hmm, never heard of Design Edge Canada before. Then again I don’t really keep tabs up on design magazines that much.
Nonetheless, this was a good reminder of the things I need to keep in mind about type on the web. Also enticed me to get the free subscription to DEC.
Good job Rich.
6
I often use Arial or Verdana for body text because San Serif family is easier to see in a smaller size and Serif (Georgia or Times Roman) for heading. Does it sound OK? I this blog, the trend is vice versa (San Serif for Heading and Serif for body text).
Individually, I think San Serif doesn’t look good in big size (16 pt+).
7
I generally use arial or verdana for sites that i design, and i agree also with keronii that serif looks better with a larger font size and sans serif with a smaller size.
I have to work on print style sheets and “not breaking when users increase text size”, for the rest i think i’m not bad.
Useful post, thanks!
8
Good points but I would personally expand on a few of them:
point 7 – in Firefox I would say by two and in IE I would say by one size…
and I would go further and say that you should not EVER include text with the serifs on them. Keep plain simple fonts like my two favs (verdana and arial)...
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.