CMYK ↔ RGB ↔ HEX Color Converter
About Text Baseline Calculator
The Capsize & Text Baseline Grid Alignment Calculator measures font metrics (cap-height, x-height, baseline, ascent, descent) and generates CSS negative margin and padding overrides to align text perfectly onto 4px/8px baseline grids without whitespace drift.
How to Use Text Baseline Calculator
Step 1
Select a font from the preset library or upload a custom font file.
Step 2
Set target font size and line height.
Step 3
Review the computed cap-height and baseline alignment guide lines.
Step 4
Click "Copy CSS Baseline Trim".
Practical Use Cases for Text Baseline Calculator
Snapping Typography to 4px/8px Baseline Grids (Capsize)
Eliminate unwanted invisible top and bottom font padding so buttons, badges, and heading containers snap mathematically to pixel grids.
Centering Text Optical Baselines inside Buttons & Icons
Calculate exact vertical offset trims so text labels align with adjacent icon centers without manual nudging.
Input & Output Examples
Trimming Inter Cap-Height Leading
Font: `Inter`, Size: `16px`, Line Height: `24px`
`::before { content: ""; display: table; margin-bottom: -0.3125em; }\n::after { content: ""; display: table; margin-top: -0.3125em; }`Key Features & Performance
- ✓Built-in metric tables for 50+ popular web fonts (Inter, Roboto, Poppins, Montserrat, Open Sans, etc.).
- ✓Custom font metric parser: upload any `.woff2` / `.ttf` to calculate exact OpenType `unitsPerEm`, `ascent`, `descent`, and `capHeight`.
- ✓Outputs: Modern `text-box-trim` / `text-box-edge` CSS and cross-browser pseudo-element margin trims (Capsize method).
- ✓100% Client-Side OpenType binary parser.
- ✓1-Click Copy CSS trimming styles.
Key Terminology & Definitions
Cap Height
The height of a capital letter above the baseline for a particular typeface, excluding ascenders.
CSS `text-box-trim`
A modern CSS property that trims leading and half-leading space from the top and bottom of text boxes.