Fonts and web accessibility go hand in hand, other than font and background contrast ratio. Font sizing is as important for users with visual impairments and for user experience. Optimizing font size for accessibility will result in a more engaging content experience for all users.
Generally speaking, an accessible font is one that does not slow down the reader. The reading experience should be seamless, letters should be easily distinguishable from one another and easy on the eyes to avoid eye strain.
It has to be easy to see, read and understand by everyone, disabled or not.
Table of Contents
Minimum Font Size Requirement
While there aren’t any minimum font size requirements according to the Web Content Accessibility Guidelines (WCAG), it is recommended to use a font size of at least 16px. Going too small or too large with website fonts can lead to accessibility issues and negative user experience. WCAG recommends that website users be able to zoom in on text to make it 200% larger without any loss in clarity.
Being able to reflow content on a web page and resize text are both important criteria according to WCAG, for users with low vision.
A web browser default font size is set at 16px, people with cognitive or visual disabilities will often increase the default font size to make text legible using the web browser zoom feature or change the default font size directly in the web browser settings. To ensure that fonts are resized correctly, it is the web developer’s job to use accessible coding practices. So that it does not interfere with the way the browser displays text.
Why Should You Use Relative Scaling Units In Font Sizing?
One of the easiest ways to make sure that textual content is resized according to the user’s preferences is to use relative scaling units instead of absolute ones. Fonts on websites using relative scaling units will increase according to the browser’s default font size, while fonts on websites using absolute units won’t.
In web design, we commonly use pixels(px) when sizing elements such as fonts. Using px is straightforward and sizes fonts exactly how we want it. However the issue with using absolute units such as px is that they are non-scalable. Meaning that whenever the value of another element changes, absolute units don’t. They are fixed and stay the same irrespective of the web browser settings.
Which is bad news if absolute units are used for font sizing, when a user increases its browser default font size or uses the web browser zoom feature, fonts using px stay the same and are not affected.
The alternative is to use relative scaling units such as em and rem, which can solve that issue and offer an adaptable, accessible and responsive font sizing.
Another reason why relative scaling units are important is the wide variety of devices used to access websites. All those devices render web pages differently and using relative units will help make sure that texts are rendered at a readable size.
What is an EM Unit?
em is a unit relative to the nearest parent element. It enables you to adjust the font size of a relative element to the font size of a parent element. When the font size of the parent element changes, the font size of the relative element changes as well.
For example, if the body element font size is set to 16px, then 1em = 16px. If a paragraph element is nested inside the body with a font size of 0.5em, it becomes half the font size of the body element, 0.5em = 8px.
Here’s a code example of how em units work when used for font sizing:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the base font size for body element */
body {
font-size: 18px;
}
h1 {
font-size: 2em; <- This will be 36px (2*18px)
}
</style>
</head>
</html>As we see in the example above, the <body> tag is set at 18px and the <h1> tag is set at 2em.
Here 1em equals 18px so text in the <h1> tag will be sized at 36px.
If font size is not specified in the <body> it defaults to the browser’s default font size, which is 16px.
Compounding issue with CSS EM units
Using em units gives a more modular control over specific parts of a web page, which is great for responsive and adaptable websites. But we can get into issues if we keep nesting elements inside one another. This will lead to em units compounding and make the text unintendedly larger.
Here’s an example where divs are nested within each other which compounds the em units value and makes the text larger:
.primary {
font-size: 15px;
}
.secondary {
font-size: 2em;
}
<div class="primary">
I'm 15px
<div class="secondary">
I'm 30px, it's all good.
<div class="secondary">
I'm 60px, what's going on?!
<div class="secondary">
I'm 120px, this is too big!
</div>
</div>
</div>
</div>Here’s the output of the code above:
I’m 15px
I’m 30px, it’s all good.
I’m 60px, what’s going on?!
I’m 120px, this is too big!
The solution to em units compounding when nesting elements is to use rem units instead.
What Is A REM Unit?
rem is a unit relative to the root element which is the <html> element on a web page. When font size is not specified, it defaults to 16px. Similarly to em units, 1rem = 16px and 2rem = 32px. They are more predictable in how they size elements on a web page.
Unlike em units, rem units are relative to the root element which makes them impossible to compound.
Here’s a code example of how rem units work when used for font sizing:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the base font size for html element */
html {
font-size: 18px;
}
body {
font-size: 1rem; <- This will be 18px (1*16px)
}
</style>
</head>
</html>As we can see, rem and em units are no different in how they function when used for font sizing. Only difference being em units will relate to its closest parent and rem units will relate to the <html> or root element.
None is better than the other, em is great for modularity when we want certain parts of the web page to size fonts in a particular way. While rem is more predictable in the way it sizes fonts but gives you less flexibility and modularity.
Conclusion
Regular text, images or text-based form controls not resizing upon zooming the viewport to 200% is a common WCAG violation we encountered during our manual audits. Making sure that web pages size fonts correctly when users zoom or increase font size is important for web accessibility and responsive web design.
And this starts with web developers and designers using accessible coding practices like replacing absolute units with relative sizing units when designing websites and setting font size.
Write to us at info@advancedbytez.com and talk to one of our engineers if you need help conducting a manually accessible audit of your web or mobile application.
