Proportional scaling

REM units

We advocate for REM units for properties like font-size, line-height, padding, margin, width and height.

If you're new to REM units, they might seem daunting, but they're actually one of the most intuitive responsive units in CSS.

REM (or root EM) is equivalent to the font size of the root HTML element, which is typically 16 pixels. So, a 24-pixel heading would be defined as 1.5rem in CSS.

Essentially, you're setting values as {{ pixel value }} / 16, making the transition to REMs simpler than you might think.

Scaling REMs

Imagine you want to adjust sizes and spacings to be more spacious on larger screens and denser on smaller ones.

Using REMs makes this task straightforward. You simply modify the font-size property of the HTML element at different breakpoints to achieve this effect.

Breakpoints (in code)

Breakpoints are specific points in a layout where we apply different styling rules based on the screen size, usually defined by the viewport's width. By setting breakpoints, we can tailor our design to look great on a variety of devices.

Here's how it works: at different viewport ranges, we apply varying font-size values. This change dynamically adjusts the absolute value of all elements defined in REMs.

html {
    font-size: 16px;
}

@media all and (max-width: 1024px) {
    html {
        font-size: 15px;
    }
}

@media all and (max-width: 560px) {
     html {
        font-size: 14px;
    }
}

html {
    font-size: 16px;
}

@media all and (max-width: 1024px) {
    html {
        font-size: 15px;
    }
}

@media all and (max-width: 560px) {
     html {
        font-size: 14px;
    }
}

html {
    font-size: 16px;
}

@media all and (max-width: 1024px) {
    html {
        font-size: 15px;
    }
}

@media all and (max-width: 560px) {
     html {
        font-size: 14px;
    }
}

Layout tokens