01795 255 600
Posted 6 years ago by Kris Jeary

Design is in the details: Text & typography

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

About the author

A digital designer first and business development expert second, that's the approach Kris takes with his work. Kris ran his own agency (Squiders) for 10 years before it was acquired by Kayo and he became Head of Design. Born and raised in Kent, his pastimes include cricket, cricket and more cricket.

Share on social media

Solving complex digital problems other agencies can't handle.

Request a callback

Let us contact you

Please leave your name and email address behind and we will be in touch shortly. If you have a time preference please also select from that field.

01795 255 600
Need some help?

Call us on

01795 255 600

Email

Find us

The Innovation Building,
Kent Science Park,
Sittingbourne,
Kent.
ME9 8HL.