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

I think what you're looking for are viewport percentage units.

Try this:

.about-content-title h1 { font-size: 5vw; }

With this adjustment, when you re-size the browser window the font will scale in size.

From the spec:

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

• vw unit - Equal to 1% of the width of the initial containing block.
• vh unit - Equal to 1% of the height of the initial containing block.
• vmin unit - Equal to the smaller of vw or vh.
• vmax unit - Equal to the larger of vw or vh.

Using percentage values (%) doesn't scale your fonts relative to the viewport because these values are relative to a parent or ancestor. See the spec: 4.3. Percentages: the <percentage> type

Answer 2

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.