20 Do’s and Don’ts of Effective Web Typography

By / Nov 16, 2009 / Tips
shares

In a previous article here on Web Design Ledger, I broke down 20 do’s and don’ts of effective web design and today I would like to keep up with that topic and go over 20 do’s and don’ts of effective web typography. It’s an important part of designing for the web, yet it’s often overlooked (even by me previously). Below are the 20 do’s and don’ts and in the comments section, you’re free to let us know of any of the items we might have missed.

DO NOT use too many different font faces on the page

You may have 1,000+ fonts downloaded on your computer, but when they’re being displayed all on the screen at the same time, you’re not going to have many people impressed. Not only will this cause your website visitors to have a hard time reading, it’s also going to just make you look tacky.

web typography

DO NOT switch from serif and sans serif fonts multiple times

Sticking with the theme from above, switching from Serif and Sans Serif fonts multiple times per page will do you more harm than good. Readibility is the #1 thing you need to be worried about with your website, because no matter how “cool” it looks, if the visitor can’t read whats on the page easily, they’re going to leave.

web typography

DO NOT ignore planning for font increase by the viewer

Older audiences will adjust the font size view on their screens in their internet browsers settings, so no matter what font you default the text at, it might not be showing this way for the visitor. This can cause errors if you aren’t taking larger fonts into account for headers and other various items which might break the design if they break into two lines.

DO NOT use Sans Serif fonts for large bodies of text

Sans Serif fonts are great for the clean, uniform look – but when you’re putting together large bodies of text (10+ lines), switching your fonts to a serif font will allow for better readability as the curves and shapes help guide the eyes better than the straight, uniform lines of the Sans Serif fonts.

web typography

DO NOT overuse font replaces like Cufón and siFr

Cufón and SiFR are just two of the various ways you can replace text in your browser to give off a more custom look, but use it wisely. Using the font replacement for the entire web page is going to be a bit overload and will distract the visitor from the actual reason you’re typing on the page in the first place – you want them to be able to read it. I would advise to generally stick with headings and calls to action for your font replacements and leave the major bodies of text as regular, web safe fonts.

DO NOT overdo the emphasis in your text

A good writer will be able to emphasize the words they want without using bold, italics or underlines. If you’re text is littered with tons of strong and italics and underlines, you might want to rethink what you’re doing. Utilizing the codes to emphesize specific items wisely will make things look – and read – thousands of times better.

DO NOT forget to utilize font stacks in your css codes

When I’m building websites, I tend to like using helvetica for the text of specific items. I realized early on that not a lot of people will have purchased helvetica, so the font won’t display properly on their page if I simple use “font: helvetica;” in my css, so I read up on font stacks and use them religiously now. Basically, it gives you the option to use any font you want, and also allows for back ups in case the visitor doesn’t have the specific font you give first. An example would be like this: “font: Helvetica, Arial, sans-serif”, which basically says that you want the page to display helvetica for the text, and if thats not available on the visitors computer, you want the page to use arial – and if for some reason that isn’t available, it gives a generica sans-serif font.

DO NOT type in all caps – use text-transform when you need it

So, lets just say that you want your headings to all be capitalized – how do you do it? DO YOU EXCESSIVELY TYPE IN ALL CAPS? There are a few problems with that. First, it’s annoying. Second, it’s not easy to edit them out later on if you redesign your site and do not want all caps anymore. So what do you do? Utilize the text-transform css code. Here’s an example.

text-transform: uppercase;

DO NOT forget to use accent characters when needed

Typing words like Cufón numerous times on the page without the accent characters will make you look sloppy and uneducated. Yes, it’s true. So utilizing the accent characters will allow you to display the words properly (it’s really polite to do so) and it also is a lot easier than you’d think. You can get a full list of accent characters by visiting this article from w3.org.

web typography

DO NOT – I repeat – DO NOT use comic sans or papyrus on anything!

This is actually a rule across all forms of design that use typography – web, print, ect. Never – I repeat – never use comic sans or papyrus on anything. It’s tacky and deserves to be lumped in with IE6 – and we all know how bad people hate IE6, right?

web typography

DO use line height to your advantage

Relying on the default line height for your text will bite you in the ass in the long run because it’s honestly just not enough room between lines and will not allow you to work with a proper baseline grid (more on that below). I tend to keep my line height 5-6 px larger than the font size I choose – so if my font size is set to 13px, I will make the line-height 18px.

DO use the proper text colors on the page background

The best thing to do (in my opinion) is to utilize an off-white (#F8F8F8) font on a black background and a dark gray (#252525) font on a white background. It helps the contrast become minimal and doesn’t strain the eyes as much for your visitors when they’re reading your content.

web typography

DO use web safe fonts as often as possible

When you’re building your font stacks, make sure you’re using the web safe fonts as much as possible. The fonts that are installed on both PC and MAC can be found by reading this article on ampsoft.net. When you have a knowledge of what web safe fonts are out there, you can better prepare your website for the break down from your original fonts to the fonts that are most common and would be used if the visitor didn’t have your font installed.

DO use a proper hierarchy for your pages

Utilizing a great hierarchy for your web pages will allow your visitors to quickly scan your content and find the most important items. Nothing is worse than getting to a page and having to spend 30-60 seconds looking for the content and finding out what it’s even about. Use proper title tags for the most important sections and smaller title tags for less important sections. You can also use different colors and spacing to vary the hierarchy for your pages.

web typography

DO make use of a baseline grid

A consistent vertical grid will help readability for your web page and also increase the visual appeal of the overall design. Proportion and balance shouldn’t be broken by font sizes, so sticking to a proper vertical baseline grid will allow your page to flow naturally from top to bottom as well as from left to right. Acheiving this effect is as simple as these few lines of code below. Notice that the line height for the text is the same size as the margin for the bottom of the paragraph blocks of text (you should also keep this in mind for header tags as well as images).


body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
}

p { margin: 0 0 18px 0; }

DO utilize white space as much as possible

Keeping up with the above do, utilizing white space in your design will help your pages readability. It will allow your page to breathe and give your visitors eyes a rest. Don’t believe me? check out the image below and let me know which item you think is best for readability.

web typography

DO keep the use of centered text to a minimum

Centering text is good for one line or maybe a speech bubble in your design, but requiring your visitors to read large blocks of text will cause their eyes to drift and not follow line by line as easily as if the text were aligned to the left or right.

web typography

DO use shade variations to help areas stand out more

When designing your next site, keep this in mind – if your body text is black and your sidebar text is a medium gray color, your content will visually stand out and be read faster than the sidebar items. The same goes for blockquotes and other non-essential items that you do not want to take away from the attention of your main content areas.

DO make sure you know about, and use, proper letter spacing for titles

This is an item I didn’t think about very often – until recently. If you are utilizing the text-transform css code I wrote about above, you’re going to notice that the text might be a bit hard to read. Utilizing the letter-spacing property in your css will help curve that problem. There is an example below but please know that the letter spacing is relative to your fonts default letter spacing so it might work differently for various fonts and font sizes.

h1 { text-transform:uppercase; letter-spacing: 1.25em }

DO make use of a typographic scale in your css codes

Using a proper typographic scale will allow your page to be read easily by the visitor and will allow you to keep the hierarchy in tact that we spoke about above because if your main text is 12 pixels, then the blockquote and paragraph fonts will be 125% larger by using the 1.25em code in your css. If you properly use a typographic scale, it will actually look like a flieght of stairs – like the image below.

web typography


body { font-size: 12px; }
h1 { font-size: 5.0em; }
h2 { font-size: 4.0em; }
h3 { font-size: 3.0em; }
h4 { font-size: 2.0em; }
blockquote { font-size: 1.5em; }
p { font-size: 1.25em; }
input { font-size: 1.0em; }
small { font-size: 0.75em; }

Anything I missed?

Let me know in the comments. I’m ready to learn from you all and I hope you learned a thing or two from me today as well. Thanks for taking the time to read my article and don’t forget to share it with friends through email and social networks if you enjoyed it.

54 Comments

  1. African Digital Art
    November 16, 2009

    Thanks for the helpful article. These are fundamental principles that are essential to good design. BTW I really love your header thumbnail images. Unique and effective design.

    Reply
  2. Nate
    November 16, 2009

    Comic Sans: the bravest of them all!

    (cf. CollegeHumor.com’s “Font Conference” vid)

    Reply
  3. Waheed Akhtar
    November 16, 2009

    Thanks for excellent article. Very helpful

    Reply
  4. Hutch
    November 16, 2009

    I disagree on “DO NOT use Sans Serif fonts for large bodies of text”. This decision is dependent on a large number of factors (corporate branding, point size, legibility of chosen font…), and should not be an “absolute” “rule”. Instead, consider your audience and choose appropriately!

    A more important consideration IMHO, is to use a font optimised for legibility in body copy and/or screen readability. With projects like Typekit (http://typekit.com) more fonts are becoming available for use on the web but many are not suitable for on-screen use at small point sizes. Choose wisely!!

    Reply
  5. Charles
    November 16, 2009

    Amen to the Comic Sans and Papyrus tip.

    Reply
  6. Sven Külpmann
    November 16, 2009

    nice article,

    but I don’t aggree on the line-height, you recommend. I use to set the line-height to 150% of the font-size, which works with small and large sizes as well (inside Blocks of text).

    greet sven

    Reply
  7. Tom
    November 16, 2009

    Good post but you should use % instead of em for font sizes.

    Found a blog post which explains why (not my blog) http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

    Reply
  8. orlando web designing
    November 16, 2009

    Good to see such useful articles. Very helpful. Thank You.

    Reply
  9. Martin Rosell
    November 16, 2009

    As Hutch says, the choice between Serifs and Sans serifs for body text is dependent on a lot of things.

    What is said about the Serifs’ ability to guide the eye is true for print. On a screen, in small sizes, the opposite is more often true. The serifs tend to distort the letter forms (because of the low resolution) and clearer Sans serifs such as Verdana is much more readable.

    However, with higher resolutions and larger font sizes, Serifs will play a more important role.

    Reply
  10. Janko
    November 16, 2009

    Useful tips, thanks for sharing.

    Reply
  11. Michael
    November 16, 2009

    You forgot: NOT TO USE Small Caps!! It looks horrible on websites

    Michael

    Reply
  12. digital design
    November 16, 2009

    Have you used typekit which is a great site that has just come out of beta for fonts. I really like it.

    Reply
  13. choen
    November 16, 2009

    Yup… useful tips, thanks.

    Reply
  14. Sid
    November 16, 2009

    Always use “etc.” (et cetera) rather than “ect.” (ectoplasm).

    Reply
  15. Grant
    November 16, 2009

    Great article. It’s nice to see a reminder about good typography on the web, it’s seems to got forgotten more often then it should.

    I do have to disagree with you on the point about using sans serif for long blocks of text. Many studies have been done on this. They have shown that younger people who have grown up seeing much more sans serif typography can read long blocks of sans serif type as easily as reading serifs.

    I think the typeface should be suitable to your design. Whether it be serif or sans serif.

    Reply
  16. Web Design Kent
    November 16, 2009

    Some great tips, thanks for the post

    Reply
  17. BEBEN
    November 16, 2009

    I do not understand about it. Hmmm…i have to more learning…;;)

    Reply
  18. Tobbi
    November 16, 2009

    Thanks for this helpful article!

    Reply
  19. Shane
    November 16, 2009

    Really helpful post, i agree that using too many different fonts on a page will make it look tacky, and hard to read.

    Thanks.

    Reply
  20. Design Informer
    November 16, 2009

    Great article, but I disagree with the use of Comic Sans. (J/K) Check this out.
    http://designinformer.com/comic-sans-history-examples-best-practices/

    Reply
  21. Tgjan
    November 16, 2009

    lay off comic sans, it never meant to hurt anyone

    It’s been bastardized by both the pretentious and the innocents

    eh papyrus does just look bad, not my dish

    Reply
  22. Ferdy
    November 16, 2009

    Good article, but I disagree with the following:

    “DO NOT ignore planning for font increase by the viewer”

    I think this rule is largely outdated since most browsers now zoom the entire page, not just the font. Unless you are using tables for everything it is almost impossible to design for any font size, it will almost always break your design.

    Reply
  23. Tony
    November 16, 2009

    Very useful tips…thanks for sharing.

    Reply
  24. Bernhard H.
    November 16, 2009

    It’s funny that this page’s layout breaks the first few rules… (1,2,4)

    Reply
    • Inner game
      March 20, 2010

      I noticed the same thing! I guess rules were made to be broken…

      Reply
  25. designi1
    November 16, 2009

    Nice article… with this i´ll update my own article with a few more ideas with what you wrote here! ty

    Reply
  26. Helikopter Design
    November 16, 2009

    Excellent work, Mike. Lots of great tips and pointers.

    Reply
  27. Nadir
    November 17, 2009

    very helpful

    Reply
  28. Kyle
    November 17, 2009

    I disagree with the rule that serif & sans-serif shouldn’t be mixed. A List Apart uses a mix of Georgia and Verdana to create contrast — and surely you appreciate their typographic sense, because you’re using them as an example of another one of your rules.

    Interestingly enough, Jason Santa Maria recently published an article on A List Apart wherein he actually *suggests* pairing serif with sans-serif typefaces:

    “One of the easiest ways to quickly create balance and contrast in typography is to choose a serif and sans serif pairing. It’s a simple, easily managed combination that can produce a cohesive look to the text if you select the right typefaces.”

    Reply
  29. dp
    November 17, 2009

    all good. However, I did use Papyrus once to good effect. (only once) -dp

    Reply
    • Tony
      November 19, 2009

      So did I – the site owner specified it!

      It actually looked ok, but many machines I checked it on didn’t have it.

      She’s since had the site re-designed . . .

      Reply
  30. Orlando Web Designing
    November 18, 2009

    Thank you very much for your coverage over web designing.

    Reply
  31. Stu
    November 18, 2009

    Good thought-provoking post, with some reminders of what not to do…

    Though I agree with Kyle – with a little elegant execution sans and sans serif can work together – ALA being a great example.

    Reply
  32. Pariah Burke
    November 18, 2009

    Sans Serif fonts are great for the clean, uniform look – but when you’re putting together large bodies of text (10+ lines), switching your fonts to a serif font will allow for better readability as the curves and shapes help guide the eyes better than the straight, uniform lines of the Sans Serif fonts.

    That’s quite true in print, but numerous usability studies have determined the opposite for screen reading. Serifs can become blocky, pixelated, and more difficult to read depending on the display device and its anti-aliasing capabilities and algorithms.

    I also notice you aren’t taking your own advice; your story is set in san serif.

    Reply
  33. Tony
    November 19, 2009

    Re: emphasis – don’t use underlines at all.

    It looks too much like a dud link.

    Reply
  34. Dan
    November 19, 2009

    Papyrus is the bomb!! not sure what the big deal is.. Oh wait… hahahaha

    great article, everyone should read this, print it out, and post it next to their monitor.

    Reply
  35. Telex
    November 19, 2009

    DO NOT forget to use accent characters when needed.
    Typing words like Cufón numerous times on the page without the accent characters will make you look sloppy and uneducated

    It is not about displaying. It’s about language. Accents (and all diacritics) are part of the words. It’s not a question of forgetting, It means you know how to write in the language you are writing.

    So, the tip could be
    “Do not forget to write ‘w’ in words like ‘whisky’”

    Reply
  36. Maicon Sobczak
    November 20, 2009

    I totally agree with you. Typography is growing in importance and know how use is essential for webdesigner.

    Reply
  37. Michael Kozakewich
    November 23, 2009

    Comic Sans has its place (and so does Papyrus). It’s important not to stress that people should never use it, because then they latch onto that idea and lose all sense of propriety. Just tell them gently that THEY shouldn’t use it because they don’t know how.

    Reply
  38. Karl
    November 24, 2009

    I’ve been through the list, and I can safely say I’ve ticked all the boxes (except for use em’s – need to look into this :-))

    Thanks for this! :-)

    Reply
  39. Ishaq Chughtai
    December 12, 2009

    Hi,

    These are really very beautiful text presentation techniques. And more helpful for us, now we can make a new stylish designs.

    Thanks
    Ishaq Chughtai

    Reply
  40. Thibault
    December 14, 2009

    That’s a great article. Thanks for it.

    Reply
  41. Dave
    January 22, 2010

    Amen to the Comic Sans and Papyrus. I had client I designed a site for with a previous employer and she wanted all the content on the site to be Papyrus. I tried to convincer her otherwise. She insisted I had to use Papyrus and I think I cried through the whole process.

    Reply
  42. TimG
    February 24, 2010

    I agree with you on most of this stuff, but re sans-serif in the body, I have to go with Martin and Pariah. Most serif fonts do not translate well to the screen except at large sizes as far as readability goes. The web is not print. Screens are light based, pages are not; and furthermore, print is generally 300 dpi, your computer monitor is a fraction of that.

    Reply
  43. Ronnie
    February 24, 2010

    DON’T use and apostrophe in the word ‘dos’.
    Title should be Dos and Don’ts.

    Reply
  44. Maak
    February 25, 2010

    DO NOT take any of the above “Do nots” to seriously or religiously.
    Especialy the one about a whole page of cufon distracting a viewer…That would totally depend what font you used..And the always use websafe fonts for body text and then promoting font stacks.
    Another thing, if you add 5-6 pixels to your font size to get line height you will never keep a consistent baseline grid as larger font sizes would mean larger line heights. not that that’s wrong of course…you just can’t have both.

    Reply
  45. Logobird Designs
    March 15, 2010

    Great post. Agree with pretty much all your advice. I really need to improve my typography skills…
    Excellent stuff!

    Reply
  46. Iwan
    July 23, 2010

    very useful. thanks for the tips, mike! :)

    Reply
  47. Mary Baum
    August 23, 2010

    Part of readability is using the simplest, clearest words possible to get your point across, and a particular pet peeve of mine is overly formal language – especially the word ‘utilize.’ Lots of folks think it’s a more elegant way of saying ‘use’ – and that using bigger words when smaller words will do makes them sound better-educated.

    Two things:
    1. The reverse is actually true: Using smaller words instead of bigger words shows you have a command of your subject and you respect your audience. Think of your favorite profs in university – they often used very conversational language to get their point across.

    2. I just found this out a couple years ago: ‘Utilize’ does NOT mean ‘use.’ At all! It means ‘use in a new (in the sense of being pretty unusual, furthermore) way.’ As in, “She was so fixated on keeping her hair dry in the rain, she utilized *the toxic-waste bin* as a hat!”

    Reply
  48. joseph
    October 27, 2010

    thanks nice ….. i learned a lot.. by proper spacing.. and height.. and proper typeface…really thanks cheers..

    -joseph

    Reply
  49. web design hull
    December 19, 2010

    Great post, some really good tips for people to follow… I remember probably more than ten years ago we used to comment on artwork we received that used comic sans looked awful 99% of the time.

    Reply
  50. Jason
    July 3, 2011

    Thanks. I learned a lot from this.

    Reply
  51. KC Painter
    November 10, 2011

    Thanks for the great article. I am trying to focus on typography for my website, and had a fast question. Do you have a font size scale that you use? Or due you use a different scale for each project?

    Thanks,
    KC

    Reply
  52. Anika
    September 19, 2012

    One thing to add to the “DO NOT type in all caps” rule is that it’s also better for *accessibility* to not do that. E.g. if you write “HELLO”, some screenreaders will read each letter separately (“H-E-L-L-O”), but if you use text-transform instead, it becomes the intended “Hello”.

    BTW, you broke that rule in that very sentence… “DO NOT”… ;-)

    Reply

Leave a Reply