CSS3 tip of the day: Responsive web design – Font-sizing with rem

To create good responsive web design you must use proportionally-sized text units like em and % (percents).

However, CSS3 introduces a new proportionately-sized text unit rem.

rem – stands for root em.

1em = 1 x current font size. If current font-size is 15px. 1em = 15px and 2em = 30px and so on.

But! rem is always calculated relative to the font size of the <html> element. Not the font size of the containing element.  3rem is always 3 times the font size, wherever you apply it.

Which browsers support this? Chrome, Firefox3.6+, Safari 5+, IE9+, Opera 11.10+ (but not 11.10)

The old common em calculation problem: It always gets complicated to calculate the resulting font sizing in pixels after applying em. Sure it’s easy to use 1 or 2em but what happens when you need more accurate sizing like 1.64, 0.67 … ?

Well, people have thought of a solution back in the days of em. Fortunately, the same solution can be applied to rem.

Since you should be using rem in the future, always make sure that 1rem is equal to 10px.

How? 

 
html { font-size: 62.5%; } /* 10px */

p { font-size: 3.2rem; } /* 32px */

li { font-size: 1.6rem; } /* 16px */
Advertisements

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