Can You Adjust the Spacing? Text Flexibility

You're reading a website, but the text feels cramped. Lines are too close together, making it hard to track from one line to the next. Words blur together. You try increasing your browser's font size, but that only makes part of the problem worse - now the text is bigger but still squished together.

If you could just add a little more space between lines, between words, between letters... you'd be able to read comfortably. But when you try using a browser extension to adjust spacing, the layout breaks. Text gets cut off. Paragraphs overlap. Buttons disappear.

This scenario affects millions of people with dyslexia, low vision, and reading disabilities. The ability to customize text spacing dramatically improves readability - but only if websites are built to handle it.

The Standards

WCAG 1.4.12 Text Spacing - No loss of content or functionality occurs when users adjust text spacing up to these values:

Line height (line spacing) to at least 1.5 times the font size
Spacing following paragraphs to at least 2 times the font size
Letter spacing (tracking) to at least 0.12 times the font size
Word spacing to at least 0.16 times the font size

WCAG 1.4.5 Images of Text - If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text, except for customizable images or essential images like logos.

These standards work together: if you use images of text, users can't adjust spacing at all. But if you use real text styled with CSS, users can customize it to their needs.

Who Needs Text Spacing Adjustments?

People with dyslexia - Often read significantly faster with increased spacing. Research shows reading speed can improve by 20% or more with proper spacing.
People with low vision - May use larger fonts, which makes proper spacing even more critical to prevent text from becoming an unreadable blob.
People with cognitive disabilities - Extra space reduces cognitive load and makes text easier to process.
People with visual tracking problems - Need more line spacing to avoid losing their place when reading.
Older adults - Often benefit from increased spacing as vision and cognitive processing change with age.

What Breaks When Users Adjust Spacing

The standard doesn't require you to provide spacing controls - users apply custom stylesheets or browser extensions themselves. Your job is to make sure nothing breaks when they do.

Common problems:

Fixed Height Containers

Setting a container to a fixed height in pixels means it can't expand when text spacing increases:

/* Bad - text gets cut off */ .card { height: 200px; overflow: hidden; } /* Good - container grows with content */ .card { min-height: 200px; }

Absolute Positioning

Elements positioned with fixed pixel values can overlap when text expands:

/* Bad - can overlap expanded text */ .sidebar { position: absolute; top: 100px; right: 0; } /* Better - use flexible layouts */ .container { display: grid; grid-template-columns: 1fr 300px; gap: 2rem; }

Line-Height Set with !important

Using !important on text spacing properties prevents users from overriding them:

/* Bad - locks spacing, blocks user preferences */ p { line-height: 1.2 !important; } /* Good - allows user overrides */ p { line-height: 1.5; }

Overflow: Hidden

Hiding overflow means increased spacing causes text to disappear:

/* Bad - cuts off expanded text */ .box { height: 100px; overflow: hidden; } /* Good - scrolls or expands */ .box { max-height: 100px; overflow: auto; }

Building Spacing-Friendly Layouts

Use Relative Units

Set spacing using em or rem instead of pixels:

/* Font size is 16px */ p { font-size: 1rem; line-height: 1.5; /* 24px, scales with font */ margin-bottom: 2em; /* 32px, scales with font */ letter-spacing: 0.02em; word-spacing: 0.05em; }

Allow Containers to Grow

Use min-height instead of height, let flex and grid layouts adapt naturally:

.card { min-height: 200px; display: flex; flex-direction: column; } .card-content { flex: 1; /* Grows to fill available space */ }

Avoid Fixed Positioning Where Possible

Modern CSS layout tools (Flexbox, Grid) handle spacing changes better than absolute positioning.

Testing Text Spacing

The easiest way to test is using a browser extension or bookmarklet that applies the required spacing. The official WCAG Text Spacing Bookmarklet applies all four spacing requirements at once.

You can also manually test with custom CSS:

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

Apply this CSS and check:

Is all text still visible?
Do any containers clip or hide text?
Does text overlap other elements?
Do buttons and navigation still work?
Can you still complete all key tasks?

The Images of Text Problem

Now here's where text spacing and images of text connect: if you use images instead of real text, users can't adjust spacing at all. The spacing is baked into the image, fixed and unchangeable.

Why Images of Text Are Problematic

Can't adjust spacing - No way to increase line height, letter spacing, or word spacing
Don't scale well - Images become pixelated when zoomed, unlike text which stays crisp
Can't change colors - Users who need different color combinations are stuck with your choices
Can't be selected or copied - Text in images can't be highlighted, copied, or searched
Screen readers can't read them - Unless alt text is perfect (which it rarely is for long text)
Don't translate - Browser translation tools can't translate text in images
Larger file sizes - Images are bigger than equivalent text, slowing page load

Common Images of Text

Watch out for these:

Headings or quotes rendered as images for fancy fonts
Buttons with text baked into the image
Callout boxes or promotional banners
Social media graphics with text
Screenshots of text documents or slides
Infographics where text could be live HTML

When Images of Text Are Acceptable

The standard allows images of text when:

Logos and branding - Where the specific presentation is essential to identity
The image is customizable - If you provide controls to adjust the text in the image
Text is essential to the image - Like a historical document, photograph of a sign, or artwork

Note that "we want to use this fancy font" is NOT an exception. Modern CSS and web fonts can achieve almost any visual effect.

Using CSS Instead of Images

Modern CSS is incredibly powerful. Instead of creating images of text, use:

Web Fonts

@font-face { font-family: 'CustomFont'; src: url('customfont.woff2') format('woff2'); } h1 { font-family: 'CustomFont', sans-serif; font-size: 3em; color: #0056b3; }

Text Effects

.fancy-heading { font-size: 2.5em; background: linear-gradient(45deg, #FF6B6B, #4ECDC4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }

Custom Shapes and Layouts

CSS Grid, Flexbox, and even CSS shapes can create complex layouts without resorting to images.

Text Spacing in Drupal and WordPress

Both Drupal and WordPress rely on themes to handle layout flexibility. Most modern themes use responsive frameworks that handle text spacing reasonably well, but:

Drupal

Core themes (Olivero, Canvas) are built with flexibility in mind
Custom themes should use Drupal's responsive design patterns
Avoid hardcoded heights in layout templates
Test with text spacing adjustments during theme development

WordPress

Block themes (full site editing) generally handle spacing better than classic themes
Be cautious with page builders - they often create fixed-height containers
Test any custom CSS carefully
Avoid locking text properties with !important

For both platforms, the key is choosing well-built themes and testing thoroughly when customizing.

The Bottom Line

Text spacing and images of text are two sides of the same coin: user control over text presentation. Some people need to adjust spacing to read comfortably. This only works if you use real text styled with flexible CSS, not images with baked-in formatting.

Building spacing-friendly layouts isn't difficult - use relative units, allow containers to grow, avoid fixed heights and !important flags on spacing properties. Test with spacing adjustments to catch problems early.

And before you export that heading as a PNG because you want a fancy font, ask yourself: can I achieve this with CSS and web fonts instead? The answer is almost always yes - and the accessibility benefits are enormous.

Let your text breathe. Let users customize it to their needs. Use real, flexible text instead of rigid images. Your readers will thank you.