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:

• Typeface – Typeface is not the same thing as font. It refers to a group of characters, letters and numbers that share the same design. For example Garamond, Times, and Arial are typefaces, not fonts – a very common misconception.
• Fonts – A specific style of typeface with a set width, size, and weight. For example, Georgia is a typeface; 9pt Georgia Bold is a font. People in the type design community consider a font to be the delivery mechanism and a typeface to be the creative work.
• Line Length – This refers to the distance occupied by text that is present between the right and left margins in one line.
• Leading – It is the space between baselines (the lines upon which letters “sit”) and is expressed in points.
• Kerning – This term refers to the white space between individual characters or letters. Many fonts come with a default kerning value that is best suited to make the space between letters look more natural.
• Tracking – Also known as letter spacing, it is used to adjust the space uniformly over a range of characters. Tracking can affect the character density of the passage.

All these elements together form a website's typography.

Macro typography vs Micro 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.

5 Typography Tips for your Website

1. Keep slim columns for text

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?

• Too wide – if a line of text is too long, the reader’s eyes will have a hard time focusing on the text. This is because the line length makes it difficult to gauge where the line starts and ends. Furthermore it can be difficult to continue onto the correct line in large blocks of text.
• Too narrow – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress readers, making them begin on the next line before finishing the current one.

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.

2. Use clear and concise spacing between headings and paragraphs

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

3. Small fonts need more spacing

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.

Heading/paragraph spacing examples

‍

4. Consider reading patterns and layouts

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:

• Gutenberg diagram - describes a general pattern the eyes move through when looking at evenly distributed information. This pattern tends to apply to text-heavy content, such as books or newspapers. The Gutenberg diagram divides the layout into 4 quadrants:
• Weak fallow area located in the bottom/left
• Strong fallow area located in the top/right
• Weak fallow area located in the bottom/left
• Terminal area located in the bottom/right

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.

• Z-Pattern - this layout followz the shape of the letter Z. Readers will start in the top/left, move horizontally to the top/right and then diagonally to the bottom/right before finishing with another horizontal movement to the bottom/right. The main difference with the Gutenberg diagram is that the z-pattern suggests viewers will pass through the two fallow areas. Otherwise they still start and end in the same places and still pass through the middle.

• The z-pattern is good for simple designs with a few key elements that need to be seen. Any storytelling aspect of the design would follow the path of the Z.

• F-Pattern - As with the other patterns the eye starts in the top/left, moves horizontally to the top/right and then comes back to the left edge before making another horizontal sweep to the right. This second sweep won’t extend as far as the first sweep.
• Additional sweeps move less and less to the right and for the most part after the second major sweep the eye sticks close to the left edge as it moves downs. Therefore, this pattern suggests:
• Important information should be placed across the top of the design where it will generally be read.
• Lesser information should be placed along the left edge of the design often in bullet points where little horizontal eye movement is required to take everything in.
• People don’t read online. They scan.

5. Use real text for testing rather than Lorem Ipsum

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.

Factors to consider

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:

• Objective - what are you trying to achieve and what are you exactly designing for?
• Content - what is exactly the content that you will you be creating or sharing?
• Context - in what context will you be sharing this information? (devices, single users or groups of people, etc.)
• Audience - who exactly are you aiming your content too?
• Technical limitations - will you be working with tables or graphs and is your font accommodated to do so?

Typeface attributes to avoid

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:

• If there are any characters, punctuation or symbols missing within the family font.
• Inconsistent letter spacing and width.
• 'Light' body fonts can cause friction with the user's reading experience if these do not reflect enough contrast.

Make sure to check out our Typography page for free and paid font resources.

‍