Achieve visual consistency and improved readability by establishing a strong vertical rhythm. Start with a base line-height and ensure all vertical spacing (margins, paddings) are multiples of that base. This creates a predictable flow, guiding the user's eye naturally.
:root {
--base-font-size: 1rem; /* 16px */
--base-line-height: 1.5; /* Multiplier for font-size, resulting in 24px for 16px font */
--rhythm-unit: calc(var(--base-font-size) * var(--base-line-height)); /* Defines 24px as our fundamental vertical unit */
}
body {
font-family: "Inter", sans-serif;
font-size: var(--base-font-size);
line-height: var(--base-line-height);
}
h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure {
margin-top: var(--rhythm-unit);
margin-bottom: var(--rhythm-unit);
}
/* Adjust top margin for the very first block on a page, or after non-text elements */
h1:first-child,
p:first-child,
.some-container > p:first-child {
margin-top: 0;
}
/* Example: Use multiples of the rhythm unit for larger headings */
h2 {
font-size: 2rem; /* e.g., 32px */
margin-top: calc(var(--rhythm-unit) * 2); /* Double rhythm unit above h2 */
margin-bottom: var(--rhythm-unit);
}
/* Smaller elements can use fractions of the rhythm unit */
.caption {
font-size: 0.875rem; /* 14px */
line-height: var(--base-line-height); /* Maintains same effective line-height in px as base */
margin-top: calc(var(--rhythm-unit) / 2);
margin-bottom: calc(var(--rhythm-unit) / 2);
}