Media
Typography Scale Ratio Calculator Color Ratio Harmony Calculator Content to White Space Ratio Calculator Image Resolution Aspect Ratio Calculator Screen Aspect Ratio Calculator Video Compression Ratio Calculator Print Aspect Ratio Calculator Font Width to Height Ratio Calculator Pixel Ratio CalculatorDaily Life
Cold Brew Ratio Calculator Food Waste to Consumption Ratio Calculator Lawn Fertilizer Ratio Calculator Recipe Scaling Ratio Calculator Win Loss Ratio Calculator Paint Mixture Ratio Calculator Screen Time Ratio Calculator Work Life Balance Ratio CalculatorFont Width to Height Ratio Calculator
Measure any typeface's proportions with our free online font width to height ratio calculator. Enter a character's height and width to get the exact ratio and an instant classification — condensed, normal, or extended — essential for typography pairing, logo design, and readability analysis.
Calculate NowInteractive Font Width to Height Ratio Calculator
Font Proportion Results
How the Font Width to Height Ratio Calculator Works
Four steps to measure any typeface
Measure the Height
Using a screenshot, design tool, or font inspector, measure the cap height (flat top of capital H down to the baseline) or the x-height (top of lowercase x to baseline). Enter the value in pixels, points, or millimeters.
Measure the Width
Measure the width of a representative glyph — lowercase 'n' is the typographic standard reference, though 'H' or 'o' work too. Use the same unit as the height so the ratio is unit-independent.
Get Ratio and Classification
The calculator divides width by height and classifies the result: condensed faces sit below 0.55, normal text faces between 0.55 and 0.70, and extended faces above 0.70.
Apply to Your Design
Use the classification to pair fonts (condensed headlines with normal body text), check logo legibility at small sizes, or verify a variable font's width axis setting.
Font Width to Height Ratio Formulas
The math behind typeface proportions
Width-to-Height Ratio Formula
Both measurements must use the same unit. A 62 px wide 'n' with a 100 px cap height gives 62 ÷ 100 = 0.62 — a normal text proportion.
Simplified Ratio via GCD
For whole-number measurements, dividing by the greatest common divisor gives a clean ratio like 31:50. This form is handy when documenting type specs for a design system.
Advance Width vs Visual Width
Professional type designers distinguish advance width (glyph plus its side bearings, the space the character occupies in a line) from visual width (ink only). For classification purposes, advance width of 'n' is the standard — it reflects how the font actually sets in text, including its built-in spacing.
Learn more: Wikipedia's typeface article explains cap height, x-height, and the anatomy that determines these proportions.
Font Classification by Width-to-Height Ratio
Where common typefaces fall
| Classification | Ratio Range | Example Typefaces | Typical Use |
|---|---|---|---|
| Ultra-condensed | Below 0.45 | Anton, Oswald (tight) | Posters, headlines needing impact in narrow spaces |
| Condensed | 0.45 – 0.55 | Roboto Condensed, PT Sans Narrow | Headlines, data tables, space-constrained UI |
| Normal | 0.55 – 0.70 | Inter, Helvetica, Georgia | Body text, general reading |
| Extended | 0.70 – 0.85 | Wide Latin, Eurostile Extended | Display type, signage, tech branding |
| Ultra-extended | Above 0.85 | Specialty display faces | Logos, dramatic headlines |
Key Typography Measurements
Anatomy terms behind the numbers
| Term | Definition | Why It Matters |
|---|---|---|
| Cap height | Height of flat capital letters (H, E) above baseline | Standard height reference for display type |
| X-height | Height of lowercase x above baseline | Best predictor of small-size legibility |
| Em square | The design grid (often 1000 or 2048 units) | All glyph metrics are fractions of the em |
| Advance width | Glyph width including side bearings | Determines actual text density on the line |
| Side bearing | Space left/right of the glyph outline | Affects perceived width vs measured width |
Measuring Fonts With Free Tools
No guesswork — get exact numbers in minutes
Figma / Penpot
Type your reference glyphs at 200 px, outline the text, and read the bounding box dimensions from the properties panel. Subtract side bearings by measuring the visible ink if you want visual rather than advance width.
Browser DevTools
Render a test string in the browser, then use document.fonts metrics or measure a canvas-rendered glyph with measureText().width for the advance width at any size — divide by the font-size to normalize.
FontForge / BirdFont
Open the font file directly to read exact advance widths and vertical metrics from the font tables — the ground truth no screenshot can dispute. Look at the 'n' glyph's advance width and the OS/2 sCapHeight value.
Font Width to Height Ratio FAQs
Typography proportion questions, answered
Most text typefaces have a width-to-height ratio between 0.55 and 0.70 when measuring the 'n' advance width against cap height. Helvetica sits near 0.60, Inter around 0.62. Ratios in this band read comfortably in paragraphs because the letterforms are neither cramped nor sprawling.
Set the type at a large size, take a screenshot, and measure in an image editor. Cap height runs from the baseline to the flat top of 'H'; x-height runs from the baseline to the top of 'x'. In CSS, the ex unit equals the x-height of the current font, and many design tools (Figma, Illustrator) show these in their type inspectors.
Condensed faces (ratio below 0.55) fit more characters per line, letting headlines stay on one line at larger sizes. Their narrow proportions also create visual urgency and density that suits posters, sports branding, and news mastheads — contexts where impact matters more than long-form readability.
The terms overlap heavily. "Condensed" traditionally describes a separately drawn narrower cut of a family (e.g., Roboto Condensed), while "narrow" is sometimes used for the same idea. In variable fonts, both are controlled by the width axis (wdth), typically ranging from 75 (condensed) to 100 (normal) to 125 (expanded).
Yes. Extremes in either direction hurt long-form reading: ultra-condensed faces crowd letterforms together, while ultra-extended faces slow the eye with excessive white space inside words. The 0.55–0.70 band evolved precisely because it balances character distinctiveness with efficient word shapes.
Variable fonts expose width as a continuous axis, so one file can morph from condensed to extended. In CSS, font-stretch: 75% selects the condensed end and 125% the expanded end. Measure the ratio at your chosen setting with this calculator to document the exact proportion your design system uses.
Lowercase 'n' is the industry reference because its simple arch reveals the design's core width logic without the complications of round letters (which overshoot) or narrow ones like 'i' and 'l'. For all-caps display settings, use 'H' instead — its straight stems give the cleanest reading.
Why Font Proportions Matter in Design
Every typeface carries a personality written into its proportions. A condensed grotesque shouts; an extended geometric hums with techno-optimism; a normal old-style serif simply gets out of the way and lets you read. The width-to-height ratio is the single number that captures this character most directly — and this calculator makes it measurable instead of a matter of gut feeling.
In practice, the ratio drives three design decisions. First, font pairing: the classic headline/body contrast works best when the two faces differ clearly in width class — a condensed display face over normal body text creates hierarchy without color or size tricks. Second, space planning: knowing a face's ratio lets you predict line lengths and choose column widths before setting a word. Third, brand consistency: documenting the ratio in a design system (e.g., "headlines: Roboto Condensed, 0.52") keeps every touchpoint on-spec.
Readability research consistently shows that moderate proportions win for long text. The eye recognizes words by their overall shape (the "bouma"), and ratios in the 0.55–0.70 band preserve distinctive word silhouettes. Push much below 0.50 and letters start merging visually; push much above 0.80 and the eye must travel too far within each word, slowing reading measurably.
Finally, remember that the ratio is a starting point, not a verdict. Spacing, weight, x-height, and contrast all modulate how a width class feels. Use the calculator's classification to shortlist candidates, then proof them in situ — at real sizes, in real layouts, with real content. Numbers guide; eyes decide.