With so many different screen sizes for mobile devices, site owners have to ensure that text of pages is legible on both the largest and smallest screens. If you’re coming across the ‘text too small read’ or ‘use legible font size’ errors, keep reading.
Note! Before you read the article below, please check out our guide on How Website Load Speed Affects SEO. If you follow the steps in that guide, you’ll dramatically improve how fast your website loads and with that, you’ll see a rise in organic traffic. This is so important for mobile.
Contents
What is Legible Text?
Your website should not only look great, it should also be easy to read, both in terms of content and the way the text appears on the page. Legible text is exactly that – text that can be seen and read easily by the user. The font you chose for your website, the size of the text and the way the copy is laid out, all add to the overall functionality of your site. Legible text measures how easy it is to distinguish one letter from another in any given typeface, as well as the design of a typeface itself. A good legible typeface will usually have larger inner spaces and be somewhat taller in height to ensure the words can be read easily.
There are three main ways of making font size work for any device:
- Buy a mobile theme or template
- Use reponsive design/media queries
- Design different versions of your site
Let’s take a look at these each in turn.
1. Buy a mobile theme or template
By buying a responsive design theme, the issue of font size is already resolved for you. What’s more, Google recommends responsive design anyway. You can buy responsive themes and templates at sites like Theme Forest.
2. Use responsive design/media queries
If you have experience with CSS, you can have a lot more control over how well readable your text is on any screen size.
The size of your font is stated in your CSS file, so if no size is given then the browser will simply use a default font size, typically 16px. Unsurprisingly, ‘font-size’ in your CSS is what controls text size. In your CSS it looks like this: p{font-size:120%;}
Though this example uses percentage, font size can also be determined by pixels, points and EMs.
Google recommends the following when it comes to font and responsive design:
“Use a base font size of 16 CSS pixels. Adjust the size as needed based on properties of the font being used”
This means using CSS to give a page wide instruction that font size should be 16px and is can be done using body or html.
“Use sizes relative to the base size to define the typographic scale”
Now that you have a font size for the whole page, you’ll need to adjust that font size so that your H1s and H2s are appropriately sized in relation to the base font size of 16 pixels. An easy way of doing this is with percentages, like so:
body {font-size:16px}
p {font-size:120%}
h1 {font-size:250%}
Here, the H1 font size is defined as 250%, meaning text will be displayed two and a half times bigger than the base size of 16px. Whenever a font size is defined, it is declared as bigger, smaller or the same size as base font size, meaning it’s always relative. Doing this also means that whatever size screen your page is viewed on, font size relationships will always remain the same. A H1 will always be two and a half times the size of the base font, be it on a TV screen or a mobile. This is an important aspect of ensuring that font is legible for viewers on mobile devices with smaller screens.
“Text needs vertical space between its characters and may need to be adjusted for each font. The general recommendation is to use the browser default line-height of 1.2em”
Another important part of readable font is the amount of space between lines of text. This is referred to as ‘line-height’ in CSS. Google suggests you use a minimum of the browser default line-height of 1.2, meaning that the space between lines of text is at least 1.2 times the size of the text itself. To do this, you need to state line-height in CSS like this: p{font-size:120%;line-height:1.2;}
You might view your page on desktop and find that tight text and smaller line heights works fine. The problem arises when you view the same text on a smaller screen and it’s almost impossible to read without zooming. Ensuring line height is at least 1.2 will mean that text is easier to read even on smaller screens.
List link problems – On mobile devices, links need more room and this can be a problem when links are in lists. To solve this, use: ul{line-height:200%;}
This will ensure there is enough space around the links by increasing the line height of the list. You’ll need to alter it for your own needs by changing “200%” to another value that fits your site design.
“Restrict the number of fonts used and the typographic scale: too many fonts and font sizes lead to messy and overly complex page layouts”
Multiple fonts and font sizes can make pages appear messy, and whilst complex page layouts may just about be legible on a desktop, they definitely won’t be on a smaller screen. You should therefore limit the number of fonts used on your page and remember that small text will appear even smaller on a mobile device.
2. Media queries
The size of text is defined by media queries stated for different sized screens. Media queries let you set one size of text for mobile users, and another for desktops. Here’s a simple example of a media query which controls the size of font:
html{font-size:100%;}
@media(min-width:60em){html{font-size: 100%}}
In this example the same font size has been used for both large and small screens. The font size is 100% and as the base size of 16 pixels was defined earlier, this means font size will be 16 pixels on both desktops and mobile devices. Though the size font may vary on different devices, it will always be clear and legible.
When followed alongside the listed recommendations, this text is readable. However, an issue can come up if desktop text is styled to be rather small. In this situation the same text will appear even smaller on mobile screens. You’d therefore need to change the media query. Whilst the media query above set the same value of 100% for desktops and mobiles alike, in this case you need to use a media query that has smaller, tight text on a desktop whilst still having legible text on a smaller screen. To do this, you would use:
html{font-size:110%;}
@media(min-width:60em){html{font-size: 90%}}
This media query states that text should be 90% (of the default 16px) on desktop, but on mobile it should be 110%, making text easy to read across different sized screens.
3. Design different versions of your site
If your site isn’t responsive, you’re probably using a mobile URL or dynamic serving for your mobile visitors. In this case you’re simply creating different versions of your web pages and can design the mobile page however you want by using normal CSS. It’s best practise to make sure that text is big enough (16px) and that line heights are big enough to ensure text is easily legible.