What is typography and why it matters, part two

By |

In our last typography 101 installment, we discussed serif versus sans serif fonts, typeface best practices and readability.

Today, we'll take a look at justified text, orphans and widows, text size and indentation.

Justified Text

Often people justify text which means each line of text is the same length. This treatment should really only be used for formal publications like newspapers or magazines where space is an issue.

  • If you are to use justified text opt for the hyphenation to avoid the large spaces which disrupts a reader’s flow.
  • Do not opt for spreading out letters across the line to justify.
  • Text that is left aligned and ragged right is easiest for our eyes to process as it has a clear end allowing our eyes to easily flow from line to line.
  • When laying something out for the web it's good practice to left align because of increased readability and the fact that web browsers and word processing programs don’t come with the infinite capabilities typography programs can offer when laying out justified text.

Orphans and Widows

One thing to watch for when left aligning text is orphans and widows.

  • An orphan refers to a word that is hanging out by itself on a line. This can be fixed by bumping it down to the next line.
  • A widow is when a single word is left by itself at the end of the paragraph. This can be adjusted by reflowing some of the text to either pull the word up or move a few words down to that last line.
  • Center aligning large blocks of text reduces readability because the strong column created by left aligned or justified text provides a guide for the eye to follow. Center aligned text is for short decorative occasions, like invitations.

Text Size

The size of text is very important. When setting type, 10-12 point font is usually large enough. Anything under 8 is hard to read and usually does not hold up well. Use the following tips to determine the best text size for your design:

  • When setting type for the web you use pixels not points. Typically, 13px-19px is ideal for the web. To help you have an idea, 13px is equal to 10pt and 19px is equal to 14pt.
  • Line length is also very important. It's hard for our eye to read one continuously long line of text. A line length of 45 to 75 characters is best and 66 seems to be the magic number most designers shoot for.
  • The space between the actual lines is also important to take into consideration. The space between the lines--called the leading--should be about 120-140% of the point size.
    • For example, if you are using a word processing program and you have decided the leading needs to be increased, 1.25 is ideal where 1.5 is too much.
  • Kerning, or the spacing between individual letters, is also something a designers must take into account because the different shapes of letters will cause the letter spacing to be closer than others.
    • This is most common with rounded letters with a rounded shape.
    • When dealing with larger type, especially headers with capital letters, the kerning should be addressed so the space between letters looks even to the eye.
  • Tracking or letter spacing refers to how much space you're adding or decreasing between a group of letters.
    • Best practice is not to touch the tracking on lowercase letters as it decreases legibility.
    • Large text especially caps can sometimes stand to have some increased tracking to increase legibility. It's cases like these where you adjust the tracking and then go in and refine with kerning. 


Finally, when working with text don’t indent text to start a paragraph: use a single line space to show the start of a new paragraph. Don’t use two spaces between a sentence.

Last but not least try not to use comic sans.

Remember the most important typography choices you can make are the ones that do not cause the reader to notice the typography at all. It's a sometimes thankless task but still critically important to readability and making it easy for the reader to comprehend what you're trying to convey.

Connect with Illumine8