Font size with percentage value (%) not scaling with screen size

Question

I\'m not understanding why my font isn\'t decreasing in size when I make the screen smaller.

I set all my CSS in percentages so that everything would be responsive.

Answer 1

Fonts don't change sizes responsively when using percentages.

See this article on Viewport Sized Typeography.

You can use vmin, vmax, vw, or vh to get the responsiveness. For example:

div {
  font-size: 5vmin;
}

This will change the size of your fonts as you make the screen larger or smaller.

From the article:

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

A percentage size, on the other hand, sets the font size according to the context, which will be the parent in its hierarchy which first has a specifically set font size.