Typography in Web Design: Part 5 How to make your text readable and accessible
Last but not least, here’s the fifth and final instalment of our Typography in Web Design blog series. To date we have covered: types of typeface, how to choose a typeface for your business, styling typefaces and creating a visual hierarchy within your text. Today we discuss readability.
What is readability?
Readability (noun) the quality of being easy or enjoyable to read.
It is essential that your website is readable. If it isn’t, it means it is difficult or not enjoyable to read. The reality is that visitors to your website don’t have to put up with that. They can bounce and go elsewhere! It needs to be readable to be competitive.
It is also important that your website is readable for all audiences. In our blog, An Introduction to Web Accessibility, we shared some stats. In the 2021/22 financial year, 24% of the total UK population were reported to have a disability diagnosis. In addition, an article submitted to the British Medical Bulletin in 2020, estimated that 15-20% of the population are neurodiverse.
Creating a readable website for neurodiverse and disabled audiences, requires a bit more thought and consideration. But it is more than worth it! Designing with empathy is the right thing to do. Why should a quarter of the population be denied the same access and opportunity? It is also a legal requirement and a savvy business move!
How to make your website more readable?
The Web Content Accessibility Guidelines (WCAG) are a “universally accepted set of technical standards.” Composed of rules, principles and advice, they set out what is required to make a website more accessible. Some of the guidelines specifically exist to improve readability.
In today’s blog, we have collated a list of things you can do to instantly make your website more readable. Some of these actions will make your website WCAG compliant and we will indicate when that is the case. So let’s crack on!
High Colour Contrast
What is colour contrast? Colour contrast is how one colour stands out from another. So when it comes to typography it is how the colour of the text stands out from the colour of the background.
Why is colour contrast so important in web design typography? It is particularly important for visitors to your website who have reduced vision or colour deficiencies. A higher colour contrast allows them to see and read the text more easily. But to be honest, a low contrast colour palette doesn’t work for anyone, disability or not. Just look at the example below. Reading pale pink text on a lilac background is difficult, tiring and a headache for all!
When it comes to colour contrast, the WCAG specify the following:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1
The mention of ratios makes it sound way more complicated than it is. On a very basic level, if your website has a light coloured background such as white or off white, use a dark colour for your text such as black or off black. The same principle applies vice versa; if you have a dark background use a light colour such as white for the text.
If you are not sure if your chosen colour palette complies with the WCAG rules, you can always use a contrast checker. Simply enter in the hex codes for your foreground and background colour choices and a contrast ratio will automatically be generated for you. Just make sure they have a colour contrast greater than 4.5:1 or 3:1, as applicable.
Colour contrast becomes a little harder to navigate when you start to place text over images, especially if the image is busy. Some parts of the text may be readable, whereas other bits blend into the background. You can see this happening in the image below. Parts of the white text begin to merge with the seafoam, making it hard to read.
However, there are a few things you can do to make the image a more suitable background. For example, you can add a colour overlay. Adjusting the transparency of the overlay, you want to find a happy medium where the image is clear enough to be seen, but not too clear that the text is still difficult to read. In the picture below, an overlay has been added to the image above. As a result, the text is far more readable and stands out from the background.
There are several techniques you can use to make text more readable when placing it over or incorporating it into an image.This blog by Designmodo has a lot of helpful suggestions.
Responsive Text
Nowadays, 60.61% of global browsing activity is done via mobile, versus 37.23% on desktop and 2.16% on tablet. Designing a website that works well on all of these devices is tricky. Desktop monitors are large and used in landscape; mobile devices – although you can rotate the screen – tend to be used in portrait mode and can fit in the palm of your hand.
Responsive design is when a web page’s content can adjust its sizing and layout to suit the size and orientation of the screen it is being loaded onto. That way, whether you are using a mobile device or desktop, you get the optimal user experience. Responsive design doesn’t just improve the experience for users browsing with smaller screens, it is also beneficial to those with impaired vision.
People with low vision need to zoom into content to be able to see it properly. If a website's design isn’t responsive, it stays locked into its layout. If a user zooms in, the fixed block of text can become so big that it no longer fits onto the screen. The reader is then forced to scroll horizontally to finish reading a line and then back again to find the start of the next. That is a faff and makes for a very frustrating user experience!
With responsive design, as the screen size changes, the text reflows. It can adapt its font size, line height and wrapping, to fit optimally within the screen’s dimensions. For example, if a website has two columns of text and a user zooms in, it will reorganise itself into one column to prevent any horizontal scrolling. If the same website was loaded onto a mobile device, the text would reorganise itself into a single column to prevent horizontal scrolling.
The WCAG stipulate that:
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
Vertical scrolling content at a width equivalent to 320 CSS pixels.
So to summarise, when designing a website it is imperative that users have the ability to zoom in. When they do, you must ensure that they can still access all the content – which should be fully functional – without the need to scroll horizontally.
It is worth mentioning that not all content can be navigated in a one dimensional way i.e. purely through vertical scrolling. The WCAG does allow exceptions for content where the “usage or meaning” would be altered as a result. Take maps for example. Scale a map uniformly, it may be too small to see or too blurry at larger sizes. Scale it up or down in a non uniform way, it loses its accuracy. Crop it, you lose part of the map. It no longer serves its intended purpose.
Other exceptions to the one dimensional rule are “videos, games, presentations, data tables (not individual cells), and interfaces where it is necessary to keep toolbars in view while manipulating content.”
In the instances where two dimensional scrolling is permitted, web designers need to ensure that:
Horizontal scrolling content at a height equivalent to 256 CSS pixels.
Some of these elements may contain text, however on the whole, most of a website's text can be responsive.
If you would like more practical information on how to write code for responsive web text, check out our instructional blogs here:
Add more blogs as you write them here?
Left Alignment
Within the context of reading, visual tracking is the ability to move the eyes smoothly along one line of text onto another. Most of the world’s languages are read from left to right. Therefore, on the whole, left aligned text helps to facilitate visual tracking.
The fixed or consistent starting point for every line – in horizontal terms – creates autonomy for the reader. When they finish reading a line, their eyes are not darting all over the place trying to locate the start of the next one. They can instinctively return to the same place, but just a little bit further down the page.
Left aligned text improves readability for us all, but it particularly has a significant impact on the user experience (UX) of those with dyslexia, ADHD or any other reading difficulties. It minimises the chances of reading lines in the wrong sequence, repeating them or omitting them entirely, improving their overall comprehension of the text.
The Nielsen Norman Group are globally renowned UX experts, who have conducted numerous studies into how users interact with the web. Their research into reading behaviours, indicated that “79% of test users always scanned any new page they came across; only 16% read word-by-word.” Okay, so most of us scan and do not read every word.
Another study on eyetracking, “recorded how 232 users looked at thousands of web pages.” They found there to be a consistent reading pattern that resembled an F shape, pictured below.
Therefore, if every time we scroll further down a web page, we resort to purely scanning the left-hand column, it makes sense then to use left-aligned text. That way, readers can capture subheadings and the start of each paragraph with ease, quickly assessing whether it is relevant to them or not. Their job is made a whole lot easier, which means you can retain their attention and keep them there for longer.
With a fluctuating start point for every line, centralised text is not ideal when reading longer blocks of text. However, used sparingly on shorter snippets of text, it can be a really powerful device within web design.
Centred text instantly draws attention to the middle of the screen. It is ideal for headings and titles; visitors instantly know what is in store. It also allows visitors to take in and appreciate the whole design, which is exactly the kind of impact you want to create on a landing page. Centred text can also be used to make a bold statement. It can distinguish pull quotes from the rest of the body text, to make a point land.
At a glance, justified text looks very pleasing to the eye, as it forms straight lines on either side. However, it can be very problematic to read, especially for visitors with dyslexia or visual impairments.
The reason being is that in order to make the lines the same length, you get irregular spacing in between the words, referred to as “rivers of white”. These rivers of white may be passable at a smaller scale such as print, but on websites it can look amplified due to varying screen sizes and resolutions. It can be distracting, disrupt the flow of reading and reduce comprehension.
A designer may look at a block of left-aligned text and feel dissatisfied by the jagged ends on the right. They are called rags. However, it is possible to “clean up” the rags to get an almost straight line. You can achieve this by manually adjusting the text. All you have to do is strategically hit the return button to make each line as similar in length as possible.
The WCAG stipulate that:
Text is not justified (aligned to both the left and the right margins).
Break Down Walls of Text
We have already discussed how most of us engage with the internet. We prefer to scan pages rather than inhale every word. Another Nielsen Norman Group study entitled “How Little Do Users Read?” found 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.”
With that in mind, if presented with a web page that was just an endless block of text, most of us would be put off. In a world where we have become accustomed to instant results, many of us want the quick and easy answer. Walls of text – long, unbroken blocks of writing – are not conducive to scanning. They are visually overwhelming and time-consuming – time we don’t have! Most of us wouldn’t even attempt to read them. We’d go elsewhere.
Walls of text are particularly problematic when it comes to accessibility. We spoke about the difficulties that some users face with visual tracking. Visual tracking is the ability to move the eyes smoothly along one line of text onto another. For users who struggle with this, the more lines of text there are, the more stressful their experience will be.
Walls of text also pose problems for those who struggle with visual attention. Visual attention is the ability to selectively focus on specific visual information while filtering out irrelevant or distracting stimuli. Readers with ADHD find it difficult to sustain attention and readers with dyslexia find it challenging to decode text and maintain focus on written words. Long blocks of text demand long periods of concentration, therefore are not great in terms of accessibility.
Breaking down walls of text is beneficial to all readers. Here are a few ways you can do it:
Let Text Breathe
One way to make text look less daunting is to give it space to breathe. The spacing of text is measured in 2 dimensions: tracking and leading.
Tracking is the overall horizontal spacing of letters. As you can see in the image below, there is a fine balance in getting tracking in typography right. Too close and the words look cramped and begin to merge into one another. Spaced too widely and you start to focus on individual letters as opposed to the word as a whole.
The WCAG have set out the following rules to achieve optimal tracking:
Letter spacing (tracking) to at least 0.12 times the font size.
Word spacing to at least 0.16 times the font size.
Width is no more than 80 characters or glyphs (40 if CJK).*
* Every line of text should ideally not contain more than 80 characters. For languages using Chinese, Japanese and Korean (CJK), this total is reduced to 40 characters.
Leading or line height is the amount of space inbetween lines of text. Again, there is a happy medium when it comes to leading. Too close and the lines of text look like clothes squished into a vacuum pack. Too deep and each line looks disconnected, no longer presenting as one unit.
The WCAG have set out the following rules to achieve optimal leading:
Line height (line spacing) to at least 1.5 times the font size
Spacing following paragraphs to at least 2 times the font size
Chunk Your Copy
If you were to eat a pizza, quiche or pie in one mouthful, your body is going to have a hard time trying to digest it all. The same principle applies for reading. Trying to take in large reams of text in one go, makes it a lot trickier to process.
Cut your text down into smaller digestible chunks. This way, readers can savour every point. Here are some helpful tips and tricks to help you break down your copy:
Limit paragraphs to 1 idea.
Stick to 3 to 4 sentences per paragraph.
The latter isn’t a hard and fast rule, just a guideline.
Make Bullet Lists
A great way to break up walls of text is to use bullet point lists. The little round circle or bullet form, in and of itself, stands out from the sea of text, draws attention and creates visual interest. Bullet point lists are a handy device when communicating features, benefits, instructions or tips!
Bullet point lists improve readability because they:
Are aesthetically appealing
Bring attention to important information
Facilitate scanning and skim reading
Are concise thus more memorable
Break down complex ideas
Here is a really helpful article by the Nielsen Norman Group on all the dos and don’ts when creating bullet point lists: 7 Tips for Presenting Bulleted Lists.
Add Visuals
Another way to break up text is with visuals. Visuals could be static images, animations or video. They help to convey the points you are making within your copy in an emotive and engaging way and permit users to have (visual) breaks when reading.
Ideally, you want to place your visuals near the text they support. Firstly, for the obvious reason that it makes sense. However, there is another benefit. In the same way that headings and subheadings allow readers to skim a page’s content to find the relevant information they need, visuals can also act as content markers. In fact, they probably stand out more than headings.
In some instances, visuals can be a substitute for text altogether. However, we want to caveat this. If you are introducing any visuals that are not purely decorative, but communicate critical information to the user experience (UX), remember to put the relevant features in place to make it accessible.
If you use static images, add alt text. For video, add captions and transcripts and try to limit auto-play. Ensure that every visitor to your website can fully comprehend the entirety of its contents. You can learn more about web accessibility here.
Don’t Be Afraid of White Space
Whitespace – also known as negative space – is the empty space in and around elements on a web page. Just as some people feel compelled to start talking when a room grows quiet, many also feel the urge to fill empty white space. They think it is too valuable; that every inch of a web page’s real estate should be used to get a message across.
Jan Tschichold – a German calligrapher, typographer and book designer – is quoted saying “whitespace is to be regarded as an active element, not a passive background.” It is true. Whitespace plays a powerful role.
Think of a noisy restaurant. It is hard to focus on a conversation when there are lots of people chatting, music is blaring and cutlery is clanging. The same principle applies with a visually cluttered web page. If there are too many elements, it can make it hard for the reader to focus.
By incorporating white space into your design, you set your visitors up for an easier reading experience. It reduces clutter and prevents visual overload, allowing readers to focus on key pieces of content.
Consistency
In part 4 of our blog series, we discussed the critical role that visual hierarchy plays within web design. Unless your website is a single-page parallax design, visual hierarchy in typography relies solely on the consistent use of typefaces, sizes and colours. This consistency helps users understand the importance of each element. When these elements are repeated across pages, users can predict and prioritise content more effectively as they navigate the website.
If a design isn’t consistent, it creates more work for the user. If a certain typeface, size or colour was used for a heading on one page, but then used for a caption on another, that creates confusion. The reader can’t trust that certain styling treatments mean certain things. For every page they visit from therein, they will have to decipher the styling of the text before they can focus on its message.
Consistent application of text styling removes the guesswork. If the same font is used for every subheading on every page, the user can trust that it is a subheading. They can then scan those subheadings with peace of mind that they are not missing out on more important information. As a result, navigating web copy becomes way more intuitive, encourages longer engagement, which leads to happy readers!
At a macro level, consistent typography is making sure that all headings within a heading level are formatted in the same way across the entire website. That means all headings (H1) use the same typeface, are the same size and are assigned the same colour. Same goes for H2, H3, H4 etc.
Consistent typography is also achieved in miniature detail. Although less noticeable, consistent tracking (letter spacing) and leading (line spacing) creates visual harmony and enhances readability.
If you are a larger business, you may be wondering how on earth you can enforce that level of consistency across your website, with so many contributors. The best way to achieve consistency in design is by creating a brand style guide. In a brand style guide, you can specify what fonts should be used where, on your website.
Conclusion
To sum up, there are multiple ways in which you can make your website more readable. Improve the reading experience with text that is responsive, left aligned and has a high colour contrast. Break down ominous walls of text by chunking the text, inserting bullet point lists, adding visuals, leaving white space and allowing your text to breathe with spacious formatting. Ensure the text is styled consistently throughout your website, to make its navigation as intuitive as possible.
And thus endeth the lesson on Typography in Web Design. We hope this blog series serves as a useful and informative starting point into the world of online typography. Reams and reams of literature have been written on this subject. There is so much more out there to stick your teeth into!
If your website's typography is hard to read or doesn't reflect your brand, the team at Made by Dave would love to hear from you. Drop us a message here and let's create text that is easy to read and leaves a strong impression!