Web Typography: 10 Ultimate Steps To Follow To Hit The Bull’s Eye

Setting type is considered a second nature for designers. However, a checklist that can be consulted to ensure that the basics of typesetting have been covered will be useful not only to experienced designers but to new entrants in this field. The following are 10 important points that should be kept in mind when setting type for a web page:

1. Use no more than three typefaces per design or page

Application of a large variety of typefaces creates a sense of disunity among readers. This makes readers conclude that texts with different typefaces are unrelated. Therefore, it is advisable that not more than three typefaces should be used per design.

2. Write headings invitingly and in large fonts

Headings are the first items that are read on a page and are important to demarcate sections in passage. All headings should be written using an appropriate font size and style to attract readers’ attention.

3. Keep the body copy size 14 pixels+

Though a number of factors affect the legibility of text, the size of text is most critical among them. You should always choose a size of body copy that can be easily legible on screen. A good way to size the body copy is 14 pixels.

4. Ensure a good text to background contrast

A poor contrast between the text and the background diminishes the legibility. Therefore, dark text should be placed on light background and light text should be placed on dark background for better legibility.

5. Apply emphasis and stress with discretion

You should not litter your web page with underlines, bold faces and italics. They should be used sparingly only for intentional emphasis. In addition, you should avoid long underlined hyperlinks, especially on serifed or smaller typefaces.

6. Avoid setting continuous text in upper case

A word set in lowercase and uppercase is more legible and recognizable than the same word set completely in uppercase. The uniform baseline and height of words written completely in uppercase diminishes the legibility to a great extent. Even if you are required to set a long string of text in uppercase, you should set them in small capitals with sufficient leading.

7. Give your text required space, and set ample measures and leading

You should always give your text the required space both horizontally and vertically to ensure legibility. Ensure that the lines are neither too short nor too long. In addition to the length of lines, ensure that there is enough space between lines.

8. Avoid using fonts not designed for web use

Out of the large number of available fonts, only a smaller subset has been optimized and designed for use on the web. When using fonts that are not designed for web use, always test them on various operating systems and browsers to check how they are displayed.

9. Subset and cache webfont assets

The use of webfont assets usually increases the page size because the browser downloads the font for text. You can reduce the load size by removing the unwarranted glyphs for characters. In addition, you can suggest users to cache the asset so that all subsequent visits will not result in re-downloading of the font.

10. Avoid using Comic Sans typeface

The appearance of Comic Sans typeface is not attractive. You can use other suitable comic typefaces, such as Comic Jens, instead.

When setting type, the legibility of the text should precede any other objective. In addition, there should be visual hints for highlighting relationships amongst the text. To do so, incorporate an array of qualities in the text allowing readers to either glance through specific piece of information or retain larger sections of text with comfort.


Editor noteContributor  Alyssa Clarke is a blogger who also happens to be a tech buff. She loves spending on tech stuff and recently bought a new Samsung Galaxy S II Smartphone. She is a car lover too and her dream machine is Lamborghini Gallardo.


21 year old designer, blogger and front-end developer. love to share creative design and inspiration.

There are 2 comments
  1. Jay

    #10 was my favorite, sarcastic or not.

    #3 is interesting because you are using 12 point font for the body copy.

    Thanks for the great article.

  2. zaipamn

    Informative and educational post.

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

div#stuning-header .dfd-stuning-header-bg-container {background-image: url(http://www.downgraf.com/wp-content/uploads/2017/04/login-back.jpg);background-size: cover;background-position: center center;background-attachment: scroll;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 500px;}