The Best Typography Practices

Typography, the art of setting and arranging types and printing, has been in existence for more than three centuries. With the advance in technology, writers and designers can now easily make a perfect typography within a few minutes, an activity which took long hours even days back in the early 19th century.

This article is meant to give you a clear guide on how to typeset your fonts when preparing descriptions, articles and blog posts for your website.

Most content online is relatively good, but can you make your website more appealing by just the outlook? Is it possible to draw the users’ interest just by the text display available on your website?

The questions raised above can only be answered if you carefully deliberate on which font type, size and background to use for your website. If you compromise on the basics then your website will not be as effective as you would want it to be.

So let’s go back to the basics:

Typeface have been critically mentions over and over since the advent of computer devices. Typeface can influence the reader’s appeal to your website.

HeadingsBest Typography practices

These are the titles of your web page and give readers a hint of what you are about to discuss. Generally, headings are larger in size making them noticeable upon loading the webpage. Many online users don’t scroll through the whole website but research has shown that clear and noticeable headings motivates readers to stay on the page much longer.

The heading typeface should be appealing, and based on research conducted by smashing magazine in 2013, the most preferred font is sans-serif and serif fonts with a popularity rating of 51% and 47% respectively. The winners for serif fonts were Georgia and Chaparral pro fonts, while Arial took the most votes for san serif fonts.


Best Typography practices 2The body forms a critical part of the webpage, it gives detailed information about the product, the press release or guide. The body typeface should also be appealing and captivating to most readers. Based on the research mentioned, Serif fonts was a clear winner with a popularity rating of 61%.


Purely based on the administrator’s preferences, backgrounds vary in terms of how much light to dark contrast used. Most websites surveyed indicated that many website administrators preferred varying light background tones with less contrast of an off-white and some preferred a beige background with dark grey text.

The background matters a great deal as it impacts on how the fonts will appear on the website. It is important to carefully choose the appropriate contrast to make your webpage more appealing.

Font size is another matter that website administrators must keenly analyse and find out whether their website is lacking in it.


The survey mentioned, found out that most websites used 20-32 pixels for their headings. The font size is visible and large enough to be easily read without straining. Your headings should ideally be visible and larger that the body font size. If you use the same font size for both your headings and body, the readers will be confused and most likely close the page.

Any font size that is larger than the body font size can be used, all you need to ensure is that it is clear and legible.


Most websites used 12-14 pixels for the body font size. 16 pixels is also featuring in many websites as well. The body font size ideally must be visible, and well-spaced out to make it more appealing to the users. Having a larger font size for body than the headline can create confusion on the part of the reader and make the website appear untidy.

Ratio of headline to body font size

The secret to a well-organized typography structure is to ensure that the headline to body font ratio is 1.6 – 2.5. This ratio gives a naturalistic appeal and balance when readers are browsing your webpage.

Ratios that are lower or higher, make the webpage appear out of proportional and disorganized.

Always ensure that your website headline and body font ratio sticks to the golden rule of 1.6-2.5.


Leave Comment