Typography on the Web

Fonts in action

Font: Times New Roman

When to use it: When you need a traditional feel to your site (e.g. Antique Dealers or Historical Site)

It's the default font on most browsers and it's been kicking about since 1932 when it was first invented for the Times newspaper, so you might expect to see more of it on the web these days, but you simply don't.

It's been out of fashion with web designers for years and the general consensus is that, in its original form, it's fairly ugly. A recent article over at Usable Type however, showed how, with a bit of CSS trickery, we can breathe new life into the font, improving legibility and appearance.

Try the following CSS:

div { 
font-family: 'Times New Roman', Times, serif;
line-height: 1.6em;
word-spacing: 0.2em;
font-size: 90%;
letter-spacing: 0.02em;
}

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: Georgia

When to use it: Again, for sites with a traditional feel. Also good for large headings.

A very popular serif font on the web. It's classy, elegant and doesn't have the cluttered, dated look that Times can have. It also looks great at large font sizes, making it ideal for headings. This is generally the serif font of choice for most designers nowadays as it was specifically designed for the screen.

div {
  font-family: Georgia, Times New Roman, Times, serif;
  line-height: 1.8em;
  word-spacing: 0.05em;
  font-size: 95%;
  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.

Font: Verdana

When to use it: Works best with modern designs, but to be honest you can use Verdana anytime.

There's an old web designers saying: "if in doubt, use Verdana". And it's fair enough. Verdana is probably the easiest font to read on the web. It's wider than Arial, making it more legible and it looks good even at small sizes.

Try the following CSS:

div {
  font-family: Verdana, Arial, Helvetica, Sans-Serif;
  line-height: 1.7em;
  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.

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.

“Java is to JavaScript what Car is to Carpet.” - Chris Heilmann