Vertical Rhythm Typography
Computes vertical rhythm in typography for visual harmony between paragraphs headings and elements.
—
Vertical Rhythm in Typography
Vertical rhythm means keeping the spacing between elements consistent. You get there by snapping every block on the page (paragraphs, headings, images, margins, padding) to multiples of a baseline that comes from the body line-height. The baseline is computed as baseline = font-size × line-height. So a 16 px body with line-height 1.5 gives you a 24 px baseline, and from there every vertical measurement should land on a multiple of 24 (24, 48, 72, 96…).
Robert Bringhurst made the idea well known in The Elements of Typographic Style, and Richard Rutter brought it to the web with “Compose to a Vertical Rhythm” (24ways 2006). Brent Jackson’s Compose tool put it into code in 2014. Tim Brown later pushed it toward modular scale typography. Google’s Material Design boiled the whole thing down to the 8 pt grid, where every margin, padding and component height is a multiple of 8 px, dropping to 4 px for fine-grained items.
Applications
You see it in editorial design (book interiors, long-form articles, magazines), in web design systems like Material, Carbon and Polaris, and in product UI, where steady spacing cuts visual noise and makes a page easier to scan. The same trick shows up in PDF reports, dashboards and marketing landing pages when the goal is a calm, professional look.
FAQ
Why does vertical rhythm matter? When spacing wanders, a page feels restless. Lining everything up to a baseline gives the eye predictable resting points, and reading flows more easily.
Should images snap to the baseline? When you can, yes. Resize the image or add padding so its height comes out to a multiple of the baseline. If that is not workable, push the leftover difference into the margin right after it.
4 pt or 8 pt grid? Material defaults to 8 pt. Drop to 4 pt for dense data tables and icons, where 8 pt would leave things looking too loose.
Related Tools
Baseline Grid Typography
Computes baseline grid size for perfect vertical alignment of body text typography.
Number of Reinforcement Layers
Calculate the number of geosynthetic reinforcement layers needed in a reinforced-soil wall or slope, N = H ÷ S_v, from the structure height H (m) and the vertical spacing between layers S_v (m). In a reinforced-soil structure, the geosynthetic layers (geogrid or geotextile) are installed horizontally between compacted soil lifts at regular vertical intervals. The total number of layers is simply the height divided by the spacing. The vertical spacing S_v is a crucial design decision: SMALLER spacing (more layers) better distributes stresses, allows weaker geosynthetics and gives a more homogeneous, stable reinforced mass, but increases installation operations (slower and costlier). LARGER spacing (fewer layers) builds faster but needs stronger geosynthetics and may allow localized deformations between layers (face bulging). Typically S_v ranges 0.3-0.8 m, often adopting multiples of the soil compaction lift thickness (0.15-0.20 m). This calculation is essential for the quantity take-off (total geosynthetic area = N × each layer's area) and budgeting, and defines the construction sequence. Enter the structure height and the vertical spacing.
Residential Septic Tank Size
Estimates septic tank useful volume by NBR 7229 from number of residents.
Building Population
Estimate a building's population, Pop = (area per floor × number of floors) ÷ density, from the usable area per floor (m²), the number of floors and the occupancy density (m² per person). The result, in people, is the total population to be served by the vertical transport — the starting point of elevator traffic analysis. Occupancy density varies with use: ~10 m²/person in dense offices, ~15-20 m²/person in standard offices, with specific values for hotels and residences. Compared with the elevators' handling capacity, it tells whether the system is adequate. Enter the area per floor, the number of floors and the density.
T-shirt Fabric Person Size cm
Estimates centimeters of fabric needed for a t-shirt from body height and width.
Cohen's h (Effect Size for Proportions)
Computes Cohen's h, the effect-size measure for the difference between two proportions. Comparing proportions directly is misleading, because the same arithmetic difference weighs differently near the middle (0.5) and near the ends (0 or 1). Cohen's h fixes this by applying the arcsine transformation, which stabilizes the variance, before measuring the distance. Usual convention: 0.2 is small, 0.5 medium and 0.8 large. Enter the two proportions (between 0 and 1).
The results provided by this tool are for general informational and educational purposes only and do not constitute professional, financial, medical, legal, tax or accounting advice. Always confirm important decisions with a qualified professional and official sources.