Vertical rhythm in web typography
The trick to making a page feel well-designed even if you can’t pinpoint why: derive all your spacing from your base line-height.
--space-unit: calc(var(--fs-base) * var(--leading-body));
--space-sm: calc(var(--space-unit) * 0.5);
--space-md: var(--space-unit);
--space-lg: calc(var(--space-unit) * 1.5);
Everything snaps to a consistent vertical grid. Headings, paragraphs, margins, padding — all multiples of the same base unit. It’s subtle but the difference is immediately noticeable.