Library tutorials & articles

Typography on the Web

Page 3 of 3
  1. Introduction
  2. Fonts in action
  3. Fonts in action (contd.)

Fonts in action (contd.)

Font: Arial

When to use it: Arial has a modern feel, but is more compact than Verdana. Useful for designs where space if limited.

Often thought of as Verdanas ugly cousin, Arial has a much tighter feel to it which arguably makes it harder to read. It is a very clear font though so you'll still see it used a lot. Sometimes a certain design will just feel better using Arial as opposed to Verdana.

Try the following CSS:

div {
  font-family: Arial, Verdana, Sans-Serif;
  line-height: 1.8em;
  word-spacing: 0.2em;
  font-size: 76%;
}

The results:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tempor, orci eget hendrerit lobortis, nunc turpis commodo urna, vel ultricies lectus eros nec arcu. Fusce placerat lectus a justo. Ut cursus. Quisque euismod, massa at malesuada ultricies, enim risus hendrerit ipsum, sed tincidunt ligula libero non augue. Nulla facilisi. Aenean at eros et nibh feugiat pharetra. Fusce ante. Integer vel lacus ut arcu tempus ornare. Curabitur eget mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Font: Trebuchet MS

When to use it: When you need a slightly quirky feel to your text

A sans-serif font that really gives a distinctive offbeat look to text, while still maintaining very good screen readability. Trebuchet MS is now becoming a very popular font with designers who want their sites to stand out from the crowd.

Try the following CSS:

div {
  font-family: 'Trebuchet MS', Verdana, Sans-Serif;
  line-height: 1.8em;
  word-spacing: 0.1em;
  font-size: 80%;
  letter-spacing:0.01em;
}

The results:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tempor, orci eget hendrerit lobortis, nunc turpis commodo urna, vel ultricies lectus eros nec arcu. Fusce placerat lectus a justo. Ut cursus. Quisque euismod, massa at malesuada ultricies, enim risus hendrerit ipsum, sed tincidunt ligula libero non augue. Nulla facilisi. Aenean at eros et nibh feugiat pharetra. Fusce ante. Integer vel lacus ut arcu tempus ornare. Curabitur eget mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Is that it then?

Well no, there are other popular fonts out there that people use, but the ones above are probably the best for day to day use. Remember though, that choosing the right font is only the first step in crystal clear readable type. There's a lot more to think about, and factors such as margins around text have a huge impact on the overall readability.

And of course you've got to have something worthwhile to say as well!

Comments

  1. 01 Jan 1999 at 00:00

    This thread is for discussions of Typography on the Web.

Leave a comment

Sign in or Join us (it's free).

Roan Lavery

Related discussion

Related podcasts

  • Top Web Design Mistakes

    Pete LePage is Product Manager of Internet Explorer Developer Division and he doesn’t want your web site to stink. Sharing from his talk given at TechEd 2008, Pete highlights 10 common web design mistakes and tells you how you can bypass the same blunders. Pete also tells us how future features o...

Want to stay in touch with what's going on? Follow us on twitter!