Responsive Web Design: Using Fonts Responsively

This entry is part 1 of 6 in the series Understanding Responsive Web Design

Understanding Responsive Web Design

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!

Understanding Responsive Web Design

Responsive Web Design: Fluid Layouts >>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • John

    “Rems” is new to me… interesting. Thanks!

  • http://www,publicityfarm.com Susanne

    Hello thanks thats a very good article. I met rems now in several stylesheets and wonder how you define the pixel fall back. Anyone does it different and i didn t find a real answer in the internet. Would be very glad about more info what rems are exactly doing!
    Thanks alot ( the webesite above is still very new and not ready and not in google yet but for this one i would like to know how to use rems ) Susanne

  • http://electronspin.com Colin Johnston

    Great intro to Responsive typography – and good to see more exposure for rem units. I’ve been using this pattern in recent projects with much success.

    What’s ideal about rem units is that because they are relative only to the root element you have very direct access to the entire cascade for any media queries you may have employed. It’s quite easy to change the base font size of html element for your breakpoints, and all your child element’s rems (body, h1, etc.) will adapt accordingly.

    body { font-size: 1rem; } /*16px*/
    h1 { font-size: 2.5rem; } /*40px*/

    @media only screen and (min-device-width: 768px) {
    html { font-size: 75%; } /*body=12px and h1=30px*/
    }

    @media only screen and (max-device-width: 480px) {
    html { font-size: 62.5%; } /*body=10px and h1=25px*/
    }

    One thing developers must consider, as you mention, is that browser support is not ideal yet. Many recent versions of popular browsers do not support rem units. I would check caniuse.com/rem to learn more. In order to have appropriate fallback you’ll need to size your fonts with px before the rem.

    body { font-size: 16px; font-size: 1.6rem; }
    h1 { font-size: 32px; font-size: 3.2rem; }

  • John

    your article is helpful for me…I recently designed a responsive website. When I check my website on the iPad, it shows fine, but when I open it in mobile phones it shows the desktop view.

  • http://www.righteous-mind.com Alen

    Pixels is an important part of responsive website..you have finally resolved my problem man…Good work bro

  • http://www.midwestwebdesignstudio.com Robert Bonner

    It is important to remember that a em is not exactly 16px it will very according to what font you are using. The best way to think of an em is that it is the size of an upper case M in what ever font you are using. This is where the term em came from. When the unit of measurement was made they put the e in front of the m to make it look better then just using m in your css. Hence the em is pronounced M.

  • http://www.widestate.com/ Baidya nath Singh

    Very useful for designing. Glad to see the website (new design in WordPress) has a new look that inspire me WordPress can be used for your custom requirements.