Baseline Grid Calculator
Snap a text line box to a repeating vertical rhythm and copy the CSS.
Online Tool
A baseline grid gives repeated lines a shared rhythm. Adjust the type size and spacing, then use the horizontal rules to see how the line boxes align.
.body-copy {
font-size: 16px;
line-height: 1.500; /* 24px baseline step */
}Tool Working Principle
The recommended line box is the smallest whole multiple of the grid step that is not shorter than the requested font-size × line-height. Dividing that line-box size by the font size produces a unitless CSS line-height.
Step-by-Step Usage Tutorial
- 1Enter the font size and desired unitless line-height.
- 2Choose a baseline grid step in pixels.
- 3Compare the snapped preview and copy the resulting CSS.
Frequently Asked Questions
Do I need an account to use Baseline Grid Calculator?+
No. Every tool on TypeTempo runs fully in the browser with no account, email, or API key.
Is my input text stored anywhere?+
Tool calculations use the text in your browser, and the app does not send that input to the TypeTempo application server. A preview may still request font files or other assets from an external provider; those requests do not include the text you entered.
Can I use the output commercially?+
You can use generated text and CSS in personal or commercial work. If a result depends on a named typeface or third-party asset, check that family's or asset's licence before using or distributing its files.
Which browsers are supported?+
The tools are designed for modern desktop and mobile browsers. Font rendering and individual CSS or Unicode features can vary, so check the specific result in the browsers and devices you support.
Will snapping always improve readability?+
No. The grid is a layout aid, not a reading-quality rule. If snapping makes lines too loose, reduce the grid step or use the desired line-height without snapping.