How to align text

Alignment

Don’t centre headings or text.
Use left-aligned text blocks and headlines. It’s the most legible option for your website and it will make your pages easier to read. Line up the page title, links, images and text inside a clear column.

Line length

When choosing a template pay attention to the line length of the columns.
One line should use about 52 – 66 characters. This is roughly two alphabets or an average of nine to ten words per line.
Lines with more than 66 characters fatigue the eye because the user needs to use their eye muscles or move their heads to read the text. Users may lose track of the next.

Line height

Not only the type size is important, but also the space between the lines. Good web typography uses 110% to 140% of the text for the line height.
For example if you use an 11-point type it works well to use 13 points for the line height.

Example with different line height

Related links

Advertisements

How to format text

Colour

Choose a colour with sufficient contrast between text and background. Dark text on a light background works best. White text on a black background is tiring to read.
Avoid colour for text unless it’s a link.

Type size

Make it bigger!
Designers prefer small type because it doesn’t need a lot of space. But your users need to read the content. Type generally needs to be larger on screen than on paper.

Use a type size for the body text between 10 and 14 points. You can even make it bigger if possible. Remember that users have different screens and a lot of people use a small notebook with a 13- or 15-inch monitor.

Different font sizes for heading 1, heading 2 and paragraph

Hierarchy

Your content needs a hierarchy with different levels of text. When scanning the page it must be instantly clear what’s a heading, a section subhead, a body text or a link. Use not more than two levels for headings.

Headings should be larger than the body text. Vary the type size to bring a hierarchy into your content:

  • Level-one heading: 150% of the regular text
  • Level-two headings: 125% of the regular text
  • Body text: regular text

Related links