Typography & Web Conversions – Readability Checker
Use this interactive tool to evaluate how your typography choices (font size, line length, line height and contrast) support readability, user experience and conversions. Adjust the inputs, get a score from 0 to 100, and see concrete CSS suggestions you can paste into your stylesheet.
This is not a magic “conversion rate calculator”, but a practical companion that nudges your typography into proven, research-backed ranges for comfortable reading and clearer calls to action.
Typography & conversions checker
UX & CRO helperDesktop reading is usually most comfortable around 16–20px for body text.
For paragraphs, a line-height around 1.4–1.6 tends to read smoothly.
Most guidelines suggest 50–75 characters per line for body text.
Aim for at least 4.5:1 contrast for normal text; higher is better.
Simpler systems (1–2 fonts, consistent headings) usually outperform visually noisy ones.
Adjust the controls to approximate how your current pages are set up, then click “Evaluate”.
Readability & UX score
Not evaluated yet
Set your typography parameters and run the evaluation.
Example CSS based on your inputs
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.5;
max-width: 70ch;
margin: 0 auto;
}
Why typography matters for web conversions
Most visitors decide within seconds whether your page looks trustworthy, readable and worth their time. Typography is a big part of that decision: it influences how easily people can scan sections, understand your message and notice calls to action such as “Sign up” or “Add to cart”.
When typography is cramped, tiny or low-contrast, users have to work harder to read. That extra cognitive effort reduces attention, sabotages your carefully crafted copy and, ultimately, hurts conversions.
Key variables that influence readability and UX
- Font size: small text (e.g. 12–13px body copy) often leads to strain and skimming. Larger sizes give your message room to breathe.
- Line height (leading): too little line spacing makes paragraphs feel like bricks; too much breaks the flow.
- Line length: overly long lines make it hard for the eye to jump back to the start of the next line; very short lines feel choppy.
- Contrast: gray-on-light-gray body text may look “modern” but becomes illegible for many users and environments.
- Hierarchy and emphasis: clear headings and limited emphasis guide the eye; too many fonts, colors and styles create noise.
Healthy baseline for web typography
- Body font size: 16–20px (desktop), slightly larger for long-form or older audiences.
- Line height: around 1.4–1.6 for paragraphs.
- Line length: roughly 50–75 characters per line for body text.
- Contrast: at least 4.5:1 for normal text, higher for small text.
- Font system: 1–2 typefaces with a consistent scale for headings and buttons.
How the typography checker score is calculated
The tool converts your inputs into a readability score from 0 to 100. It is a heuristic score designed for everyday design and CRO decisions, not a lab-grade metric.
1. Font size contribution
The score is highest when the body font size is between 16 and 20px. Sizes below 14px or above 24px are penalised, as they tend to be harder to read in typical layouts.
2. Line-height contribution
Line-height values around 1.4–1.6 are rewarded. Distances much lower (e.g. 1.1) or much higher (e.g. 1.9) reduce the score because they either cram lines or separate them too much.
3. Line length contribution
The checker assumes that a comfortable reading column sits around 50–75 characters per line. If you go far below or above this range, the line-length component of the score decreases.
4. Contrast and hierarchy contributions
Higher contrast improves the score, especially between 4.5:1 and 12:1. The selected font style/hierarchy and use of emphasis further adjust the score: simple, disciplined systems score higher than chaotic ones.
Interpreting the score
- 80–100: Strong typography foundations. Focus on fine-tuning microcopy and layout.
- 60–79: Solid, with room for optimisation (typically font size or line length).
- 40–59: Usable but likely causing strain; prioritise adjustments shown in the recommendations.
- 0–39: High friction. Typographic issues are probably harming UX and conversions.
Use the score as a diagnostic tool: adjust a single variable at a time (for example line length), re-run the evaluation, and observe how the score and recommendations change.
Applying the recommendations in your CSS
When you are happy with the score and preview snippet, you can translate it into your design system. For example, a typical base setup might look like:
From there, define a clear scale for headings (e.g. 1.5×, 2×, 2.5× the body size), ensure buttons and form labels share the same typographic language, and keep testing on actual devices and users.