BlogPodcastAbout💌 Tiny Improvements

Don't center align paragraph text

Stop using centered text. It's bad for usability, accessibility, and eye scanning -- and nobody anywhere wants to read like that.

This is an experimental post, meant to demonstrate to you the topic we're discussing. I'd love to hear what you think about it. Drop me a line if you find this compelling - I'm hoping to create more like it!

This is -- without exception -- my biggest design-related pet peeve. You've probably come across it yourself from time to time, and if you're lucky, it's not something you noticed. Centering text on a web site, email, or flyer is an easy way to make it appear like a designer's spin has been put on a document. It's an easy change to make in most editors, and in many cases it's probably done without a second thought.

I'll cut to the chase: center-aligning text is really bad in most cases. From a young age, we're trained to read text by starting at the beginning of the line and moving our eyes across the page to the end of the line. From there, it's a relatively low-effort thing to move your eyes back to the beginning of the next line. That all changes when text is centered, since the start of each line is aligned inconsistently. It takes more effort to find the beginning of the next line, to make sure you've only moved down one line, and to continue reading.

Three great reasons you shouldn't center-align text:

  1. A ragged leading-edge makes it harder to move your eyes to the next line of text
  2. People with dyslexia may find centered text challenging to read.
  3. Lists (like this one) become disorienting to read, and harder to scan

The British Dyslexia Association provides a dyslexia-friendly style guide, which calls out a simple rule for text:

Left align text, without justification.

As a designer, this is such an easy win. As a developer, it's often as easy as:

/* change this */
.some-style-rule {
text-align: center;
/* this! */
.some-style-rule {
text-align: initial;

When you can use centered-text

Generally speaking, if you're certain that your text will fit on one line, it may be okay to center it. This generally applies to page titles, captions on pictures, and things of that nature. Even then, generally speaking my guidance is to avoid it. Like many other things in design, if there's not a good reason to do it... you're better without.


If you're working on a design that relies on centered text, consider other options. If you come across a big blob of centered text in your workplace, or out in the world somewhere, please feel free to use this post as a demo.

Mike Bifulco headshot

Subscribe to Tiny Improvements

Learn about designing & building great products for the web, and my philosophy for living a life you love in an ever-changing world.

    Typically once a week, straight from me to you. 😘 Unsubscribe anytime.

    Get in touch to → Sponsor Tiny Improvements

    © 2019-2023 Mike Bifulco

    Get in touch to → Sponsor Tiny Improvements

    Disclaimer: 👋🏽 Hi there. I work as a co-founder & CTO at Craftwork. These are my opinions, and not necessarily the views of my employer.
    Built with Next. Source code on GitHub.

    More great resources

    Articles about React.jsArticles about Remix.runArticles about Next.jsArticles for developersArticles for JavaScript developersArticles about CSSArticles about User Experience (UX)Articles about tools I useArticles about productivityBrowse all topics →