(click anywhere to close)
OPEN MENU

[Typography] Alignment

category: Design | course: Typography | difficulty:

Now that we know how to distribute the space within a text block to optimize readability and aesthetics, we can look at aligning the text for the same reasons. Design always benefits from strong lines, and that is no different with typography; it’s generally wise to create as many even and straight edges within the design as possible.

Typographic elements can be aligned horizontally or vertically. The most important is horizontal alignment, which has four different types: flush left, flush right, centred and justified.

Flush Left

TypographyAlignmentFlushLeft

Flush left has a hard edge on the left, and a soft one on the right. This means that every sentence starts at the exact same position on the left, but ends at different positions on the right. It’s the most popular form of alignment, and in a sense the most logical one for people reading left to right. The uneven edge at the right is called a rag, which is why we also call this alignment ragged right.

The good thing is that it respects organic flow of the language and avoids uneven spacing between words. The bad thing is that it can be disgraced with a “bad rag” – an ugly wedge-like shape for the rag.

Flush Right

TypographyAlignmentFlushRight

Flush right has a hard edge on the right, and a soft one on the left. This means it can also be called ragged left. It’s a welcome departure from the familiar flush left, and ideal for captions, sidebars, and marginal notes, with the same benefits as flush left added to it. It can place related elements near each other without letting them interfere.

The bad thing is that some readers might not be pleased by the flush right alignment, and large pieces of flush right can be hard to read for the untrained eye. Bad rags threaten this type of alignment as well, with the added problem that punctuation at the ends of lines can weaken the hard right edge. One solution to this problem is to let any punctuation hang in the margin.

Centred

TypographyAlignmentCentred

Instead of pushing the start or end of lines to the left or right, one can align lines of text along the same main axis. Centred alignment means that all lines share the same centre, which means uneven lines cause a rag on both sides.

It’s formal an classical, bearing associations with history and tradition. It breaks a text out of its flow and creates an organic shape. The bad thing is that it’s static and conventional. When used too much or carelessly, it looks dull and sad. I recommend never using centred alignment ever again, especially not for text longer than a single line, unless you really have to.

Justified

TypographyAlignmentJustified

In justified alignment, both the left and right edges are hard. This creates a very clean, even and uniform shape, that’s also extremely efficient, which is why it’s the norm for newspapers and books.

To force the lines into the same measure, however, word spacing is added or removed. This creates ugly gaps, which you never want. This can be avoided by making the line length long enough (in relation to the size of the type), as more words allows word spacing to be changed more subtly.

The best solution, however, is hyphenation. With right and centre alignments, hyphenation can be considered a deadly sin. With flush left alignment, it’s okay. With justified alignment, it’s a blessing.

The take away is: use flush right alignment more often, and choose flush left or justified for the rest of the text; there’s no performance difference between the two. Centred alignment should be restricted to single lines or titles.

Vertical Alignment

Vertical alignment within regular text blocks is already taken care of by the fact that lines sit on a common baseline. There are times, however, when you want to stack multiple letters on top of each other or align a phrase to a vertical baseline. There are two ways to do this.

TypographyVerticalAlignment

Stacked Capitals: Use capital, roman letters on top of each other. Centring this column helps even out the differences in width. Also, pick a font where the capital letter I is not too narrow.

Type Error: Don’t stack lowercase. It’s awkward, because ascenders and descenders make vertical spacing uneven and unbalanced.

Vertical Baselines: Simply write the phrase like you normally would, and then rotate the whole element by 90 degrees. This preserves the natural affinity and texture of lowercase letters. It can run from top to bottom or bottom top, which is both fine.

CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)