Sizing Elements in Responsive Web Design– Part Two

Part Two: Working with Text

In continuing our discussion about Sizing Elements in RWD… We will now look at how to work with text. As mentioned in part one, back in the day… we just assigned a pixel measurement to our text and called it a day. But now we work in EM.

What is EM? When I teach Adobe InDesign, I take the time to explain how EM is used to calculate the width of a space when hitting the spacebar, in desktop publishing, it is based on the actual letter “M” for the font used. Kerning and tracking use EM as well. Enter the web and (unfortunately) throw that explanation, out the window. On the web => EM is a standardizing measurement that sets up your device’s default font size in pixels. So while I am sure someone thought it was a good idea to use the name EM, because it deals with text…. Print People… not so much ;~D On most devices 16 pixels = 1 em, but I have seen 12 pixels = 1 em. The beauty of using EM, is that it will scale your text to the appropriate size for the device you are using. (BTW it is also used for assigning object size, padding and margins as well => more about that in Part Three)

Back to talking about a webpage layout workflow => as I described before you would want to mock up your webpage in Illustrator first. When doing this you are going to, of course, work in points. Just like you need to translate pixels into percentages in the previous blog post, you need to convert points into EM. The magic conversion is…. 12pts = 1 em = 16 px (on most devices). Therefore you take your perfectly good point sized text and come up with the EM measurement to use by dividing Points/12 (example => 18pt text would be 18/12 => 1.5em).

In CSS:

H1 {
Font-size: 1.5em
}

I tell my students at first to do the division, but after some time… thinking in EM => becomes second nature. For instance, if you are deciding on the sizes for your headings => you could start with an H1 of 1.5em, H2 of 1.333em, H3 of 1.167em and so forth. I just took the .5 and divided by 3. Whatever works for you, but thinking in EM will really help!! Happy EMing…

No Comments Yet.

Leave a comment