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
.
Percentages
Just like ems, percentages are resizeable units for font size, and their CSS declarations can be inherited. Theoretically, there isn’t a big difference between percentages and ems; they’re both malleable units of measurement. What’s just as important as understanding the differences (however slight they may be) between ems and percentages is being decisive about which unit of measurement you are going to use throughout your design. You certainly don’t want to use ems for certain elements of your design and percentages for others. One way to rule out percentages is to simply make the following sitewide CSS declaration:
{ font-size:100%; }
This effectively overrides any browser defaults or other unwanted percentage declarations, and leaves the font sizing up to other methods and metrics. In this case, the content could be sized using ems.
Rems
Some of you may not be aware that there is another option that provides flexibility in font sizing: the rem unit (“root Em”). Its behavior is similar to that of the aforementioned em unit with one important difference: Its value is relative to the root element of the document (in HTML, that’s the <html>
element) and not to any the other elements associated to it. This important difference makes it possible to solve many problems that occur with nested elements. And, as most designer knows, the vast majority of their design inherently consists of nested elements; like humans, nearly every one of them has a “parent” somewhere and inherits certain qualities from them.
However, it’s important to note that rems are a very new unit, and therefore not all desktop browsers will support them, interpret them, or display them correctly. For now, at least.
Conclusions
Having explored the various measurement options for your fonts, what is the best way to approach your type in terms of responsive web design?
Surely, ems make font scaling easier and website maintenance substantially easier. If you decide, for example, to increase the font-size using percentages, you’ll simply have to change the percentage applied to the body and nothing else. Maintenance is actually a large problem that’s worthy of serious consideration in your design. It would be nice to ignore routine, everyday aspects like ease of maintenance and simplicity of stylesheets and focus entirely on aesthetics and functionality. But, outside of a blue-sky planning process, a good designer will give significant consideration and priority to utility and pragmatism.
First, you must convert all elements with a fixed size into something that ensures higher fluidity. Second, you should always keep in mind the proportions of the elements of the page and implement careful changes so that these proportions are preserved. We’ll see later in the series, with some examples, a practical application of all the principles of responsive web design that we’re describing in these articles. It’s important to understand the basic methodologies of these techniques first. In the next post, we’ll move on to fluid layout and how you can combine fixed width and fluid width within the same page.
Want to learn more about Responsive Web Design? Check out SitePoint’s new book, Jump Start Responsive Web Design!