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!

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.” - Rick Osborne