Skip to content

Rem font sizes instead of pixels or ems.

    Rem font sizes are the best way to do font sizing for responsive web design.Rem stands for “root em”

    There are many units that can be used for font sizing: pixels(which is the traditional and most popular way of doing things), ems and rems. Both ems and rem have come to the forefront as they are great for responsive web design, where as pixels are not. Rem, however differs from em as it is based on the root element. what this means is that the it is relative to the root em of the entire website. Unlike em, which is relative to the parent element.

    First we will set our base font size for rem font sizes to 62.5%. This will make 1rem = 10px, allowing for easier calculations. Using a base size of 100% would make 1rem = 16px. Feel free to adjust it whichever way makes more sense to you.

    Add this code to your stylesheet.

    html { font-size: 62.5%; }

    Now, if we want our body font-size to be equal to 24px, we set it to 2.4rem.
    To make our h1 equal to 30px, we set it to 3rem.
    You can set the font-size of any element the same way.

    Add the following code to your css, after you have added the first bit of code.

    body { font-size: 2.4rem; }
    h1 { font-size: 3rem; }

    One of the main advantages of using rem lies in the fact that you only need to change the font-size under the html element in your respective media queries to change all the font-sizes. This allows your font-sizes to scale in different resolutions. You do not need to change the font-size in every single element.

    The following code increases all the rem font sizes for resolutions above 600 pixels by a single line of code.

    @media (min-width: 60rem){
    html{
    font-size:0.5rem;
    }
    }

    Say Hello!

    adeeb@adeeb.org


    Let’s work together!

    I’ve been building websites since dialups walked the earth.
    I develop, design, architect & maintain websites.

    © Copyright 2009 – Forever Adeeb