What is Web Typography?

Wikipedia defines Web typography as anything that “refers to the use of fonts on the Web.” The article explains that web browsers controlled the look of fonts and styles until 1995, when Netscape introduced the <font> tag in HTML 2. Now most browsers automatically download fonts and designers have greater freedom to design with type on the web.

Every designer has his or her own method for integrating text in to websites. Some designers do it with their end users in mind and make their text easy to read. Other designers opt to use small text or unreadable fonts because of other design constraints. Personally I would rather not include text than have it unreadable. Learning the following web typography tips and integrating them into your sites you will be able to layout your copy like an expert. All of the tips are very easy to use and easier to implement. The hardest part is remembering to use them.

We will cover:

• Letter spacing
• Line heights
• Right and left quotation marks
• When to use a serif font vs. a sans serif font

Letter spacing

If letters do not have enough space between you cannot read them easily. This makes your reader’s job much more difficult. I find that letter spacing should be one pixel and possibly two pixels for larger fonts. You can see two examples of bad letter spacing below:

The first one does not have enough space between its letters and the second one shows letters that are spaced out too far. Reading either of these sentences is not easy on the eyes. It requires more thought and occasionally squinting. Take a look at what a properly spaced line looks like below:

There are lots of tutorials out there on how to change character spacing in CSS; here’s a good one from Hypergurl.

Line Heights

Just like letter spacing line heights are also very important in web typography. Line heights refer to the space in between lines in your text. I find that line height should always be set two to four pixels larger than the font size itself. This gives your readers eyes enough room to distinguish one line from the next. If someone has bad eyesight smaller line heights could be devastating. You will see two examples below of bad line heights.

The top example shows a line height that is too small. The bottom example has line heights that are too big. Both examples are bad for readability. This is how it should look:

The tutorial from Hypergurl, above, also discusses line spacing.

Right and left quotation marks

Are you still using out-dated quotation marks? Are your left and right quotation marks the same? Quotation marks were only consolidated for typing devices due to lack of keyboard space. For aesthetic purposes you should use right and left quotation marks. Wikipedia refers to them as “smart quotes” and straight multi-use quotation marks are considered “dumb quotes” in the quote below:

Curved and straight quotes are also sometimes referred to as smart quotes (“”) and dumb quotes (“”) respectively; these names are in reference to the name of a function found in several word processors that automatically converts straight quotes typed by the user into curved quotes. This function, known as “educating quotes”, was developed for systems which lack separate open- and close-quote keyboard keys.

Let us take a look at straight and curved quotation marks:

When we use curved quotes, it not only looks better it also manages to draw the readers attention into the quote. Curved quotes are preferred in print work as well. The HTML code for left quote is &ldquo;, and the right quote is &rdquo;

When to use a serif font vs. a sans serif font

You may not know the difference between sans serif and a serif font. Serif fonts have accents (which often look like dots) added to the strokes of the characters. Sans serif is the opposite and each of their characters are clean.

You can see examples of the two font types below:

A Serif font is often used for a headline or title, as those fonts guide the eyes as you read the sentence. Text in a Serif font also often looks fancier and more attractive. Sans serif fonts are easier to read and therefore most often used for text in the body of an article on the web.

Conclusion

If you read this entire article chances are that you are looking for a way to improve your typography on the web. If you apply each of the four tips we have shown you to your text you will be better off for it. Your readers will be able to read your text easier in a short amount of time. They will thank you for it by returning to read your content again and again.

If you have additional web typography tips we would love to hear about them in the comments.