10 Great Tips For Improving Your Web Typography

From the invention of the printing press in the 15th Century, to the creation and development of the Internet into the 21st, typography has evolved to reflect technological advancement to become both a science and an art form.

Once a specialist occupation, the digital age has opened typography to computer users and web designers. When creating pages and laying out text with other content there are several guiding principles that designers should bear in mind. Typography is a huge field of study, but this post brings together a handful of hints to help web designers improve their pages.

1. Font

One of the most fundamental considerations when composing typography is the style of font to be used. The choice of typeface should reflect the tone of the content, and it’s usually best to choose a readable and unfussy font for the main body of text.

There are hundreds of fonts available to download for free from the Internet, so designers may choose something fancy for headings and sub-headings, but generally keep to something simple for the rest of the content such as Helvetica, Arial or Times Roman.

2. Size

The next thing to think about is the size of text to be used throughout a website. It’s important to make the main body of text a suitable size so that it is large enough to be readable, while not becoming too big and ‚”shouty”. Generally, most text should be set between 12 and 16 pixels, with variations in headings and menus.

In the contemporary world of web design it is also important to bear in mind that users may be accessing websites on iPhones and other hand held devices, so text must be legible across a range of screen sizes.

3. Scale and Hierarchy

Having settled on a size for the main body of text, the various parts of the content can be differentiated by adopting a uniform hierarchy of text sizes throughout a site. This means using a certain size for headings, a slightly smaller size for sub-headings and so on, but keeping to the same sizes on all pages to create consistency.

Using a typographic scale to define parts of content achieves this. For example, this scale could be 14 points for main body content, moving up through 16, 18, 21, 24, 36, 48, 60, to 72 points for the largest headers. Designers can create their own patterns of scale, but should stick to it rigidly on all pages.

4. Emphasis

It is sometimes necessary to emphasize a word or phrase in a text to draw the readers’s attention to an important element of the content. Using italics is one of the best ways to do this, but designers may also choose to employ capitals, bold text, underlining, changes in type size or font, or use different colours.

Whichever style is selected, it’s best to keep to a single means of emphasis through all pages to avoid confusion and clutter.

5. Measure

The measure is the length of a line of text, which for a single-column design should ideally be two to three alphabets long, around 40 to 80 characters. If the lines are too short then the text becomes disjointed, if they are too long the content loses rhythm as the reader searches for the start of each line. Many typographers consider the perfect measure to be 65 characters.

6. Leading

Leading is the distance between each line of writing, and is an essential component of a text’s legibility and general aesthetics. The choice of leading depth depends on the font used, type size and style, word spacing and length of measure.

Usually the leading should be between two to five points larger than the text size, but since the previously mentioned factors effect the ideal leading, a degree of experimentation may be necessary to achieve the desired appearance and readability.

7. Alignment & Grid

A well-planned grid can form a solid foundation on which to design a website, with content laid out neatly and logically for accessibility and visual balance. Pages should be divided into a system of columns, rows, menus, headers, sidebars and footers, guiding the user’s eye smoothly to the important content and navigational tools.

8. Colour and Contrast

A splash of colour can make a website design enormously attractive, but for large chunks of text it’s best to keep to the traditional combination of dark type on a light page.

Experimenting with dark backgrounds and light text can produce stylish results for headers or short phrases, and coloured text can be used to emphasize words or sentences. Long tracts, however, can be tiring and difficult to read with anything other than black on white or a similar combination. It is also important to bear in mind how well the design elements contrast with each other; lightly coloured text may look appealing but is difficult to read at length.

9. White Space

The white space is the negative space between objects in a page design, not always white, but the ‘blank’ parts that allow content to breathe. Minimal designs, with plenty of wide-open spaces are much more attractive and accessible than pages crammed with content, so at times it may become necessary to edit down to the bare essentials.

10. Break the Rules

Finally, it should be noted that rules are there to be broken. Designers should be aware of the general principles of typography, and be bold enough to experiment and contradict the rules to produce innovative and beautiful web pages.

Your Turn To Talk

I hope you learned a thing or two about web typography from this article. Please take a moment to leave a comment below and tell us what to think and of course feel free to share your own tips and tricks!

lead image: sandbaum