Update your font-size to REM units

A lot of websites are using pixel units that are difficult to adjust in the increasing variety of different devices.

CSS3 introduces a few new units, including the REM unit, which stands for “root em”.

So, how are we using REM ?

let’s say we have this CSS:

CSS

First of all we need to decide what size of px will be relative to all font’s. and to make it easy, the best practice I have done is to make root font-size 1px like this:

CSS

Second of all we need to replace the rest of the font size values from pixel to rem units.

CSS

What REM does, it takes 20REM and Multiply it with the root element:

Browser support

IE7 & IE8 still need to use PX values. This will force us to write font size twice, one time in PX and second time with REM.

CSS

LIVE EXAMPLE

Why REM units are good for you?

Lets assume we need to enlarge all fonts in our website by 20%, all we have to do is to change the size of the font-size in the root element, like this:

If you wand to reduce by 20%, you will do it like this:

Really nice and easy!

REM for Responsive Design

When you want to change all font size according to breakpoints in your responsive design it is a lot more easy. See example:

Now in smaller screens we re-size all fonts by 40% bigger, and in medium screens we re-size it by 20% bigger.

Using less to resolve the needs of writing everything twice — for supporting old browsers

in less or sass you can add functions to save you the time of writing everything twice.

less — font-size function and calling It

The compiled CSS will look like this:

Enjoy!

If you like this tip, I will be happy to get your LIKE. You are welcome to follow me and endorse my skills.

Elad Shechter

Originally published at coderwall.com by me, on May 28, 2013.

CSS & HTML Expert

CSS & HTML Expert