Last Updated: September 09, 2019
·
7.427K
· joshnh

Quickly resizing text with media queries

One of the main benefits of using ems (or rems) when sizing type is that you can quickly adjust the size for different viewports via media queries. Here is an example of what I mean:

html {
    font-size: 100%; /* Base font-size of 16px */
}
p {
    font-size: 1em;
}

@media screen and (min-width: 1920px) {
    html {
        font-size: 200%; /* Base font-size of 32px */
    }
}

Imagine having to go through and manually resize an entire website if you had used pixels!