📐 Vertical Rhythm Tool

Establish consistent typographic rhythm with baseline grid & modular scale

Version 1.0.0 – Updated April 2025
?
The font size for body text. All other sizes are derived from this.
?
Unitless line height for body text. This defines the baseline grid unit.
?
Multiplier for heading sizes. Common ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth).

👁️ Live Preview

Heading 1 (H1)

Heading 2 (H2)

Heading 3 (H3)

Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Another paragraph to show rhythm. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

📋 CSS Code

:root { --base-font-size: 16px; --base-line-height: 1.5; --baseline: calc(var(--base-font-size) * var(--base-line-height)); } body { font-size: var(--base-font-size); line-height: var(--base-line-height); color: #2c3e50; background: #ffffff; } h1 { font-size: calc(var(--base-font-size) * 1.953125); line-height: calc(2 * var(--baseline)); margin: 0 0 var(--baseline) 0; }

Embed This Tool

Want to embed this vertical rhythm tool on your website? Use this code:

<iframe src="https://yoursite.com/vertical-rhythm-tool" width="100%" height="600" frameborder="0"></iframe>

📘 Vertical Rhythm Examples

📄 Body Text (16/1.5)

:root { --base-font-size: 16px; --base-line-height: 1.5; --baseline: 24px; } body { font: 16px/1.5 sans-serif; }

🔖 Headings (Perfect Fourth)

h1 { font-size: 2.441rem; line-height: 3.5rem; } h2 { font-size: 1.953rem; line-height: 3rem; } h3 { font-size: 1.563rem; line-height: 2.5rem; }

📏 Margin & Padding

p { margin: 0 0 var(--baseline) 0; } .component { padding: var(--baseline); }

🎯 Multiple Columns

.columns { column-gap: var(--baseline); column-rule: 1px solid #ddd; }

📖 Vertical Rhythm Tutorials

📏

What is Vertical Rhythm?

Learn how consistent vertical spacing improves readability and visual harmony.

Read Tutorial →
📐

Modular Scale & Typography

How to use musical ratios to size headings proportionally.

Read Tutorial →
⚡

Implementing Vertical Rhythm in CSS

Practical guide using CSS custom properties and calc().

Read Tutorial →

⚖️ Vertical Rhythm Tools Comparison

Feature Our Tool Tool A Tool B
Free & unlimited ✅ ✅ ❌ (limit)
Live preview with baseline grid ✅ ✅ ❌
Customizable base font size & line height ✅ ✅ ✅
Modular scale ratio selection ✅ (6 ratios) ✅ (3 ratios) ❌
Auto‑calculated heading sizes ✅ ✅ ✅
Color pickers (text & background) ✅ ✅ ❌
Download CSS file ✅ ❌ ✅
Client-side / private ✅ ❌ ✅

❓ Frequently Asked Questions

What is vertical rhythm? ▼

Vertical rhythm is a typographic concept where all vertical spacing (line heights, margins, paddings) aligns to a consistent baseline grid. This creates a harmonious reading experience.

How is the baseline calculated? ▼

The baseline unit = base font size × base line height. For example, 16px × 1.5 = 24px. All margins and heading line heights should be multiples of this value.

What modular scale should I choose? ▼

It depends on your design. Major Third (1.25) is a safe, subtle scale. Perfect Fourth (1.333) gives more contrast. Experiment with the preview to see what fits.

How do I use the generated CSS? ▼

Copy the CSS into your stylesheet. The code uses CSS custom properties for easy adjustments. The heading sizes and line heights are already calculated to fit the baseline grid.

📝 Version History

Version 1.0.0 – Initial release

April 13, 2025
  • 🚀 Base font size & line height controls
  • 📏 Baseline grid overlay with toggle
  • 🎛️ 6 modular scale ratios
  • 🎨 Text & background color pickers
  • 📝 Live preview with H1–H3 and paragraphs
  • 📋 CSS output with custom properties and calculated headings
  • 💾 Download CSS file

🧠 Why Vertical Rhythm Matters

Vertical rhythm creates a consistent, professional look. It guides the reader's eye and makes the page feel cohesive. By aligning all elements to a baseline grid, you avoid jarring jumps between different font sizes and spacing.

📐 Harmony

All spacing becomes a multiple of the baseline unit.

⚡ Efficiency

CSS custom properties make global changes easy.

🔍 Predictability

Developers and designers can trust the vertical grid.

🛠️ Recommended Typography Resources

Tools to master vertical rhythm

Modular Scale

Online scale calculator

Type Scale

Visual type scale tool

Google Fonts

Free font library

Better Web Type

Typography ebook