The CSS calc() function performs arithmetic on CSS values, making it possible to combine units such as em and svw or derive dimensions from existing variables. section 2.4.2 section 3.2.1
Use calc() when the browser should calculate a relationship rather than preserve a trial-and-error number.
- Combine responsive and accessible sizing, such as calc(0.5em + 1svw), so text scales with the viewport while retaining an em-based component. section 2.4.2
- Write spaces around addition and subtraction operators; calc() supports addition, subtraction, multiplication, and division. section 2.4.2
- Replace unexplained offsets with relationships, such as calc(var(--columns-width) - 3em), which subtracts known padding from a variable width. section 3.2.1
A smoothly scaling base font size
Define the root size with :root { font-size: calc(0.5em + 1svw); }. The em portion incorporates user font settings, while svw adds a viewport-responsive scalar. Resize the browser to observe a gradual change instead of breakpoint jumps. section 2.4.2
:root {
font-size: calc(0.5em + 1svw);
}
Inspect the compact CSS listing for the responsive root font-size pattern. section 2.4.2
