Rem, ems and px When Size Does Matter

Written by eXsertus‘ Consultant Danny Nieuwlaat

Font-sizing is a hot topic in the current web (even multimedia) world.  A lot of confusion and a lot of theories exist but no silver bullet does the trick. Each unit has his advantages and disadvantages depending on the media used.

Meet the Units

  • “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
    Classically, an em (pronounced emm) is a typographer’s unit of horizontal spacing and is a sliding (relative) measure. One em is a distance equal to the text size. In 10 pixel type, an em is 10 pixels; in 18 pixel type it is 18 pixels. Thus 1em of padding is proportionately the same in any text size.

eXsertus Blog

  •  Pixels” (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.

Pixels are now considered acceptable font size units (users can use the browser’s “zoom” feature to read smaller text), although they are starting to cause some issues as a result of mobile devices with very high density screens (some Android and iPhone devices have upwards of 200 to 300 pixels per inch, making your 11- and 12-pixel fonts very difficult to see!).

  • Points” (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
  • Percent” (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
  • “Root em” (Rem): With the introduction of CSS3 we have a new unit to our disposal called Rem.  Rem stands for Root em. Rem is in essence the same as em the only main difference –> it’s relative to the document base as opposed to the container size as is the case with em

The 62.5% Hack

I’m going to explain text sizing with em and rem, but first I’m going to elaborate on a common used hack invented by lazy developers.

hacking

The 62.5% Hack is a common one and has its uses and drawbacks.

I only recommend using it if you want simpler maths, for example if you are building an elastic layout.  The fundamental mechanics behind the 62.5% hack are based on setting your base font size to 10 px. This makes every desired size a multiplicity of 10 e.g. width:30em; == width:300px;

Using the 62.5% hack has more drawbacks than practical usages in my humble opinion.

For starters, when using 10px as a base font size makes you write more code than needed, you have to style all elements since a base size of 16px is common use. When you let your base font size at 16px, you only have to style your exceptions being headers, some paragraphs …

It also introduces some possible inheritance problems e.g. A <p> in an <li> will be 1.2 × 12px, whereas it still only needs to be 12px.

Using 10px as a base size can also introduce some weird looking sizes e.g.

Sure you have more math to do but at the long run you need to add less sizing code.

To sum it all up:

Sizing with em

-relative to parent (container e.g. div)

-drawbacks modularity (differences between containers)

1
2
3
4
body { font-size:62.5%; } 
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */

Sizing With Rem

-relative to base (html)

-new kid on the block

html { font-size: 100%; } /* or 16 px)

body { font-size: 14px; font-size: 0.875 rem; } /* =14px */

h1 { font-size: 24px; font-size: 1.5 rem; } /* =24px */

scaling rhythm remains…

Browser support

browser supportYou might be surprised to find that browser support is surprisingly decent: Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9 have support for this. The nice part is that IE9 supports resizing text when defined using rems.

Only opera doesn’t support using rems. As fallback for other browsers, it’s acceptable to use px

Tips

Don’t be lazy, use px to em conversion chart http://fordinteractive.com/tools/emchart/

Not only usable for a textual context, you can use rem to size div’s, headers etc.

Formula to calculate em equivalent for any pixel value required:

1 ÷ parent font size (px) × required pixels = rem equivalent

Example: 770px wide, centred elastic layout using CSS and ems

N.B. This assumes the browser default font size is unchanged at 16px. body{} selector set to font-size:1em;. Using the formula*:

1 ÷ 16 × 770 = 48.125em

Future

New units coming up: the increased pixel resolution some recent mobile devices have and the different dimensions they bring along makes developers cry for better scalable and more friendly units.

Useful links

http://en.wikipedia.org/wiki/Em_(typography)

http://fordinteractive.com/code/emchart/

Advertisements
About

eXsertus is specialized in the optimalization of development processes and custom development using Microsoft Technologies. We enable IT departments to contribute to a company's success by building integrated systems and solutions. Leveraging the power of .Net, SharePoint and Biztalk. Total solutions are defined, designed and delivered in close collaboration with you. We know that an important amount of budgets is invested in maintaining existing infrastructure and applications. That's why Application Lifecycle Management (ALM) principles are integrated in our methodology. We also provide consulting services to help you optimize the processes in your company. Our company invests a lot in training our consultants in the newest technologies and the latest Microsoft Certifications. As such eXsertus is a certified partner of Microsoft. Specialties Microsoft .Net, Microsoft SharePoint, Total Project Support, Application Lifecycle Management, New development methodologies, Define, Prepare and Realise migrations, Upgrade & Re-engineering processes, Technical expertise in Business Process Automation, BizTalk

Posted in Ems, Font-sizing, PX, Rem, Uncategorized, Units

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: