elementfortytwo

Typography is Beautiful

Having a solid understanding of typography is extremely important when designing for the web. It’s something that requires a little more thought than just choosing which font looks nice. Web fonts are not as limited as many would have you believe – and there are tons of great (and supported) CSS declarations that allow you to customize the look of your type. Before getting into anything that technical, let’s first go through some typographic fundamentals.

Serif and Sans-serif

Most fonts can be broken up into two different categories – serif and sans-serif. Serif fonts are more traditional and date back nearly 1000 years. They are used more often in print media than web and give a feeling of quality and class that sans-serif fonts sometimes lack. Serif fonts have small ornaments and stylish curves that make them look interesting – and we use them very often for large headlines.

Sans-serif fonts are used more often in scientific writing and online content and lack the ornamintes that give serif fonts their personality. The true benifit of sans-serif fonts is that they are generally more readable, as they require less pixels per letter and retain their shape even at low resoultions. This is why sans-serif fonts are so popular online.

The Importance of Spacing

If there is one mistake that I see over and over and over again – it’s spacing. Proper spacing can be controlled by CSS through the use of line-height, letter-spacing (tracking), and word-spacing. By default, HTML text will have a rather tight line-height. So the first thing I do when styling my body text is to add the following code:

line-height: 150%;

I find that this makes everything much more readable, and helps the content fill in my site. Letter-spacing and word-spacing are also very useful CSS declarations – they both refer to how much space is between a letter or word (I measure it in pixels). I use them more often for titles and headings than body text.

Spacing also means proper use of ‘white-space.’ Text should not be crammed into a small box with no padding. Give your text some room to breathe and your site will automatically look one-hunderd times more professional.

Contrast and Color

Another aspect of typography that is often overlooked: color. The color of  text is equally as important as spacing and font-choice. Color choice gives you control over how prominent your text looks. Something that is black on white will stand out much more than gray on white. The general rule of thumb is that high-contrast text attracts users eyes, making it seem more important. Use this knowledge responsibly or you might end up with a horrible eyesore of a website. Making all your headlines neon pink on black will scare people off.