Text Alignment

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

  • 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.
  • Right aligned text – only used in response to its place in a composition. Should align to the right margin.
  • 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, short subheader text. Never paragraphs of text, never disclaimers, never anything that doesn’t qualify as decorative. Never, ever, center align bullet points and lists. NEVER! Center-aligned text simply isn’t as legible, but for many, it seems more decorative. Stop it! It’s TEXT! Not roses or rainbows.
  • What else is there? Oh, 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.
Disclaimer: All Design rules are subject to be broken. Attempt at own risk.

Should a header match the subheader, 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 summarization of all the things we want our customers to know.

  • Oh my gosh!!!
  • This looks awful!
  • Are you talking about you or me?
  • All of us, dumbass!
  • 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 got a bullet point!

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

•  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?

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.