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

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

Alignment and 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

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

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

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


  1. says

    Very Nice article. Typography can add so much to a webpage if it is done right. Lately I have been meaning to use @fontface to replace some of my fonts.

  2. says

    While working on the website of the company I work for, we tried our best to also maintain a vertical rhythm. Since you didn’t mention this in the article, I’ll quickly share my thoughts:

    Aligning to a baseline grid makes a lot of sense in some cases. We eventually discovered, though, that it really only matters for multi-column text. Aligning body text with sidebar text proved to be overly “fussy” and aesthetically incorrect– spacing out the lines artificially just to share the same baseline resulted in a bad-looking sidebar. As you said in the last point, gotta break some rules sometimes!

  3. says

    Times Roman is NOT hinted for web use (in fact, neither is Helvetica). So I would suggest using Georgia, which was designed for screen display and is frankly, a lovelier font than Times Roman.

  4. says

    Hey, great post, thx!
    I was wondering if there’s a “perfect” ration between font-size and leading for the standard fonts like Times and Arial?


  5. says

    Hi Tom,

    You’ve shared some great tips.
    When implemented, these advices will surely offer a better readability.

    Glad to discover this site.

  6. says

    I love the last tip:) In my opinion – you learn a lot trying to understand basic rules to become a good designer but if you want to be the pro designer you must forget basics and make your own rules. But the most important thing is that to make your own rules you must know basic rules to break them. It’s very strange but it’s true. What do you think?

  7. Razvan says

    Great article with many helpful advices. I think many people are just ignoring typography aspects when building websites and this is a huge mistake.
    As for fonts, I’m constantly using this website http://www.fontineed.com. Its just a suggestion but i hope it proves useful for those in looking for a good font.


  1. 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….

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *