Squiders Web Design Logo 01622 681406

Design is in the details:
Text & typography

A look into how typefaces and text layout can have a massive impact on the feel of a website.

Kris Jeary

Author:
Published: 9th September 2013

If you have any comments on our articles, send us your thoughts on Twitter.

In my opinion the most overlooked aspect of web design is the text content. It's easy as a designer to leave it until last and attempt to reduce its impact on the graphical elements on the page. Needless to say, this isn't the best approach.

Here are a few of the considerations and techniques I employ.

Typeface Choice

Firstly the typeface you choose should be relevant to the content your are presenting, bearing in mind it is so easy to switch site typefaces in your stylesheet, there is no excuse not to experiment. Along with the truly awful, there are some beautiful (and free to use) fonts on Google webfonts. A few of my favourites are :

You are also spoilt for choice with paid subscription services such as Adobe's Typekit and Hoefler & Co.

The true skill lies in combining fonts to make the best package. Try choosing different fonts for headers and body text.

Font Size

Variable is the answer to this section. Consider the different screen sizes and ways to interact with devices means we need to be responsive on font size too. If you would like an introduction you can always have a read of my Introduction to Responsive Web Design.

Experiment, you'll be amazed how much difference a percent here and there can make.

Font Weight

A big benefit of greater font choice lies with an increase in font weight choice too (Lato alone comes with 7 weights to choose between).

Finding the balance of font weight with your design is the key and also testing how that weight displays on different devices is vital. I recall wanting to use a 300 weight on one project, it looked beautiful using Chrome on a Mac but illegible when viewed on Chrome on a PC. Test, test and then test some more.

After setting my preferred default weight I then spend an equal amount of time testing different weights to use for strong text and headers.

Line Height

Often the most obvious way to spot an ill planned site is by the lack of attention to line height. Give your text room to breath and in turn it will be more legible.

A default line height will generate paragraphs thusly :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

I typically use the following for paragraphs and list items when setting out a site, but it will vary from project to project (as all good design should).

p, li {line-height:170%}

This generates our paragraph like this :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

You can notice the difference the extra makes.

Quick note, yes I prefer to work with percent and not em's

In Summary

There really is an amazing range and combinations with web typography, the aim is to deliver the combination that best conveys the website's message. There are many great design that put typography front and centre of a design, my approach tends to be one of subtlety, if everything on the page is shouting nothing stands out.

With the plethora of choices the designer really has the power to lift their design and make it engaging to the visitor, a word of warning though...

With great power comes great responsibility
Voltaire/Uncle Ben


Most popular articles

Or you can view the complete list