Fluid Type with CSS clamp()
We used to ship five breakpoints for heading sizes. Now we ship one declaration and a comment explaining the maths.
Feedback lands better when it describes the effect rather than the fix. “I lost track here” is more useful than “move this paragraph”.
Reading work aloud is the cheapest editing tool there is. Your ear catches rhythm problems that your eye skips over, especially in long sentences.
:root {
--step-0: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
--step-3: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
}
body { font-size: var(--step-0); }
h1 { font-size: var(--step-3); line-height: 1.05; }
The first version of anything is a question, not an answer. Treating it that way makes feedback easier to give and much easier to hear.
Constraints are underrated. A fixed word count, a single typeface, or a two-colour palette forces decisions that an open brief lets you postpone forever.
Reading work aloud is the cheapest editing tool there is. Your ear catches rhythm problems that your eye skips over, especially in long sentences.
Related posts
What a Paper Prototype Still Teaches
Scissors, tape, and index cards expose design problems faster than any tool.
Designing Around a Single Photograph
Letting one strong image set the palette, grid, and tone.
Kerning Pairs We Fix on Every Project
The awkward letter combinations that always need a nudge.
Comments · 0