How do I handle large paragraphs of centered text?

Question

I've been working on a very simple portfolio website for myself and the template I'm using is center justified for all the text. I have a bit of a blurb about myself and I don't know if this is the best way of dealing with so much center justified text. It feels a bit awkward on my eyes to read. Am I just imagining things or is there a better way to do this?

EDIT 1: My website is based on this free template, which also has some larger sections of center aligned text. I would like to left justify the text, but I don't know if it would fit in well with the way the rest of the website looks.

EDIT 2:

So I've flipped the colours so it's black text on white. This is what it looks like now, with a sens-serif font too. I've also included what the link looks like on that white background - I may need to darken it a bit:

EDIT 3:

Okay so left justified, with my attempt at bullet points. I'm going to sort out that soon. I need to set the font size correctly, but you get the idea.

Answer 1

Center aligning paragraph text is most often not a good choice. Human comprehension has been dutifully trained to view text in certain ways and when you center-align paragraph text you ask the reader to work very hard and maintaining the visual path through the text.

This isn't felt to any great degree when looking at short, one or two sentence, paragraphs. But the more text there is the worse it gets.

Here is an article about text alignment

And UX.SE has a related question: Is left-aligned text generally preferable over centered text?

If left alignment is just not an option (not sure why that would be the case), you may need to rethink the design.

(Side note: Reverse type on the web is also very difficult on the reader.)

If you are dead set on using that template. I'd suggest left aligning the paragraph text in all the areas and using an imaginary position from the left side to align them all to. For example, I'd define a content area and left align within that area:

Things will "read" much easier....

Answer 2

I wouldn't have a problem with the text if it had 2 or 3 paragraphs less. Centering works good for small quantities of text, but becomes a readability issue when having too much of it.

From this point of view, left align is better than centered (or right aligned).

Left aligned text is easier to read than centered text for paragraphs. This is because when you center your text, the starting place of each line changes. This forces your users to work harder to find where each line begins to continue reading.

The reasoning comes down to your eyes over-exercising to understand the text. In my personal case, I felt my sight got pulled to the center of the text, noticing for example words like Matlab/VHDL and Python C++. They do give me an idea of what you do, but you are not just trying to list skills, you are describing yourself.

Having said that, the text is not extremely long, and having it centered is a design 'statement'. So if you wanted to keep it that way, I'd consider adding some visual clues to help navigate the text. For example making some words or phrases bold, or varying their sizes. You could also use color to highlight the languages. I'm sure not all your text has the same relevance, therefore it should not all look the same.

Answer 3

Others have already made valid points on centered text, so I won't repeat that.

There are some other things you should consider:

• thin serif font (small font size or otherwise thin font) is not a good choice for inverted text. Essentially it makes reading just as hard as centered text. Think about people with old displays or cheap devices, who won't be able to read the text at all.

• use some font with more personal touch, plain Georgia or Times is probably a decent choice for text heavy sites that need fast loading, but in 2015 almost every web designer is obsessed with typography. Check out the fonts at http://www.google.com/fonts/ There are plenty highly legible serif and sans-serif fonts that will amaze your visitors. Use contrast, pair some nice fonts, use different weights, and so on.

• I assume the website is about you and it won't be really content heavy. Create a nice big hero image for your main page. Like a nice photo of a typical device you are working on, or your typical working environment. Set it as background image and put some nice big text on it. That almost always has a nice impact on your visitors.

• Structure your text, use a list if you are listing things, use headings. There are plenty of options to make text look good. Plain old dull paragraphs are out of fashion today.

Answer 4

In general, it's not good to have large amounts of centered aligned text because it's simply not very readable. We track left aligned text lines (or right aligned for RTL languages) easier than centered aligned ones.

For this type of information in particular, I'd recommend a left align sectioned layout with the sections being comprised of each skill, not a paragraph structure like you currently have. It keeps it short, readable, and easily extensible. It also adds visual cues like Yisela talks about.

That might look something like this extremely rough example:

It might be good to add a time frame of how long you've done these things as well to give a reference of how good you are at them. It could go right next to the specialty title, but likely needs to be less emphasized than the title.

Answer 5

Headings are a great idea if there is complex or varied content. However in your case, you could also benefit from improved paragraph structure. For example, the first two paragraphs could be joined in order to relate your education to who you are. Overall, this provides the reader with a better understanding of who you are, while maintaining the flow of the discussion.

The paragraphs I am writing are good examples to use as a template. You can make a short statement with the first line, then follow up with a comparison, a contrast or additional information. This can be followed with one or two lines that provide examples or additional related information to better convey the message to your audience. Finally, end with a linking word to make a conclusion about what you have said.

Consider the following:

My name is Stacey and I'm a qualified engineer. I have attained a Bachelor of Engineering, which has given me the knowledge and skills to design digital systems for the past five years. Examples of systems I have designed include (...). In addition to my technical knowledge, I am a native English speaker with a formal education in professional English communication.

The first line hits home, saying who you are and what you do. The second line explains why being a qualified engineer is relevant. The third line provides examples that supports your technical expertise. The final line links your technical skills with other professional skills. Overall, the paragraph provides improved structure, flow and quality layout.