HOME       BLOG      CONTACT

 

shutterstock_184473665.jpg

Summit 7 Team Blogs

Sizing matters. Or, why REM doesn’t suck

When I was growing up, REM was synonymous with sleep and depression. Their dreary tones and PC-posturing honed my reflexes as I reached for the power button or the seek button or the next button or ear plugs or whatever would let me avoid the soporific droning. But fast forward a few years and there’s a new REM in town: one that I’m happy to sit up and listen to. Please try to stay awake as I explain why…

This rem– the sizing unit, not the band– is actually pretty cool. One of the more exciting newcomers in CSS3, rem, or "root em" is a relative sizing unit that forgoes the nesting or compounding issue with the standard em measure. Font sizing is one of the more hotly debated questions of the mobile web, but I want to share with you an answer that we’ve found to work rather well for cross-platform mobile web optimization. Rem is the first ingredient.

Excitement and rem together in a subheading?

Times [font! – Ed.] have changed. Typically, designers like to size fonts in points or pixels. We are proud of our designs, and want them to look just so. But then we come to realize that accessibility requirements, strange zoom levels, resized windows and myriad [font! – Ed.] other delivery context variables wreak havoc on our intended perfection.

So, along comes em, which on paper (no pun intended) looks ideal. And for certain simple content structures it can be. The em sizes elements according to a page default. For example, we apply a font size to the html or body element of the page, and define font size relative to that. For example, if we want text within our bulleted lists and hyperlinks to be 120% of the regular text size, we might define basic styles like this.

html, body {
font-size:100%;
}
li {
font-size: 1.2em;
}
a {
font-size: 1.2em;
}

Which is all fine and dandy, until we make the text within our bulleted list a hyperlink, and realize that our text is not 120% of the default size but 144%. The em effect is compounded. There are ways around this of course. We could define styles for every possible combination of nested elements – lists within lists within hyperlinks within paragraphs. That would get tedious very fast.

The real solution is rem. This time, instead of defining our sizes as "em" we simply add an "r". Just like that. Now, no matter how many lists we nest within lists within hyperlinks within lists, our font will be sized at precisely 120% of the standard size. [Do we really need to mention that IE doesn’t yet understand rem? – Ed.]

So rem is the first ingredient in our predictable and solid mobile text sizing solution. Ingredient two is the media query.

One thing we know about mobile devices is that there is no such thing as a standard. When we talk about mobile we are talking about phones with tiny 200 pixel-wide screens, and tablets with large 1200 pixel-wide screens. Text that is readable on a tablet might look ridiculous on a little Blackberry. (By "might", I mean: "it does".) So, we use a media query to adjust the font size based on the screen  it is being viewed on.

Say that our mobile web site needs to display an organization’s tagline. The requirement is that the tagline needs to be displayed on a single line. We set our font size to 15 pixels, which looks perfect on our shiny new iPad. Now, we view the page on our grandmother’s Blackberry and …oops; the tagline breaks onto two lines. Something must be done!

Of course, we could make the font smaller across the board, but why penalize the iPad at the expense of the Blackberry? There’s no need to! By figuring out the screen width at which the break point occurs, we can add a conditional statement to our stylesheet. So if the break point is a 400 pixel screen/window width, we might define a media query like this:

@media (max-width: 400px) {

html {

font-size: 10px;

}

}

Now, for screens below 400 pixels wide the standard font size will be adjusted from 15px to 10px. All other sizes, set in rem, will scale relative to this base size.

By defining a series of media queries, we can define as many “bands” as we like for sizing. Things can get a lot more complex, and a lot more device specific using just a couple of simple lines of CSS. The result is a fluid design that looks great on any device, any sized window, any orientation.

But font sizing is only one part of a larger mobile sizing dilemma. How do we make our images superbly sharp and beautiful irrespective of device? And how do we do so in such a way that doesn’t cost our users a few bucks in data overages? Vectors. If you’re still awake, that will be my next topic.

 

 

Disclaimer
The sample scripts are not supported under any Summit 7 Systems standard support program or service. The sample scripts are provided AS IS without warranty of any kind. Summit 7 Systems further disclaims all implied warranties including, without limitation, any implied warranties of merchantability or of fitness for a particular purpose. The entire risk arising out of the use or performance of the sample scripts and documentation remains with you. In no event shall Summit 7 Systems, its authors, or anyone else involved in the creation, production, or delivery of the scripts be liable for any damages whatsoever (including, without limitation, damages for loss of business profits, business interruption, loss of business information, or other pecuniary loss) arising out of the use of or inability to use the sample scripts or documentation, even if Summit 7 Systems has been advised of the possibility of such damages.

SHARE THIS STORY | |