# Improve text readability with CSS text-wrap

URL: https://theosoti.com/short/balanced-and-pretty-texts/
Published: 2025-03-26
Author: Theo Soti
Tags: CSS, modern CSS, CSS typography, CSS tip


> Say goodbye to awkward text wrapping! Use text-wrap: balance; for even lines and text-wrap: pretty; for better spacing.

## No more awkward text wrapping. Let CSS handle it beautifully.

CSS gives us two new ways to make typography more visually pleasing:

- text-wrap: balance;
- text-wrap: pretty;

## What’s the difference?

1 - text-wrap: balance;
It makes sure each line has a similar length, preventing one-word last lines or uneven spacing.
Perfect for headlines or short text blocks.

2 - text-wrap: pretty;
It optimizes letter and word spacing to create a more natural and visually appealing text flow.
Great for longer paragraphs where readability is key.

## Why should you care?

- No more weird line breaks.
- More control over how text is displayed.
- Better readability without extra HTML or JS.

Browser support is already at ~88%.
It’s not perfect, but since unsupported browsers just ignore it, there’s no downside.

Simple CSS tricks make a huge difference.

```css
.balanced {
  text-wrap: balance;
}

.pretty {
  text-wrap: pretty;
}
```

Full code available here: https://codepen.io/theosoti/pen/VYwBRBK

`text-wrap: balance` works best for short headings, while `text-wrap: pretty` improves long paragraphs by reducing awkward line endings. Choosing the mode per content type creates cleaner rhythm without manual line breaks.

`text-wrap: balance` works best on short headings, while `text-wrap: pretty` improves long paragraphs by reducing awkward endings. Using each mode intentionally gives cleaner rhythm across content types.

Use this as a readability tool, not only a visual effect. The best result is when style improves scanning speed without adding cognitive load.

For teams, `text-wrap: balance` is easiest to maintain when it starts in one documented example before broader reuse. This keeps implementation predictable and prevents style drift as the codebase grows.

---

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!