There are several ways to determine the size of a font. Web developers and designers can choose between pixels, EM, and REM, for example. The most commonly used variant, pixels, is also the least digitally accessible way of determining font size.
In this article, we will discuss the most accessible way of determining font size. But we will start by explaining what exactly pixels are.
What are pixels exactly?
To understand why the use of pixels is not recommended, we must first look at what exactly pixels are. A pixel (abbreviated as px) is not a physical pixel on the screen, but a CSS pixel. The size of a pixel depends on the size of the display on which it is displayed. Take for example the differences between a large monitor, a laptop, or a mobile device.
This is easily explained by using zooming as an example. When a user zooms in, an element is displayed larger on the screen. It thus takes up more physical pixels, while the width of the element in CSS pixels remains the same.
Designers therefore often work with pixels. It is easy to build dimensions or designs directly from Photoshop, Indesign, or another program.
Why is styling in pixels not recommended?
Why the use of pixels for defining (among other things) the size of fonts is not good for the accessibility of a website, is because the use of pixels does not focus on user-friendliness.
This is because the use of absolute units, such as pixels or centimeters, cannot scale properly when a website user enlarges content. Examples are fonts, tables, and the general layout. We, therefore, advise against using pixels to define the width, height, font size, margin, and padding.
Using other units makes it easier for users to customize the layout of a page to their preferences.
Accessible alternative for pixels
An accessible designer or web builder avoids using pixels as a unit. But which unit offers a better solution? Below, we explain the accessible alternative to pixels as a unit of measurement.
EM: relative size
The internet is full of urban legends. On various websites you can read that the unit EM got this name because it is as wide as the capital M. This is (unfortunately) not true.
The size of EM depends on the size specified in the current font. If this is 16px, 1 EM is as big as 16px. Because EM is thus dependent on the font size, you can easily use it for responsive styling.
For example, the size of titles can be set to two EMs which makes them twice as large as the running text. This keeps the ratio the same regardless of zoom, giving the user more control over personal layout preferences.
This works best when everything is scaled via EM. So also define the maximum width, padding, and margins in EM. This way, the entire layout scales the same way when the user zooms in.
Exception for images and videos
There is an exception for defining the size of images. The width and height of these elements are determined by pixels, but differently. This is because they are defined via HTML code, not via CSS.
For responsive styling of images and videos, absolute units are used: pixels.
