Free Font Spacing Checker — WCAG Text Spacing Compliance

WCAG 1.4.12 (Text Spacing) is one of the most commonly failed accessibility criteria — and one of the easiest to fix once you understand it. The requirement is straightforward: your website must not lose content or functionality when users increase text spacing to specific minimum values. Yet many sites break badly when spacing is adjusted, with text overflowing containers, overlapping other elements, or becoming hidden entirely.

Our free spacing checker tests your site's CSS against WCAG 1.4.12 requirements. See exactly which elements fail when text spacing is increased, what the required minimum values are, and how to fix each issue. No signup, no limits, runs entirely in your browser.

WCAG 1.4.12 Text Spacing Requirements

The criterion specifies four text spacing properties that users must be able to adjust without content loss:

Property	CSS Property	Minimum Value	Example at 16px font
Line height	line-height	1.5x font size	24px line-height
Paragraph spacing	margin-bottom	2x font size	32px margin after paragraphs
Letter spacing	letter-spacing	0.12x font size	1.92px letter-spacing
Word spacing	word-spacing	0.16x font size	2.56px word-spacing

An important distinction: WCAG 1.4.12 does not require that your site uses these spacing values by default. It requires that your site does not break when users apply these values through browser extensions, custom stylesheets, or accessibility tools. The test is: apply all four values simultaneously and check that no content is lost, clipped, or overlapping.

The Four Spacing Properties Explained

Line height (line-height: 1.5): The vertical space between lines of text within a paragraph. This is the most impactful property for readability. Tight line height (1.0-1.2) makes lines blur together, causing readers to lose their place. A 1.5 minimum gives comfortable breathing room between lines. Most well-designed sites already meet this — the typical body text line-height is 1.5 to 1.8.

Paragraph spacing (margin-bottom: 2em): The space between consecutive paragraphs. This creates clear visual separation between blocks of content. Without adequate paragraph spacing, text looks like an unbroken wall, making it harder to identify where one thought ends and another begins. The 2x requirement means the gap between paragraphs should be at least twice the font size.

Letter spacing (letter-spacing: 0.12em): The horizontal space between individual characters. This primarily helps people with dyslexia who struggle with letters that appear to crowd or swap positions. Increased letter spacing makes each character more distinct and reduces visual confusion between similar letterforms like b/d, p/q, and m/rn.

Word spacing (word-spacing: 0.16em): The horizontal space between words. Wider word spacing helps readers distinguish word boundaries, which is especially important for people with cognitive disabilities and reading difficulties. It also improves readability for everyone when text is set in all-caps or uses a condensed font.

Sell Custom Apparel — We Handle Printing & Free Shipping

Why Text Spacing Matters for Readability

Text spacing is not a niche accessibility concern — it affects a large portion of the population:

• Dyslexia: Affects 5-10% of the population. Increased spacing is one of the most effective accommodations, reducing reading errors and improving comprehension speed. The British Dyslexia Association specifically recommends increased line spacing and letter spacing.
• Low vision: Affects over 12 million Americans over age 40. When text is magnified, tight spacing causes overlap and makes characters indistinguishable. Adequate spacing maintains readability at all zoom levels.
• Cognitive disabilities: Affects approximately 1 in 4 adults. Clear text spacing reduces cognitive load by making the text structure more obvious — paragraph breaks, word boundaries, and line tracking all become easier with appropriate spacing.
• Aging population: Vision and cognitive processing change with age. Text that a 25-year-old reads effortlessly may be difficult for a 65-year-old with the same visual acuity, simply because processing speed decreases. Spacing provides compensation.

Beyond accessibility, good text spacing improves readability for everyone. Studies consistently show that body text with a line-height of 1.5 is read faster and with better comprehension than text at 1.0 or 1.2 — regardless of the reader's abilities.

How to Fix Common Spacing Issues

Most WCAG 1.4.12 failures come from a few common CSS patterns:

• Fixed-height containers: Setting an exact height on text containers (height: 200px) causes text to overflow or get clipped when spacing increases. Fix: use min-height instead of height, or remove the height property entirely and let the container grow with its content.
• overflow: hidden on text areas: This hides text that overflows its container — exactly what happens when spacing increases. Fix: remove overflow: hidden from text containers, or use overflow: visible (the default).
• Absolute positioning of text: Text with position: absolute does not push other elements down when it grows. Fix: use relative positioning and normal document flow for text content whenever possible.
• Inline styles overriding user styles: Using !important on spacing properties prevents users from overriding them. Fix: avoid !important on line-height, letter-spacing, word-spacing, and paragraph margins.
• Fixed-size buttons with text: Buttons with fixed width and height clip text when spacing increases. Fix: use padding instead of fixed dimensions, and set min-width/min-height if needed.

The testing process: apply all four WCAG spacing values at once using your browser's developer tools or a text spacing bookmarklet. Then scroll through every page and check for cut-off text, overlapping elements, hidden content, or broken layouts. Our checker automates this process.

Frequently Asked Questions

What are the WCAG 1.4.12 text spacing requirements?

WCAG 1.4.12 (Text Spacing) requires that no content or functionality is lost when users adjust text spacing to these minimum values: line height (line spacing) of at least 1.5 times the font size, paragraph spacing of at least 2 times the font size, letter spacing (tracking) of at least 0.12 times the font size, and word spacing of at least 0.16 times the font size. The key point: your content must not break, overlap, or become hidden when users apply these spacing values.

Why do some people need increased text spacing?

People with dyslexia, low vision, and certain cognitive disabilities find text significantly easier to read when spacing is increased. Crowded text where letters and lines are tightly packed creates a visual noise effect that makes reading exhausting or impossible for some users. Increased line height reduces line-tracking errors (losing your place between lines), wider letter spacing helps distinguish similar characters, and paragraph spacing creates clear visual breaks between blocks of content.

How do I fix text spacing issues on my website?

The fix is usually CSS-based. Set line-height to at least 1.5 on body text. Use relative units (em or rem) for letter-spacing and word-spacing so they scale with font size. Ensure containers use flexible heights (min-height or auto) rather than fixed heights that clip content when spacing increases. Avoid overflow:hidden on text containers. Test by applying the WCAG spacing values via browser developer tools or a bookmarklet and checking that no text overlaps, gets cut off, or becomes unreadable.