To establish a consistent vertical rhythm, define a base line-height and a base font-size, then derive all other vertical spacing (margins, paddings, line-heights for different font sizes) as multiples of your base line-height using CSS custom properties and the calc() function. This ensures elements align on a common grid, improving readability and visual harmony.
:root {
--base-font-size: 1.125rem; /* ~18px */
--base-line-height: 1.5; /* This translates to 1.5 * 18px = 27px */
--rhythm-unit: calc(var(--base-font-size) * var(--base-line-height)); /* Our consistent vertical unit */
}
body {
font-family: "Inter", sans-serif;
font-size: var(--base-font-size);
line-height: var(--base-line-height);
}
h1 {
font-size: calc(var(--base-font-size) * 2.5); /* A larger heading font size */
line-height: 1.2; /* Adjusted line-height for larger text */
margin-bottom: var(--rhythm-unit); /* One rhythm unit below heading */
margin-top: calc(var(--rhythm-unit) * 2); /* Two rhythm units above heading */
}
p {
margin-bottom: var(--rhythm-unit);
}
ul, ol {
margin-bottom: var(--rhythm-unit);
padding-left: calc(var(--rhythm-unit) / 2); /* Half rhythm unit padding */
}