Jump Start Responsive Web Design

It’s common to set some or all of these properties with pixel values. For example, you could add the following to the body selector of the current demo site:

This will result in text that looks like that shown in Figure 4-2.

Other properties you may find useful in your designs are:

• font-style: sets text to italic or oblique. Italic text may not be as readable on small screen as on large screens.
• text-indent: sets the indentation mostly of the first line of text in a block of text. With space at a premium on smaller devices, it may be better to indent paragraphs than to set spaces between them.
• text-align-last: sets the alignment of the last line of a text block. Again, at different devices sizes, you may want to handle this differently.
• white-space: defines the handling of white space and wrapping in a block of text.
• word-wrap: specifies if words are allowed to break over lines. This could be useful for optimizing text based on display size.

You may be wondering how setting text at fixed sizes could be responsive. 18px is 18px whether it’s rendered on a desktop computer or a mobile screen. You could use media queries to set different font sizes at various screen sizes, but this would become arduous, and there’s potentially a better method.

CSS allows you to use different units for sizing elements, but especially with text. They fall into two camps: fixed sizing and relative sizing.

Fixed Sizing

Fixed sizing means that the size is always the same. There are seven possible units you can use, but I’ll focus on the two most common, px and pt values.

Pixels

Pixels are those little dots of color that comprise the screens of every device. When you need to set the size of an element in HTML, one CSS pixel equals one device pixel, right? Well, no….

Device pixels—also called screen pixels—are the actual pixels comprising your screen, and traditionally this was the number of pixels in the width by height of a user’s screen. As shown in Figure 4-3, this may not be the same as the size of their browser window, as desktop users frequently resize it, and browsers don't typically operate in full-screen mode.

The newer, high-resolution screens—such as Apple’s Retina displays—complicate matters, as they use a larger number of pixels over the same screen area. Typically, this is achieved by doubling the number of pixels vertically and horizontally—though increasing numbers of screens have four times as many pixels in each direction.

Complicating this further are users who scale or zoom their browser windows for accessibility or other reasons. For example, the screenshot shown in Figure 4-4 is the current demo site zoomed to 125%, where one CSS pixel now covers 1.25 device pixels.

For these reasons, it’s best to ignore actual device pixels and focus on CSS pixels—the pixel values you set in your CSS file. The CSS pixel value is a more accurate number, which takes into account the factors outlined above. Browsers also handle a lot of the scaling issues for you.

The pixel, or px, sizing unit theoretically represents the size of one pixel of a screen. In relation to text, this means that when setting text to 16px, the length of the lowest point in the text—such as the bottom of a lowercase g—to the highest point—such as the top of a lowercase k—is 16px, as shown in Figure 4-5.

For other properties, such as letter-spacing, this literally means the number of pixels between characters at their widest point.

Points

As you saw in the earlier screenshot from InDesign, the point, or pt, sizing unit has its heritage in print text and is more confusing to understand. It represents a similar size to the pixels example, but as different operating systems and screens represent pixels to points in different ways, they are best reserved for print styles.

Relative Sizing

Relative sizing is more suited to Web and responsive design, as sizes will change relative to a base size. But it’s useful to understand fixed sizing—at least pixels—to appreciate how these sizing methods work. The most popular units for relative font sizing are the %, em, and rem values.

The first important fact to know when using relative sizes is what these sizes are relative to. By default in all browsers, it’s 16px, as shown in Figure 4-6. But if a user has changed this default—for example, to compensate for low vision—relative sizes will still scale up and down proportionally.

Percent

Setting a percentage value for a font size means making it a percentage of the default font size, so if a user has the font size of their browser set at 16px, then font-size: 100%; will still equal 16px, and font-size: 50% will equal 8px.

As an example, let’s try applying percentage sizing to the demo site, again with a mobile first approach, setting the base font size for users of devices with smaller screens.

Add a base font size to the body element that sets the default font size to 75% of 16px, which is 12px:

Then, in the tablet and desktop media queries, add font sizes for the larger screen sizes:

This results in a subtly more pixelated font rendering on larger screens than on medium-sized screens.

Em

Despite its recent rise in popularity with Web designers, the em unit is an old typographical unit named after the letter M. The base value of an em unit is equal to the current typeface size in points. For example, one em in a 16-point typeface is 16 points.

In practice, it works in a similar way to percentage sizing, but the units are smaller. So, for example, assuming a default font size of 16px, font-size: 1em will still equal 16px, and font-size: 0.5em will equal 8px.

The unit values are smaller with ems, but it’s easy for styles to result in large font sizes accidentally. For example, consider font-size: 4em: while the number doesn’t look large, it actually equals 64px. Of course, you could set your default font size to something smaller, and then increasing ems won’t result in such large variations.

As an example, let’s try applying em sizing to the demo site, again with a mobile first approach.

Add a base font size to the body element that sets the default font size to .75em of 16px, which is 12px:

Then, in the tablet and desktop media queries, add font sizes for the larger screen sizes:

I won’t add screenshots, as the results should look exactly the same as with the percentage examples.

One neat trick with ems is that the relative sizing cascades down nested elements, as shown in Figure 4-7. For example, modify the page’s aside element to have some nested list items:

Then add the following style:

You’ll see that the font size for the outer ul is .75em, or 15px, of the current default size—in the screenshot, this is 20px—and the inner ul is .75em of that size, or 11.25px. While this technique allows for a fantastic shorthand way of creating responsive text sizes that can cascade through your page structure, it requires careful planning, as an element several levels deep may end up smaller or larger than you expect.

Rem

The rem unit stands for root em, and the sizing representation of the unit is the same. But root implies that the relative sizing is calculated from one base element—which is the html element—rather than the immediate containing element. This gives you a more predictable alternative to ems, as it’s easier to tell what the size is relative to.

As an example, let’s try applying rem sizing to the demo site, as shown in Figure 4-8.

Add a base font size to the html of 12px, assuming a default of 16px:

Then inside the tablet and desktop media queries, add font sizes for the larger screen sizes:

Not much changes when applied to the demo site, as it’s effectively the same sizing. Now add the following styles to the nested list example from above:

Now the sizing is 3/4 of the current base font size.

Other Relative Sizes

Sizes based on percentages, ems and rems are not the only options available to you. There are actually nine in total. Some are quite obscure, or not really necessary, but others are more useful after an initial learning curve. Take, for example, the vw and vh units, which are a percentage of the width and height of the viewport respectively.

There is also vmin—based on which is smallest of the viewport height and width—and vmax—based on which is largest of the viewport height and width. These are amazingly flexible, as the size will automatically react to the size of the viewport, but you can lose track of what sizes fonts actually are.

Take a viewport that’s 1000px wide and 800px high:

• 1vw is 1% of the total width, i.e. 10px
• 100vw is 100% of the width, i.e. 1000px
• 50vw is 50% of the width, i.e. 500px
• 1vh is 1% of the height, i.e. 8px
• 1vmin is 1% of the smallest of the two sizes, i.e. 1% of 800px, which is 8px
• 1vmax is 1% of the largest of the two sizes, i.e. 1% of 1000px, which is 10px

Try adding the following to the body element:

Your base font size will now be 1.5% of your body width, which will depend on the width of your browser window.

At first, it looks like viewport sizing is the answer to your responsive dreams, but you’ll notice that, as you shrink the browser window, the font size becomes unreadable, as 1.5% of a small viewport width is a tiny font size.

Of course, you could fix this with breakpoints, but then that defeats the purpose of using this sizing unit in the first place. There’s a clever workaround for this, thanks to Zell Liew and Mike Riethmuller:

This works by using the CSS3 calc function to calculate a base font size—16px or 100%—and then adding 0.25% of the viewport width to it, reducing the amount of variation between sizes as the viewport dimensions change. You’re free to change both the values in the calculation to suit your needs.

For the remainder of this chapter, I’ll use the em unit, but before refactoring the demo site text, let’s return to typography and optimizing it for the Web.

Creating Readable Text

You can use all the typographical properties outlined earlier in this chapter in conjunction with the sizing units also discussed, allowing for fine-grained tweaking of text to make it the most readable on any device.

There are, of course, many schools of thought on what good text looks like, and it depends on how much text your pages show and how important it is to those pages. The example site in this book has a small amount of text, so it’s relatively easy to make it readable. Text-heavy sites such as a blog will need more thought and consideration.

You should consider what font faces, styles, sizes, and layouts suit various screen sizes and resolutions and balance this with any style guides your project may have.

Let’s start overhauling the text of the demo site by tweaking the base text properties:

As shown in Figure 4-9, this sets the default font size to be the browser default, likely 16px, as discussed earlier.

For the small-screen version of the page—that is, the default styles—the show description text is actually hidden, as shown in Figure 4-10, so we needn’t worry about formatting it. However, the main site description is taking up way too much space when screen real estate is limited, so use a :not pseudo-class to reduce the default font size and exclude the show descriptions:

As the screen size grows, apart from watching the videos, the show descriptions are likely what people want to access, so let’s make the text slightly bigger to stand out more, as shown in Figure 4-11. With this medium screen size, still only a text summary is shown, so this is enough to make it more readable:

As the screen gets larger, let’s increase the text size and tighten the line spacing, as shown in Figure 4-12, especially as people may now be reading these descriptions from across the room as they settle in for an evening of entertainment.

Read On

In this chapter, I’ve introduced typographical concepts that are relevant to responsive design, and I’ve shown how they are represented in CSS. I’ve also covered the different sizing units that you can use to set these properties, and how to make important text on your pages readable. In the next chapter, I’ll look at how to do the same with the rest of your page content, such as images and videos. 

Discount for UXmatters Readers—Buy Jump Start Responsive Web Design from SitePoint and get $10 off the retail price.