lh9t8g
Last Updated: April 09, 2016
·
10.68K
· elad2412
Elad1

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

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:

CSS

html {font-size:1px;}

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

CSS

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.

CSS

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

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:

html {font-size:1.2px;}

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

html{font-size:0.8px;}

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){
    html{
        font-size:1.4px;
    }
}
@media (min-width: 600px){
    html{
        font-size:1.2px;
    }
}

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 {
  .font-size(20);
}

The compiled CSS will look like this:

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

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

Say Thanks
Respond

8 Responses
Add your response

7031

Love this! thank you;)

over 1 year ago ·
7184

Great! This is new for me

over 1 year ago ·
7199

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 ·
7221
Dsc 0105 0

Really good info! Thanks! :D

over 1 year ago ·
7231

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 ·
7240
Elad1

@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 ·
8898
Aalaap filter 512

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

over 1 year ago ·
14318
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 ·