Responsive typography - text too small

Question

I'm trying to make my typography responsive but I think I'm doing something wrong. Why is the text-size so small at 90% and 80%?

body {
    font-size: 100%;     /* flexible baseline */
    font-size: 1.375em;  /* 22px */
    line-height: 1.4;
}

@media (max-width: 899px) {
    body {
        font-size: 90%;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 80%;
    }
}

100%

90%

80%

Answer 1

Size gets too small because it's 90% and 80% of 16px (browser default font size). If you put your baseline font-size in body element it gets overwritten when media query kicks in.

Do it like this:

html {font-size: 1.375em;  /* 22px */}

body {
    font-size: 100%;     /* flexible baseline */
    line-height: 1.4;
}

If you set your root element (html) to desired baseline size you can use percentage values on body tag to resize text in various media queries.

Answer 2

I have a feeling font-size: 100% is somehow overwriting font-size: 1.375em; in the media query. Check the DevTools to verify. A better approach is:

font-size: 137.5%;

And set media query, for example:

font-size: 0.9em;

When you set a percentage in the media query it is evidently going off the baseline.

Answer 3

It is small because it is 90% or 80% of the default font size of the browser (unless you have set font size on the root element). That’s how CSS works. In your first rule, the declaration font-size: 100% has no effect and the second declaration sets the font size to 1.375 times the basic font size, and your @media rules override that when the width of the viewport is at most 480px. They do not set the font size to 80% or 90% of the width you set with font-size: 1.375em, since that declaration is completely overridden.

The simplest solution is to set all sizes as relative to the default font size of the browser. If you want the sizes to be 90% or 80% of 1.375 times the default size, you just need to calculate a little, yielding the following:

body {
    font-size: 137.5%;
    line-height: 1.4;
}

@media (max-width: 899px) {
    body {
        font-size: 123.75%;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 110%;
    }
}