How to Center Align Text Like a Professional [Typography]

Learn how to center align text like a professional typographer, and why you generally shouldn’t center align bigger blocks of text like paragraphs if you care about your users’ reading experience.

Center aligning text is more about form than it’s about function. Centering text is not necessary to make text easier to read (more like the opposite). Centering text is one of many presentational choices in typography that absolutely can make your text more interesting from a visual point of view if you do it right.

Typography has a functional purpose, which is to make text easier to read. If you on top of that can make text faster to read also, that’s even better. Everything else, such as “making things look pretty” (aesthetics) or interesting are welcomed side-effects of good typography — but it’s rarely the main purpose.

Unfortunately, most use center-alignment too much, which instantly takes away its power, and hurts readability.

How to not center align

Take a look at the following center-aligned paragraph, and ask yourself if you’d like to read an entire article or book like this:

Text is the most prevalent user interface on the web. Text is everywhere. Around 95% of the web is text. Even picture-based platforms like Instagram and Pinterest, still heavily rely on their text UI and typography to function as user-friendly products. Typography is what we do with our text to make it easier to digest, quick to scan, and persuasive.

Now imagine an entire page formatted in that style. No thanks, right?

Not only does it look bad, visually, but it’s also hard to read because the center alignment causes inconsistent unevenness on both the left and the right edge, which forces the reader to re-adjust their eyes position on each new line.

It’s not just annoying to read this way, it requires more effort and takes up more of your users’ time, for no good reason.

Don’t fatigue your readers

Consider this: you’re reading this because you’re interested in learning about typography. Your level of motivation to get through the hideously formatted text block you saw earlier cannot be compared to the average reader.

Most of your readers don’t even know what typography is, nor do they care. How much tolerance and patience do you think they have for bad typography? As close to zero as you can imagine. This is not about whether people consciously think about the presentation and style of your content (most don’t). It’s about how your typography affects them at a subconscious and emotional level.

Emotion is one of the driving forces behind decision-making, so it’s pretty important to understand what triggers it.

Anything that makes text harder to read (such as center-aligned text) will fatigue your readers faster, and that’s the last thing you want since many who visit your web pages are already looking for a way out. Don’t make that decision easier for them, by carelessly center aligning huge chunks of text.

Design has a huge influence on people’s psychology which is why companies spend billions on great design every year — including typography — that persuades users to spend money on their products and services.

When to center align text

If you follow this basic recipe for when and when not to center align text, you’re going to be fine:

• Don’t center align paragraphs or any big blocks of text
• Centered text is acceptable for short titles or phrases
• If in doubt, don’t center align your text

Re-read those 3 bullet points a couple of times, and chances are that you will remember them the next time you’re formatting your text.

Don’t fall for the symmetry fallacy

Most people know that symmetry is one of the elements that make things or people attractive. If you’re center aligning a single line of text in a document, it will appear symmetrical, because there’s an equal amount of space on the left and right side of the text:

The center-aligned text above doesn’t look bad huh? It’s easy to read because it’s one line on bigger screens (2 lines on smaller screens). It easily stands out, because it’s the only center-aligned text in this section.

Contrast is one of many ways to make text more appealing.

However as soon as you’re dealing with multiple lines of text, as you saw earlier, center alignment gets messy and unpredictable, fast.

Responsive text alignment

Watch out for the responsive typography trap. Your center-aligned text might look great on one layout, but due to the limited screen space on smartphones, the unpredictable line break can cause all types of readability issues, depending on the screen size of the device your content is viewed on.

Consider the following quote (one of my favorites):

It looks great on desktop/big screens because it fits on a single line. Even if it’s presented on two lines, it will work, as long as the line break occurs somewhere in the middle, such as this:

That looks decent, huh? That’s because it’s short and symmetric.

Unfortunately, this manual approach is not only time consuming, but it also renders unpredictable results in responsive design (multiple screen sizes). Depending on how long your line(s) are, and how many characters each word has, you can get some unfortunate results if you blindly center align text.

Responsive CSS utility classes to the rescue

A solid way to work around center alignment issues is to use utility/helper classes (in CSS) to adjust text alignment depending on the screen size. Center aligned text tends to work best when you have plenty of room for it (whitespace), but not so well on small screens (phones, especially).

So let’s say you have a quote that looks awesome when center-aligned on big screens, but you want it to be left-aligned on small screens. Here’s one way to solve it, with a CSS utility class:

/* lg is a shorthand for large screens */
@media (min-width: 992px) {
  .lg\:text-center {
    text-align: center;
  }
}

Now you can add this utility class on any text element you want to center align at screen sizes with a minimum width of 992px, e.g.:

<p class="lg:text-center">
  <strong
    >This text is center-aligned on screen widths from 992px and up.
  </strong>
</p>

Try resizing your laptop/desktop browser window to see it in action:

CSS utility classes can be reused anywhere in your projects (I’m a big fan).

Why does so many center-align their texts?

If it’s so obvious that excessive center alignment is bad user experience design (UX), why do we see so many websites doing it, and even in print work?

I can’t read minds but suspect it’s a result of:

• people using templates & themes by developers who can’t design
• people using templates & themes by designers who suck at typography
• people incorrectly using templates & themes that have good typography

It’s a combination of many things.

Tragically, typography is often an afterthought in design, even among professional writers (who of all, should know better). I’ve seen it first hand, many times, and chances are, that so have you.

Some UI designers don’t even consider typography a key part of their work, even if they work with text every day. I’ve seen otherwise good UI designers, who decided that center-aligning every text element on a landing page was a good idea, because “it looked good”.

While looks are somewhat subjective, readability isn’t. Center-aligned text is harder to read than left-aligned (or right-aligned, in some cultures).

Now imagine if some of these designers decide to make WordPress themes, which end up getting used by 1000s if not millions of WordPress users. It‘s not hard to imagine how the overuse of center alignment becomes a wide-spread problem.

On the other hand, a skilled UI designer who understands good typography, and applies objective typographic principles in their work, cannot control how regular people use their typographic templates in the wild. It doesn’t take much ignorance to ruin an otherwise good baseline.

The blame cannot be put on one entity, we’re all responsible. This is why I always say that everyone who works with text should learn basic typography skills (which means, almost everyone).

Wrapping up

Huge chunks of center-aligned text are not aesthetically pleasing. It makes your text stand out for the wrong reasons, and it certainly doesn’t encourage your readers to invest more of their valuable time on your platform.

You don’t need to dedicate your life to typesetting, but learning a handful of timeless typographic principles, will massively improve your ability to communicate your message better. And one of those timeless principles is:

Good typography benefits everyone.