Text Alignment on the Web
Which text alignment do you use on your website? Left, right, center or justified? Did you know that text alignment can affect how easy it is to read a web page?
Text Alignment
Text alignment refers to how the lines of text on the page line up. There are four basic ways to align text on the web:
- Left
- Default setting when text alignment or the direction of text is not set on a web page.
- Default setting for languages read top to bottom, and left to right.
- Each line of text is even with the left margin.
- The right edges of left aligned text are jagged.
- Right
- Default setting if the direction of the language used on the web page is right to left.
- Each line of text is aligned with the right margin.
- The left edge of right aligned text is jagged.
- Center
- As the name implies, the text is centered on the web page.
- Justified
- Both the left and right edges of text in a line are even against the left and right margins.
- The words are spaced out to fill the line of text.
- Most commonly used in newspapers and other printed media.
One more note about text alignment on a web page:
The text-align property is inherited. All block-level elements inside a div container, for example, will inherit the alignment set for the block-level element. e.g.
<div class="centered">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis
enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis
nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
<p><img src="images/picture.jpg" width="100" height="100" alt="My picture alt text" /></p>
</div>
Will all be centered in the div container.
Alignment on the Web vs Other Mediums
Text alignment and spacing on the web is not as precise as it can be in other mediums, e.g. print
Unlike print and other mediums, having absolute control over how a web page looks in every browser and on every computer is not possible. You can make a web page not break and look acceptable in the different browsers but you can’t be as precise as you can with print and other mediums.
On the web, you have no control over what browser or computer a visitor will be using.
Setting Text Alignment
The most familiar way to align text is the old way of including align=your setting in an HTML element tag. This old method has 2 problems:
- If you try to validate your HTML coding using a Strict DOCTYPE declaration or Transitional DOCTYPE declaration when using XHTML, you will not pass. The align=your setting attribute was eliminated in HTML 4.01.
“align = left|center|right|justify [CI]
Deprecated. This attribute specifies the horizontal alignment of its element with respect to the surrounding context.”Alignment, font styles, and horizontal rules in HTML documents – 15.1.2 Alignment of the HTML 4.01 Specification
- Using this method will not let you format the text in other ways without adding a bunch of additional coding.
To set text alignment for an HTML element, you use a style in your stylesheet.
.centered {
text-align: center;
}
In your HTML element you specify the style:
<p class="centered">Text in paragraph</p>
Which Text Alignment to Use?
Text which is centered is hard to read. Your eye has to find the beginning of the next line. A whole page or section of a web page with centered text is considered not a professional looking layout.
Some will use left aligned text with centered headings. This is also hard to read as it forces the reader to look for where the heading(s) start.
Justified text is not implemented on the web in the same way software for printed material adjusts the text. On the web, additional spaces are added between the words to force the line to fill to the left and right margins. Web pages do not add hyphens like other software will to break up the text more evenly.
The best text alignment for the web is left aligned. This makes the web page easy to scan (which people do on the web), is easier to read and the words are spaced evenly.
More Reading on Text Alignment
Alignment at Web Style Guide.
Text/Typographical Layout at WebAIM
Copyright © 2005 - 2025 Web Page Mistakes. All rights reserved.
What's next?
Follow our new articles via RSS, follow us on Twitter and submit to your favourite social networking site:
February 23rd, 2009 at 8:21 am
I have tried to get away completely from justified text even when asked by clients. It is hard to predict what justified text will look like on different sizes and resolutions of different monitors. In some narrow locations especially with floated images you may have just one word with an uncomfortable space due to the justification. For these reasons I try not to use justified text.
May 23rd, 2009 at 5:40 pm
I agree with D.A. Shaver. Justified is usually not the best option for text alignment even if you have a set width for that text, it’s just a little more difficult to read with all the spacing. I have always preferred left aligned text and I also try to explain the important of not using justified alignment to clients.
May 21st, 2011 at 1:17 pm
I use left aligned text. That is what english speaking people are used to reading.
I find when I come across centered text, I have a harder time reading it.
May 21st, 2011 at 11:32 pm
Centering a heading or a special announcement might work if done in moderation but I do agree trying to read a whole page of text using center alignment is very hard!
August 3rd, 2011 at 7:00 pm
I do use and prefer justified text. I just think it looks much better than left aligned text, and center aligned is just plain hard to read. It is true that on occasion there may be an awkward space here and there, but I think justified is still the best looking option.