Five Tips For Better Web Typography

Oasis Workflow PluginTake a look at a blog or magazine site that you consider well designed. It’s almost certainly an elegant fusion of well-placed images and other graphical elements, intelligently chosen colors, and empty space. But when most non-designers are asked to articulate why they think a page is well-designed, there is one area that gets little attention. And it’s the one area that makes the most difference: typography.

It’s impossible to look at a web page with poor typography and think that it is beautiful, graceful, or elegant. Bad typography is ugly, but — more importantly — it also makes it hard for readers to read.

Creating really great typography is difficult on the web. A lot of work goes into making the words on the pages of a book look perfect. Web browsers and CSS don’t have a fraction of the typographical capabilities of modern publishing software. But it is possible for a webpage’s typography to offer a good enough reading experience, and it’s not all that hard to do.

Line Length

Often, web design has followed a process in which elements are laid out on the page and the text fits into the gaps. Most good designers these days would argue that a page’s design should start with the text and move on from there. There are some fairly fixed rules about what you can do with body text and have it look good, so it’s best to decide on how you want text to look and design around that. One of the most important aspects is measure, also known as line length, which is just what it sounds like: the distance from the first letter of a line on the screen to the last, often measured in characters.

Too long and too short will be difficult to read. You have a fair bit of latitude here, but most typographers would suggest that somewhere between 45 and 90 characters is optimal. If you’re using responsive design on your site, you should pay particular attention to how your text flows on different screen sizes and use media queries to adjust font sizes, margins, and other element to ensure that you keep within those limits.

Font Height

We’ve got a lot better about this over the years, but I still frequently come across sites where the body text is way too small. The standard is often 16px, but there’s no reason you should feel you can’t go bigger. In most cases you should go bigger. It’s impossible to say how big, because that depends on the screen and the typeface, but take a look at a site like Medium to get an idea of how larger body font sizes look.

In CSS, this is controlled by the font-size property.

Line spacing

It’s not only the size of the type that matter, but the distance between the lines. Too large and too small a gap makes it difficult for readers to move from line to line easily.

Line height in CSS should be indicated as a multiple of the point size of the font — not an absolute unit — and set with the CSS line-height property.

Again, the right line-height is difficult to specify without context, but above 1.4 and less than 1.7 is usually reasonable. Experiment and judge for yourself.

Font choice

Of course, the choice of fonts has a huge impact on what your page looks like, but the range is so big it’s not possible to give definitive advice here. But I am going to suggest that no matter what you choose, it’s important that you do choose. Sticking with defaults and system fonts is not making a choice; it’s a lack of choice.

Font choice can have as much impact on your site’s design as color choice, and the character of the fonts should reflect your design goals and its sensibility.

So long as you stick to a couple of typefaces, and limit yourself to a simple serif or sans serif for body and heading text, you’ll probably end up with something better than the default system fonts. Try to avoid fonts like Comic Sans and friends. They don’t look good on the page and typography geeks will laugh at you.

Optimizelegibility

Many modern typefaces include OpenType features that improve appearance. Unfortunately, browser support for those features is lacking and different browsers have different levels of support. Two of the the most important are kerning, which tweaks the distance between character pairs, and ligatures, which uses special glyphs for some pairs. Both can make a block of text look better. The good news is that there is a single, relatively well-supported CSS property to use both of them.

text-rendering: optimizeLegibility

OptimizeLegibility is not without its problems and it can cause performance issues, particularly on mobile devices, but it’s well worth trying.

If you implement these five web typography techniques, your site is going to look better than the vast majority of sites that aren’t paying attention to their typography. It won’t be perfect, but it’ll be good enough for most purposes.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED