—the ways we describe size, scale,
and proportion in CSS

Units of measure are how we express how big something should be
— not as exact numbers, but as relationships.

Each unit carries a different mental model.
When we choose a unit,
we choose how the element should behave as the environment changes.

Units are not syntax.
They are intent.

fixed, unmoving, precise

• px — a fixed pixel; stable, predictable, not responsive

Use when you want something to stay the same size everywhere.

scaling with context, typography, or the viewport

• em — relative to the element’s own font size
• rem — relative to the root font size
• % — relative to the parent’s size

Use when you want elements to scale with typography or structure.

responsive to the size of the screen

• vw — 1% of the viewport width
• vh — 1% of the viewport height

Use when you want elements to adapt fluidly to screen size.

for grid layouts

• fr — a share of the available space in a grid

Use when you want proportional distribution without math.

AI can generate correct CSS
but still miss the intention behind a unit.

When we name the unit, we tell AI:

• whether the size should stay fixed or scale
• whether it should follow typography or layout
• whether it should respond to the viewport
• whether proportions matter more than exact numbers

Units are how we express behavior,
not just size.

• Spacing — units shape the breathing room
• Density — units influence tightness or openness
• Rhythm — units create consistent patterns
• Flow — units affect how elements take their place

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←