Skip to content Skip to footer

Font size and content width.

Illustration of Ruler. When it comes to making your content accessible size matters.
Article Content
  • Why you need to use relative units for font size.
  • Why you should and how you can left align text.
  • How to use maximum width.
  • How to alter text line height.

When it comes to making sure that your content is legible and therefore accessible, it’s important to consider the importance of how you treat your text. If you read the previous article on font styles (You can read this article on accessible typography), you will know the importance of choosing the right font for legibility. However, in making sure that your font is easy to read for all users, you also need to pay close attention to font size, text width, alignment, and line height.

Font Size

Make sure you get the right units

First, you will make sure that you get the font size right. You need to ensure you use the correct units when setting the font size. In the past, it was common to use pixels. Pixels are fixed units, effectively the digital equivalent of centimetres, measuring the size in the amount of pixels they take up on the screen. However, the issue with pixels is that they are a fixed size, not adaptable to user preferences and stay the same size no matter what the user sets as the default size on their browser. So, for example, if a visually impaired or dyslexic user wanted text larger and easier to read and set the default to 20 pixels, the website would ignore this user preference if the developer had set their font size at 14 pixels. As you can imagine this is not great for the accessibility of the website.

Fortunately, there is a solution to this. You can use relative units, known as “rem” or “em” units. (There are slight differences between the two, read more on these differences here). These units are known as “ephemeral units”. The size of these units is relative to the default font size of the web browser or the device on which the user is viewing the content. For example, 1em equals one hundred per cent of the default font size. If the user sets the default font size to 16 pixels, then one em would be equal to 16 pixels. 2 em would then be double that so it would equal 32 pixels because it is 200% of the sizing. This means that the font size that is set by the developer in the code is relative to the user’s preferences. This helps make the content more accessible by respecting the user’s choice when they set their default size. This shows greater consideration of the user’s needs, such as the visually impaired user who needs to set their font size to be larger by default to help with legibility.

Getting the font size right

Unfortunately, no magic size will be just right for legibility for every font and website design. The best advice I can give is to test your website with people and ask them how easy to read they find the font at the current size. In general, I found from my own experience that the font size often needs to be a little bit larger than you think it should, and what you deem to be legible isn’t always the case for others particularly if you have large blocks of text on your website.

A word on responsiveness

I haven’t covered how to make font sizes responsive across different screen sizes within this section. This is quite an extensive topic and I didn’t want to go beyond the basics. However, if you want to start researching in this area, a good starting point would be to look at techniques such as clamp (Read this smashing magazine article on clamp here). I have also found the font utopia tool (font utopia tool available here) especially useful in creating font sizes that scale across different devices.

Useful Tip

If want to learn more about Responsive Web Design I recommend reading Ethan Marcotte’s book on responsive web design. (You can buy Ethan’s book here)

Text Alignment

This is probably one of the simplest ways you can improve the legibility of your font and is something of a revelation when you first discover it. For some reason, despite everybody within the Western world reading left to right, it is quite common to find text centre aligned across several websites.

 While centre alignment is fine for headings, it is unnatural for people to read the body of text of a website that has been centre aligned. With the small simple bit of code, “text-align left”, as shown below in the paragraph styling,

Code sample for text align
p then a curly CSS bracket, text align and then colon left, followed by semi colon. End CSS bracket.

You can make your text far easier to read and users more likely to engage with your content. Most importantly, this increases the legibility and also improves the accessibility of your website.

 The great thing about this technique is that if you are producing your content in a language read right to left, such as Arabic, you can easily implement this style by simply having the text-align set as right, as shown in the code below.

test align right code sample
p curly CSS bracket, text align colon right, followed by a semi colon. Ends with closing CSS bracket.

Maximum width

The property maximum width, coded as “max-width“ is another simple, easy-to-implement way of improving legibility. You may find that when your content is viewed on a large screen, it stretches across the screen across the full length, making it very difficult to read.  Thankfully, there is an easy solution to this you simply just need to set a maximum width, and this will stop the content from spreading too widely. You can set the maximum width to whatever you like, it is simply a case of testing what works best for your content and font size across different screen sizes. You can see an example of how to set the maximum width in the code below, with it set in a paragraph. (You can also set a minimum width, but I have found it is much less common for you to need to use this property.)

code sample for maximum width.
p then curly CSS bracket. Max width and then colon 80 percent, then a semi colon. There is then the closing CSS bracket.

Line height

The property line height is another tool within your armoury for improving and controlling how your text is viewed. Line height sets the space between the lines of the text, so the larger the line height, the larger the gap between each line of written content. It is used without needing to use any unit ( rem, em,  pixels) you simply just state the number you want the line height to be. You can see how this is coded in the sample below in the paragraph styling.

Line height code sample.
p curly CSS bracket. This is followed by line height colon 1.3 and then a semi-colon. Then there is the closing CSS bracket.

Summary

This article has listed several ways in which you can improve the legibility of your text. Many of these methods are very easy to implement and can make a massive difference to the accessibility of your content for all users reading it. For more on making your font legible, read the article on legible typography here and the article on colour contrast here.

Leave a Reply

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