Typography is the detail and the presentation of a story. It represents the voice of an atmosphere, or historical setting of some kind. The type we choose communicates something before a single word is read — weight, pace, formality, warmth.
Good rhythm in type is like good rhythm in music. The reader shouldn't notice it, but they would notice its absence. Spacing, size, and weight work together to guide the eye from one idea to the next without friction.
Every document has a hierarchy whether you design it or not. Without deliberate choices, the browser imposes its own — a patchwork of user-agent defaults that vary across systems and contexts. Taking control of hierarchy means deciding which ideas are primary, which are secondary, and how much visual distance separates them.
Size alone does not create hierarchy. Weight, spacing, and contrast all contribute. A heading that is only slightly larger than body text but significantly heavier can read as more dominant than one that is much larger but thin.
Subheadings do two things: they break up long passages so the eye has somewhere to land, and they give the reader a map. A page scanned before it is read will reveal its structure through its headings. If those headings are vague or formulaic, the reader enters the text without orientation.
When two headings appear in sequence, the space between them should be tighter than the space that follows a paragraph. The subheading belongs to the heading above it — it is a continuation, not a new departure. Collapsing that space signals the relationship.
The scale used here is a 1.2 ratio — close to the musical interval of a minor third. Each level is 1.2 times the size of the one below it. This is a relatively tight scale, appropriate for interfaces and editorial content that needs to pack information efficiently without the grandeur of a larger ratio like the perfect fourth at 1.333.
Tighter ratios feel quieter and more controlled. Wider ratios feel more expressive and editorial. Neither is correct in isolation — the right choice depends on the content, the medium, and the voice you're trying to establish.
At h5 and below, the size differences become subtle. Weight and case do more work at this scale than size alone. The h6 here uses uppercase and letter-spacing to distinguish itself from body text despite being only slightly smaller.
Everything here overrides browser defaults with explicit values. This is deliberate. Relying on browser defaults means accepting inconsistency across devices and contexts. Explicit values, even when they match the default, make the design intentional rather than accidental.
The font sizes here use CSS clamp to scale fluidly between a mobile minimum and a desktop maximum. The container padding does the same — tighter on small screens, generous on large ones. Resize this window to see both in action.
Fluid type removes the need for breakpoint-based font-size overrides in most cases. The scale compresses as the viewport narrows, so the hierarchy is preserved even when individual sizes shift.
At very small viewport widths, watch that h1 and h2 don't collapse too close together. At very large widths, watch that body text doesn't feel lost in the container. Line length is the next thing to address — paragraphs this wide are harder to read than they need to be.