Last Updated: April 09, 2016
· elad2412

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:


article h2 {font-size:20px;}
article p {font-size:12px;}

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:


html {font-size:1px;}

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


article h2 {font-size:20rem;}
article p {font-size:12rem;}

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

20 REM  *  1 PX = 20PX.

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.


article h2 {font-size:20px; font-size:20rem;}
article p {font-size:12px; font-size:12rem;}


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:

html {font-size:1.2px;}

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:

@media (min-width: 320px){
@media (min-width: 600px){

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

.font-size(@font-size) {    
  font-size : @font-size * 1px;
  font-size : @font-size * 1rem;

article h2 {

The compiled CSS will look like this:

article h2{
  font-size:20px;/*Support IE7 & IE8*/


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

Say Thanks

8 Responses
Add your response


Love this! thank you;)

over 1 year ago ·

Great! This is new for me

over 1 year ago ·

FYI: Chuck Carpenter has created a rem unit polyfill to help with IE8 and below https://github.com/chuckcarpenter/REM-unit-polyfill

over 1 year ago ·
Dsc 0105 0

Really good info! Thanks! :D

over 1 year ago ·

No, no, no. Don't reset the HTML font size if doing responsive design.

Your media queries should be in ems to make them scalable with font size changes, so if you set HTML to be 1px your media queries will fire at incorrect sizes.

Leave the default font size at 16px and divide every value pixel value by 16. Even better, use Sass to write a rem mixin that does the conversion for you automatically.

over 1 year ago ·

@stowball I didn't understand why you say it's a problem. the font size is salable if i change to root font-size in the media queries according the breakpoints.

over 1 year ago ·
Aalaap filter 512

This is brilliant! It's what CSS should always have had.

over 1 year ago ·
7a0c647bf472eafa378006681009d140 normal

This is the way not to do it. I'm with stowball on this eventhough media querries don't have to be em-unit: If you don't change the root font size you have a relative value to work with and let the client decide what to set in this place.

I usually go for root font size and em using at most 2 levels.

over 1 year ago ·