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; } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter