Generate a CSS stylesheet with a hierarchy of font-sizes that adapt to the width of the viewport.
| Viewport: | |||||||
|---|---|---|---|---|---|---|---|
| A | A | ||||||
| A | A | ||||||
This technique makes font-sizes partially dependent on rem units, partially on vw units.
One thing to be aware of is the more that balance shifts towards vws, the less control you give
user via their browser's font size setting.
{[line.label|postpad:' ',15]} { font-size: calc({[ px|multiply:0.0625|floatformat:8|replace:'\.?0*$','' ]}rem + {[point.m|multiply:100|floatformat:8|replace:'\.?0*$','']}vw); }
@media (min-width: {[ x|multiply:0.0625|floatformat:8|replace:'\.?0*$','' ]}em) {
{[line.label|postpad:' ',15]} { font-size: {[point.fontsize|multiply:0.0625|floatformat:8|replace:'\.?0*$','']}rem; }
}
Built by Stephen Band at cruncher.ch. Repo on GitHub.