A typography analyzer evaluates whether your text settings follow web readability best practices. Enter your font size, line height, line length, and colors to receive a scored breakdown with WCAG contrast check and a live preview.
Typography Settings
How We Score Typography
- Font Size (20pts) — 16-18px optimal for body; below 14px fails
- Line Height (20pts) — 1.4-1.6 ideal; below 1.2 or above 2.0 fails
- Line Length (20pts) — 45-75 chars/line; below 30 or above 90 fails
- Letter Spacing (20pts) — 0 to 0.02em ideal for body text
- Contrast Ratio (20pts) — WCAG AA requires 4.5:1
Live Preview
The quick brown fox jumps over the lazy dog. Good typography creates a comfortable reading rhythm that allows the eye to glide through text without effort. This sample paragraph shows how your settings affect real body text readability.
Score Breakdown
How to Use the Typography Analyzer
Good typography settings are invisible when right and obvious when wrong. This analyzer checks your settings against established readability research and WCAG accessibility standards to help you build text that's comfortable to read on any screen.
Step 1: Enter Your Settings
Enter the CSS values you're using for body text: font size in pixels, line height as a unitless ratio (e.g. 1.5, not 24px), paragraph width in pixels, letter spacing in em units, the font family name, and your text and background colors. The tool estimates characters per line from width and font size.
Step 2: See the Live Preview
The preview panel applies your settings to a sample paragraph in real time. This is the fastest way to see how your combination feels — if the text looks cramped, too airy, or hard to read, the analyzer will tell you why.
Step 3: Read the Scored Dimensions
Each of the five dimensions gets a PASS, WARN, or FAIL badge with the exact score. The overall gauge summarizes readiness. Common issues: 15px font size (warn for desktop, fine for mobile), 1.3 line height on long paragraphs, 800px wide single-column text blocks (too wide — aim for max 680px), and low contrast like light gray text on white.
Reading the WCAG Contrast Score
Contrast ratio is calculated from the relative luminance of your text and background colors using the W3C WCAG 2.1 formula. A ratio of 4.5:1 meets WCAG AA for normal text (the legal minimum for most accessibility standards). A ratio of 7:1 meets AAA (recommended for accessibility-focused products). Common traps: medium gray (#6b7280) on white (#ffffff) scores only 3.15:1 — failing AA for body text.
FAQ
Is the Typography Analyzer free?
Yes, completely free with no account required. All analysis runs in your browser.
What is the ideal font size for body text?
Web typography best practices recommend 16-18px for body text. Below 14px causes eye strain for most readers. Above 22px starts to feel like large-print. Mobile content should use at least 16px to avoid iOS auto-zoom.
What is the optimal line height for readability?
A line height of 1.4-1.6 (unitless multiplier) is optimal for body text. Below 1.2 makes lines feel cramped and hard to track. Above 2.0 creates too much vertical space, making the eye lose its place between lines.
How many characters per line is ideal?
Research by Robert Bringhurst and other typographers suggests 45-75 characters per line (CPL) for optimal readability. Below 30 CPL feels choppy with too many line breaks. Above 90 CPL tires the eye tracking back to the start of each line.
What WCAG contrast ratio do I need?
WCAG AA requires 4.5:1 contrast ratio for normal text and 3:1 for large text (18px+ or 14px+ bold). WCAG AAA requires 7:1 for normal text. Most accessibility audits check for AA compliance at minimum.
What does letter spacing affect in typography?
Letter spacing (tracking) affects readability and tone. For body text, 0 to 0.02em is the safe range. Negative letter spacing reduces readability. Values above 0.1em start to look like deliberate stylistic choices (often seen in headings or UI labels) rather than readable body text.