Text Spacing

In brief

People with dyslexia or low vision often change the spacing of text to read it: more space between lines, letters, words and paragraphs. If the page clips the text, or lets it overlap when they do that, the page becomes unreadable.

This criterion requires that no content or functionality is lost when the user sets line height to 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times the font size. It does not require authors to use these values, only to let the content survive them.

What does it cover?

• Line height: At least 1.5 times the font size must not break the layout.
• Paragraph spacing: At least 2 times the font size after paragraphs.
• Letter spacing: 0.12 times the font size.
• Word spacing: 0.16 times the font size.
• How it is tested: A user style or bookmarklet applies all four at once. Text must not be cut off, overlap, or disappear, and controls must keep working.
• Languages and scripts: It applies to scripts that use these properties. Where a script does not use one of them, that property is not required.
• Out of scope: Resizing the text itself is 1.4.4. Reflow is 1.4.10.

Who does it affect?

People with dyslexia and other reading differences. People with low vision who adjust spacing. People who use a browser extension or a user style sheet to change text. Anyone with a cognitive difference who reads better with wider spacing.

In the EAA and EN 301 549

The European Accessibility Act (Directive (EU) 2019/882) applies to in-scope products and services placed on the market after 28 June 2025. Recital 47 names four principles for websites and mobile applications: perceivable, operable, understandable and robust. Text that survives user spacing changes is part of "perceivable".

The technical counterpart is the standard EN 301 549, which incorporates WCAG 1.4.12 by reference and turns it into separate clauses for each kind of ICT.

Whether and how the criterion applies to non-web documents is stated in clause 10 of the standard. Clause numbers follow the "9. + WCAG number" pattern of EN 301 549. In V3.2.1 the software clause is divided into further subclauses for open and closed functionality. Check the exact numbers in the standard when you cite them.

Standard version: EN 301 549 V4.1.1 (September 2026) is based on WCAG 2.2 and is the first version prepared specifically for the EAA. It has not yet been cited in the Official Journal of the European Union, so for now it is best treated as a voluntary technical route to the EAA's requirements. Once cited, it will give a presumption of conformity. The text of criterion 1.4.12 is the same in WCAG 2.1 and 2.2. It is a Level AA criterion.

A note on EAA scope: Article 2(4) of the Directive excludes certain content from the requirements, for example office file formats published before 28 June 2025 and archives that are not updated after that date. Content you publish or change after that date is not covered by these exclusions.

Directive (EU) 2019/882, EUR-Lex, opens in a new tab

Code examples for the web

1. Do not fix the height of text boxes

A fixed height cuts off text as soon as the line height grows.

.card { height: 100px; overflow: hidden; }

.card { min-height: 100px; }

2. Do not fix the line height in pixels

A line height in pixels stays the same when the user changes the font size or spacing in their style sheet. A unitless value scales.

p { line-height: 18px !important; }

p { line-height: 1.5; }

3. Avoid clipping in buttons and labels

Fixed widths and no-wrap labels cut text when letters and words get wider.

.tag { width: 80px; white-space: nowrap; overflow: hidden; }

.tag { min-width: 5rem; padding-inline: 0.5rem; }

4. Let navigation wrap

A one-line menu with a fixed height overlaps what follows when its words widen.

.nav { height: 40px; display: flex; flex-wrap: nowrap; }

.nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }

5. Do not use !important on spacing

When your CSS uses !important on these properties, the user style sheet cannot override it.

body { letter-spacing: 0 !important; word-spacing: 0 !important; }

body { letter-spacing: normal; word-spacing: normal; }

6. Test with the four values

Use this style in the developer tools to see what breaks.

/* No testing with spacing overrides */

* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }

Code examples for mobile

Native apps rarely let users override spacing directly, but the same defensive rule helps with large text: let containers grow and do not clip text.

iOS (SwiftUI)

import SwiftUI

struct TagLabel: View {
    let title: String

    var body: some View {
        Text(title)
            .font(.callout)
            // Avoid: .frame(width: 80, height: 24) with .lineLimit(1) and clipping
            .lineSpacing(4)                       // extra line spacing is allowed
            .padding(.horizontal, 8)
            .padding(.vertical, 4)
            .fixedSize(horizontal: false, vertical: true) // grows with its text
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun TagLabel(title: String) {
    Text(
        text = title,
        // Avoid: Modifier.height(24.dp) with maxLines = 1 and clipping
        modifier = Modifier
            .heightIn(min = 24.dp)
            .padding(horizontal = 8.dp, vertical = 4.dp),
        lineHeight = 22.sp,       // set a comfortable line height instead of tight spacing
        letterSpacing = 0.5.sp
    )
}

How to test

• Apply the four values: Use a bookmarklet, browser extension or developer tools style to set line height 1.5, paragraph spacing 2, letter spacing 0.12em and word spacing 0.16em.
• Look for loss: Is any text cut off, hidden, or overlapping other text? Do any controls lose their label?
• Check key components: Navigation, buttons, tabs, cards, form labels, tooltips and tables are the most likely to break.
• Check the code: Search for fixed heights, overflow: hidden, nowrap and !important on spacing.
• Test each template: Do it on the home page, an article, a form and a checkout.
• Check mobile: Set the largest text size. Does the layout grow instead of clipping?
• Use a checker as a starting point: Automated tools cannot apply and judge the spacing overrides well. A person should test.

Common mistakes

• Fixed-height cards and banners: The usual cause of clipped text.
• Fixed-width buttons: Longer letter and word spacing pushes text out.
• overflow: hidden on text containers: Hides the overflow instead of letting the box grow.
• !important on spacing properties: It blocks the user's own style sheet.
• Line height in pixels: It does not scale with the text.
• Absolutely positioned text: Text placed at fixed coordinates overlaps when its size changes.
• Tooltips and menus that clip: Popups need to resize with their text.
• Testing only body copy: Navigation and form labels break first.

Sources

• Understanding SC 1.4.12: Text Spacing (W3C), opens in a new tab
• F104: Failure of SC 1.4.12 due to clipped or overlapped content when text spacing is adjusted (W3C), opens in a new tab
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), opens in a new tab
• EN 301 549 V4.1.1 (ETSI), opens in a new tab
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), opens in a new tab

Standard version: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official texts of the European Accessibility Act (Directive (EU) 2019/882) and EN 301 549.