Legibility Ratio Calculator
Our typography & graphic design calculator teaches legibility ratio step by step. Perfect for students, teachers, and self-learners.
Reviewed by Daniel Agrici, Founder & Lead Developer
Formula
Legibility = (X-Height Score x 25%) + (Stroke Score x 20%) + (Counter Score x 20%) + (Contrast Score x 20%) + (Visual Angle Score x 15%)
The legibility ratio combines five normalized scores: x-height proportion (how large lowercase letters are), stroke width (thickness of character strokes), counter openness (interior white space), contrast ratio (text vs background), and visual angle (apparent size at viewing distance). Each factor is weighted by its relative importance to character recognition.
Worked Examples
Example 1: Web Body Text Legibility Assessment
Problem:A website uses Inter font at 16px with x-height ratio 0.52, stroke width 0.13, counter size 0.38, contrast ratio 8.5:1, viewed at 60cm. What is its legibility ratio?
Solution:X-height score: min(0.52/0.55, 1) x 100 = 94.5%\nStroke score: min(0.13/0.15, 1) x 100 = 86.7%\nCounter score: min(0.38/0.40, 1) x 100 = 95.0%\nContrast score: min(8.5/7, 1) x 100 = 100%\nVisual angle: atan((16 x 0.52 x 0.2646) / 600) x 3438 = 6.1 arcmin\nAngle score: min(6.1/15, 1) x 100 = 40.7%\n\nLegibility = 94.5*0.25 + 86.7*0.20 + 95*0.20 + 100*0.20 + 40.7*0.15\n= 23.6 + 17.3 + 19.0 + 20.0 + 6.1 = 86.0
Result:Legibility Ratio: 86.0/100 | Rating: Excellent | WCAG: AAA
Example 2: Signage Font Evaluation
Problem:A wayfinding sign uses Frutiger at 24px equivalent, x-height 0.50, stroke width 0.14, counter 0.40, contrast 12:1, viewed at 300cm. Evaluate legibility.
Solution:X-height score: min(0.50/0.55, 1) x 100 = 90.9%\nStroke score: min(0.14/0.15, 1) x 100 = 93.3%\nCounter score: min(0.40/0.40, 1) x 100 = 100%\nContrast score: min(12/7, 1) x 100 = 100%\nVisual angle: atan((24 x 0.50 x 0.2646) / 3000) x 3438 = 3.6 arcmin\nAngle score: min(3.6/15, 1) x 100 = 24.0%\n\nLegibility = 90.9*0.25 + 93.3*0.20 + 100*0.20 + 100*0.20 + 24*0.15\n= 22.7 + 18.7 + 20.0 + 20.0 + 3.6 = 85.0\n\nHowever, visual angle is very low - increase font size for 300cm viewing.
Result:Legibility Ratio: 85.0 | Font properties excellent but needs larger size for 300cm distance
Frequently Asked Questions
What is the legibility ratio in typography?
The legibility ratio is a composite metric that evaluates how easily individual characters can be distinguished and recognized in a typeface. It combines several measurable font characteristics including x-height proportion, stroke width, counter size (internal white space in letters), contrast ratio against the background, and the visual angle at the intended viewing distance. A higher legibility ratio indicates that characters are more easily identified, reducing reading errors and eye strain. This metric is particularly important for body text, wayfinding signage, user interfaces, and any context where readers must quickly and accurately process text information.
How does x-height affect legibility?
X-height is one of the strongest predictors of typeface legibility, especially at small sizes. The x-height is the height of lowercase letters without ascenders or descenders (like x, a, e, o) relative to the total cap height. Fonts with larger x-height ratios (0.50-0.55) are generally more legible because lowercase letters, which make up the majority of text, appear larger and more detailed at any given point size. Fonts like Verdana (designed for screen legibility) have notably large x-heights around 0.55, while traditional book fonts like Garamond have smaller x-heights around 0.43. The trade-off is that very large x-heights reduce the distinctiveness of ascenders and descenders, which can slightly decrease readability in long-form text.
What is stroke width and why does it matter for legibility?
Stroke width refers to the thickness of the lines that form each character, expressed as a ratio to the font size. Adequate stroke width is essential for legibility because thin strokes can become invisible at small sizes, low contrast, or on low-resolution displays. A stroke-width ratio of 0.10 to 0.15 provides good visibility across most conditions. Fonts with high stroke contrast (large difference between thick and thin strokes, common in Didone typefaces) can suffer from legibility problems because the thin strokes disappear under adverse conditions. Fonts designed for screens (like Roboto or Inter) typically use more uniform stroke widths to maintain legibility at all sizes and rendering conditions.
How does contrast ratio between text and background affect legibility?
The contrast ratio between text color and background color is one of the most impactful factors for legibility. WCAG defines minimum contrast ratios: 4.5:1 for normal text (AA level), 3:1 for large text (AA level), and 7:1 for normal text at the enhanced AAA level. Research shows that reading speed and accuracy improve significantly up to about 7:1 contrast ratio, with diminishing returns beyond that. Pure black on white (21:1) can actually cause visual fatigue during extended reading, which is why many design systems use slightly softened combinations like dark gray on off-white (around 12:1 to 15:1). Colored text combinations must also be checked, as blue on red may fail contrast requirements despite both being vivid colors.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy