Text Alignment

Text Alignment

Once you get into design, you’ll discover there are rules, rules, rules! Once you understand the rules, you’ll become a disciple forever and agonize over every amateur PowerPoint gone “designy”. Oh, those fuzzy drop shadows, the bevel & emboss, the Papyrus, the inappropriate center alignment!!! Yes, how about that text? Yep, text alignment is not about making an artistic statement. Here’s how it goes:

Left-Aligned Text

Most of the time, left align rules. For bulk of text, it’s more legible and organized. It also lines up nicely with your margin. So, for paragraph text, this is preferred (with the option to use justified text).

Right-Aligned Text

Right aligned text is used in response to its place in a composition. Don’t let it free-float without purpose. It should align according to the grid of the layout used.

Center Alignment

This is where a lot of people go wrong. Center align text only when appropriate, but what the heck does that mean? So. wedding invitations, some headers perhaps, some sub header text. Never paragraphs, never disclaimers, never lists. NEVER!* Center-aligned text simply isn’t as legible, but for many, it seems more decorative.

Justified Text

Justified alignment, when do we use that? For newspaper columns, of course, you know, dinosaur 101. But, on the web? Disclaimers are usually justified when they become long enough. Also, columns are still justified when it feels appropriate for the sake of organization and alignment. Do not use justified text when the width of a column doesn’t accommodate the proper distribution of letters and instead draw out words to a ridiculous amount of letter spacing – it’s a balance between font-size, width of column, and bulk of text that need to have a nice fit. Justified text also looks more professional and are used in most legal documents and books. Grab a few random books from your bookshelf and take a look. Justified?

*Disclaimer: All Design rules are subject to be broken. Attempt at own risk.

Should a header match the sub header, or is it the other way around?

This is an okay section to center-align. Maybe it’s a blurb under a header about how amazing a certain promo is, a summary of all the things we want our customers to know.

Even if a header and sub header are center aligned, they should still be followed by a left-aligned paragraph text, (or possibly justified as explained above). Bulk text that don’t line up becomes messy and difficult to follow. All those jagged edges from varying width of center aligned text don’t serve as a good reference for your eyes to dart to and fro.


Lists – Organization is their main purpose

If you don’t agree, you might as well write all the list items in a long row of text and see if your brain can skip through the items at a glance with the same ease. The main idea is pretty simple – if the items line up, they are more legible by your brain. Which example below do you find easier to read? Be honest – your brain’s first response should not be overwritten by your need for “artistic” rebellion.

  • Oh my gosh!!!
  • This looks awful!
  • Are you talking about you or me?
  • All of us – Gosh!
  • They look fine next door.
  • What? Traitor!
  • Whatever, let’s move on…
  • Ah, I feel pretty!
  • You’re not alone dear.
  • Try not to look right or left. Shameful, tsk, tsk, tsk…
  • I know right? It’s an ugly world out there.
  • Some lines just can’t conform.
  • Rules rule!

•  Oh no, I’ve got a bullet point!

•  I know right? I don’t line up right. This is so embarrassing.

•  A bullet!!! Someone shoot me now! This is not a list item.

•  Something stinks. My money is on the bullet.

•  Can I order a couple of no-break-spaces please?

For those of you who live a code-free life, the differences above my not seem as obvious. The basic HTML tags used for lists are <ul>, <ol> and <li>. They stand for <ul> unordered list, or <ol> ordered list (with numbers), containing the <li> list items. So the above three examples look like this in code. (Note that the last option is not a list at all but just a paragraph with a bullet character (&bull;).

<ul align=”center”>
<li>Oh my gosh!!!</li>
</ul>
<ul>
<li>Ah, I feel pretty!</li>
</ul>
<p>&bull;  Oh no, I’ve got a bullet point!</p>

You can style your lists further, even to look like option #3. All I can do it refer to the *Disclaimer above. Don’t have too much fun. Stay classy!

Here in the disclaimer we’ll put stuff we don’t want to advertise but still need to provide the customer in writing. If it’s short, left align is fone. Typically long disclaimers are justified, in small san-serif font with a short line-height. It’s usually styled as an H6 tag. If you are using Bootstrap, you can use the class=”text-justify” instead of style=”text-align:justify;”. If you worry about people with poor eyesight being able to read the disclaimer, your butt is covered; anyone can change the view on their screen to display at more than 100%, making all the text larger. If they don’t know how to do this, Google has the answers for those who seek. What else? I just want to extend the paragraph a bit more so you can see how beautifully it justifies for you. I would hate to go all Lorem Ipsum on you.

How Do You Properly Separate Paragraphs?

There are two ways to separate paragraph text: indent the first line of each paragraph or put a space after each paragraph. Never do both!!! Why would you? Only one method is needed. Also, there is absolutely no reason to indent the first line in the first paragraph because we can obviously tell where the first paragraph begins.