Responsive Web Design: Using Fonts Responsively

Typography is one of the most important aspects of responsive web design, and optimizing your fonts for mobile devices is an absolute necessity if you want your content to be palatable across all screen sizes. Fortunately, the process of building flexible fonts is not very difficult. When we talk about flexibility (which is the guiding principle in this case), we cannot overlook the specified size of the font we’ve chosen to adapt for our responsive website. We may use different metrics for this purpose, including pixels, ems, rems, or percentages. Choosing the right metric is critical for designing a malleable, responsive interface.

In this continuation on responsive web design, I’ll explain how to manage dynamic fonts responsively, and I’ll analyze all of the aforementioned metrics, comparing the strength and weaknesses of each choice.

Pixels

For a long time, pixels have been the unit preferred of web designer due to its inherent precision and accuracy. Once the pixel value is chosen for the font, the type size will remain exactly across all devices and browsers. While that approach offers very precise control, it’s contrary to our need for flexibility and responsiveness.

As most readers already know, when you set the dimensions for a “parent” item, they will be automatically applied to any “child” elements via inheritance. (That’s why they named CSS “cascading” stylesheets.) For example, setting a fixed pixel value to the body’s font-size will permeate nearly all other elements of your design. When the developer wants to assign different style declarations to each individual element of the page, he or she will have to set different parameters manually to override existing styles.

As a result, basic edits and adjustments will require meticulous modifications to all of the previous settings. This is far more than just inconvenient; it can lead to serious accessibility problems in a variety of browsers and devices, many of which interfere with deliberate choices of font size. Some visitors may have difficulties reading text below a certain size and this should be absolutely avoided, especially considering our main goal of making a responsive design that works with all screen sizes and eyeballs involved.

If you take a forward-thinking approach to your designs, the option of assigning rigid pixel values as your font sizes doesn’t seem to be the best choice. Today, devices have different screen sizes, as well as different pixel densities. Serving a one-size-fits-all font size to this huge range of products is contrary to our responsive approach.

Ems

Let’s continue by considering ems. An em is the equivalent of the size (in pixels) defined in the CSS rule font-size. For example, if we build a <div> and include text with a font-size of 16 pixels, 1 em will correspond to 16 pixels, 2 em to 32 pixels, and so on. Ems are resizeable in all browsers, and it’s not necessary to set the value for each element, because in this case, the rule can be applied to the “parent” element and automatically to its respective “child” elements via the cascading process.

Obviously, working with ems involves pros and cons to consider. Although they make the maintenance of a site’s type easier (because, as mentioned before, all the changes will automatically apply to the whole content), this could hinder a developer who is seeking control, precision, and predictability with their fonts. Luckily, the problem can be easily solved by using the same measurement units for the most of the content, scaling only a few text elements such as the header or footer.

{ font-size:100%; }

Frequently Asked Questions on Responsive Web Design and Font Management