Responsive fonts demo

The full Responsive fonts article.

Minimal styling, pure CSS solution.
Above 48rem (768px) the text on this page increases font-size smoothly and proportionately, dependent on the viewport width.

See Demo 2 for a more typical layout.

Applied to a golden-ratio Flexbox layout

This method will also smoothly scale any object which is sized using em or rem.

@ 48rem+ (768px+)

This text begins to scale-up starting at the minimum font-size 16px and proportionately increasing to 32px as the viewport is stretched to 120rem (1920px).

 

@ 48rem+ (768px+)

This text starts at the minimum font-size 14.55px and scales up to 29.12px as the viewport is stretched to 120rem (1920px).

Why a golden-ratio example?

It's probably the most difficult fluid grid to achieve with any accuracy.
The value scale is awkward to say the least:
[0.09, 0.146, 0.236, 0.382, 0.618, 1, 1.618, 2.618, 4.236, …]

In the example above @ 48rem+ (768px+) it consistently has:

See Demo 2 for a more typical layout.