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