3 methods to make your typography responsive.
👴 Method 1) Old School #
The most basic approach to responsive typography is using media queries to increase your text elements' font size.
/* Method 1 */h1 { font-size: 2em;}p { font-size: 1em;}@media (min-width: 48rem) { h1 { font-size: 3em; } p { font-size: 1.25em; }}🤯 Method 2) Clamp Function #
An advanced approach to responsive typography consists of using the clamp function with the CSS custom properties.
The clamp() CSS function accepts three values: the minimum value, the preferred value, and the maximum value. If your preferred value changes with the viewport width (i.e., vw units), you'll have fluid typography that adapts to the viewport size and is capped by the minimum/maximum values.
/* Method 2 */h1, p { font-size: clamp(var(--min), var(--val), var(--max));}h1 { --min: 2em; // minimum value --val: 5vw; // preferred value = 5% viewport width --max: 3em; // maximum value}p { --min: 1em; --val: 2.5vw; --max: 2em;}👌 Method 3) Multiplier #
CSS custom properties are excellent when it comes to updating multiple elements at once. By injecting a --text-multiplier variable into the text elements' size, you can increase/decrease them all at a specific breakpoint by editing the variable.
/* Method 3 */h1 { font-size: calc(2em * var(--text-multiplier, 1));}p { font-size: calc(1em * var(--text-multiplier, 1));}@media (min-width: 48rem) { :root { --text-multiplier: 1.25; }}Demo #
Here's a live demo:
