When building sites, it goes without saying but our designs clearly must start somewhere—this is usually with adding text. It's therefore essential that we allow for this in our responsive designs at the same time.
Now is a perfect opportunity to explore how to make our text fluid and fill the available space. Although text is not media in the same way as images or video, it is still content that has to be added at some point to our pages! With this in mind, let's dive in and explore how we can make our text responsive.
When working on non-responsive sites, it's likely that sizes will be quoted in pixel values; it's a perfectly acceptable way of working. However, if we begin to make our sites responsive, then content won't resize well using pixel values; we have to use something else.
There are two alternatives: em or rem units. The former is based on setting a base font size that in most browsers defaults to 16px; in this example, the equivalent pixel sizes are given in the comments that follow each rule:
h1 { font-size: 2.4em; } /* 38px */
p { line-height: 1.4em; } /* 22px */Unfortunately, there is an inherent problem with using em units; if we nest elements, then font sizes will be compounded, as em units are calculated relative to its parent. For example, if the font size of a list element is set at 1.4em (22px), then the font size of a list item within a list becomes 30.8em (1.4 x 22px).
To work around these issues, we can use rem values as a replacement, these are calculated from the root element, in place of the parent element. If you look carefully throughout many of the demos created for this book, you will see rem units being used to define the sizes of elements in the demos.
The rem (or root em) unit is set to be relative to the root, instead of the parent; it means that we eliminate any issues with compounding at a stroke, as our reference point remains constant, and is not affected by other elements on the page.
The downside of this is support—rem units are not supported in IE7 or 8, so if we still have to support these browsers, then we must fall back to using pixel or em values instead. This of course raises the question: should we still support these browsers, or is their usage of our site so small as to not be worth the effort required to update our code?
If the answer is that we must support IE8 or below, then we can take a hybrid approach; we can set both pixel/em and rem values at the same time in our code:
.article-body {
font-size: 1.125rem; /* 18 / 16 */
font-size: 18px;
}
.caps, figure, footer {
font-size: 0.875rem; /* 14 / 16 */
font-size: 14px;
}
Notice how we set rem values first? Browsers that support rem units will use these first; the ones that don't can automatically fall back to using pixel or em values instead. The values in each comment are the pixel equivalents; if, for example, we divide 18px by 16px (as the base value for all sizes), we would arrive at 1.125, as indicated in the text.
If we want to take it further, then there is another alternative we can explore; how about using viewport units?
These effectively combine the best of both worlds; a viewport unit (or 1vw) is 1% of the viewport axis. So, if we had a viewport of 50 cm wide, a single vw unit would be 0.5 cm. We can specify sizes in the same way as we would do for pixel, em, or rem units. Take a look at this little extract, which gives a flavor of what it would look like:
h1 { font-size: 5.9vw; }
h2 { font-size: 3.0vh; }
p { font-size: 2vmin; }
The beauty though is no matter what size the viewport, the font size will always appear correctly, as it will automatically resize if the view port is changed.
Tip
To see a simple example of this in action, browse to http://codepen.io/alibby251/pen/xOGrqN and try resizing the browser window. See how the text automatically changes size, with no loss of quality?
Okay, at this point, we've added responsive capabilities to our text; our sites are looking pretty good....I can see a but coming....
At present, support for responsive text (and in particular vw or rem units) is excellent; browsers that will choke on these two units are few and far between. However, there may come a time when we need additional help; unlike images or video content, there are not many options available to choose from! The two best examples are FlowType.js, available from http://simplefocus.com/flowtype/, and FitText.js, from http://fittextjs.com/.
The catch though is that these libraries haven't been updated for 2-3 years, so are not likely to work with recent versions of jQuery. It's a good indicator of how well responsive text has come along over the years, and that we really should be using it natively, rather than relying on JavaScript!