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;
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