The rise of web fonts has given way to a broader understanding — and respect — for typography, typefaces and the way text is displayed online.
Typography is an essential part of visual design — and as any print publisher will tell you, the way that text is arranged and displayed can have an enormous impact on how its message is presented and interpreted.
Although typography entered the digital age long ago, it’s only been in the last few years that we’ve really seen advanced typography and typesetting take off online. This is, in large part, thanks to broad browser support for CSS3 and web font standards, the rise of web font services like Typekit (which was recently acquired by Adobe) and the increasing adoption of mobile devices like smartphones, tablets and ereaders.
Understanding some of the basics in typography can make crafting web content and using web fonts a better experience for everyone.
Most of us have heard the terms “serif” or “sans serif” but what do they mean?
A serif typeface (or font) has strokes and other semi-structural details on the ends of letters. Fonts like Times New Roman and Baskerville are serif fonts. This is the font that most newspapers and magazines use. Georgia, one of the most popular fonts on the web, is a serif font.
A sans serif typeface doesn’t have the semi-structural details on the ends of the letterforms. Fonts like Helvetica, Arial and Gotham are serif fonts. Sans serif fonts are often more readable on smaller devices, which is why the default font on most mobile platforms is a sans serif font. Apple uses Helvetica Neue, Microsoft uses Segoe and Google recently created its own sans serif font for Android, Roboto.
A monospaced typeface is a typeface that is non-proportional. That means that the amount of horizontal space between letters and characters is uniform. On the web, monospaced fonts are most often used when presenting computer code examples. The use of a monospaced font, especially when interspersed with standard variable-width fonts, is a visual cue that the text is a computer or code-related action. Common monospaced fonts include Menlo, Consolas and Courier.
Script typefaces have fluid stroke designs and are aesthetically similar to handwriting. Script fonts that vary in formality and calligraphy styles, like the font Zapfino, also exist. These are most commonly used on the web for large headings and tend to perform poorly for blocks of text or in small sizes.
Kerning and Leading
Beyond just a typeface, good web typography also utilizes good kerning and leading.
Kerning is the process of adjusting the space between characters in proportional fonts. In other words, it’s how closely letters are to one another. Kerning is optimized by character pairs, whereas a technique known as tracking, adjusts the space evenly between characters.
Leading is the distance between the baselines of lines of type, in other words, the space between each line in a paragraph of text.
Leading can drastically impact how type is read and presented. Too much leading, and type is unwieldy. Too little, and it can be hard to read.