A 2006 article by the reputable design agency, iA, stated that 95% of the information displayed online is written language.
So - technically - you could say that web design is comprised of 95% typography. However, a 2008 eye-tracking study by Jakob Nielsen showed that on the average web page, users have time to read at most 28% of the words during an average visit; 20% is more likely. This is because people are inclined to skimming (skim reading) rather than spending large amounts of time and attention in reading.
By putting these two statistics into context with each other and considering these studies are over ten years old, you can come close imagining how much information is never actually read or even glimpsed at online. Of course, there are several properties which can influence the amount of people that read your content - such as SEO, good user experience practices and the quality of the content itself.
Nevertheless, applying these good practices to your website does not guarantee that your content will be easily read by any user. For this reason, making informed and educated decisions on your website's font use is an essential aspect to consider in order to deliver and display attractive written content.
So, let's understand the main concepts first:
All these elements together form a website's typography.
Macro typography refers to the adaptation of the chosen font in the general layout of your website. These include headings, paragraphs, element layout, text container margins and the font contrast.
Micro typography refers to the details within the typeface. All properties that affect the font itself fall into micro typography - these include the font selection, font size, character spacing and character width.
Essentially, these two categories form your website's typeface. As much as web designers and online entrepeneurs love to experiment with aesthetically pleasing fonts that identify with their brand, a common issue is to deprioritise readabilty over aesthetics. The average page visit lasts a little less than a minute, so a poor use of font would certainly encourage users to leave your site.
According to Emil Ruder, the optimal line length for your body text is considered to be 50-60 characters per line, including spaces. However, other sources state that the optimal line length lies at 75 characters per line. But, what are the implications if line length isn't considered?
Ruder also stated that at the start of every new line the reader is focused, but this focus gradually wears off over the duration of the line.
Once you have identified the correct font format for each of the necessary properties: headings (H1, H2, H3, etc.), body text (paragraphs and quotes) and action text (links, buttons and CTA) – it is important to understand and apply the correct spacing between these. A common misconception which is consistently being misused is placing a heading with the same spacing between the previous and following. For the sake of comfort and readability, it is considered good practice to ensure that the spacing between the heading and its following paragraph is smaller than the spacing between the previous paragraph and the heading.
Heading/paragraph spacing examples
No – this does not mean that the bigger the font, the more you should cram your text together. It's a matter of percentage - the line spacing % should increase with smaller font sizes. The reason for this is because small fonts are already more difficult to read, therefore, you want to clear out as much space as possible between lines to help the reader's flow.
Information can be structured in several different layouts within a screen, and therefore, may influence in the ways your content is read or scanned. There are three main layout patterns:
The pattern suggests that the eye will sweep across and down the page in a series of horizontal movements called axes of orientation. Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area and this path is referred to as reading gravity.
Naturally this is for left to right reading languages and would be reversed for right to left reading languages.
Lorem Ipsum is dummy text used by publishers and designers when the original copy is not available. They use it to keep the work flow going and to get clients approval on designs. Although this may seem like a great tool in order to progress along your design stages, this can cause problems when applying typography.
Testing is a critical part of building usable digital products. A testing environment with relevant content encourages more thoughtful feedback, that can then be used to craft a more tailored user experience. Consider 'relevant content' as content similar to the one you will end up using with your finished product.
It's quite common to visualise what you consider to be the perfect font displayed on your website. This may range from inspiration (you've seen it applied elsewhere and really liked the final product) to simply taste, but there are a series of factors that you should always keep in mind when applying typography:
Try to avoid incosistent or incomplete fonts. These are normally found in free font websites, where font quality tends to lack. Here are some red flags to keep in mind when making decisions on typefaces:
Make sure to check out our Typography page for free and paid font resources.