Recognize spacing between letters and lines, and choose an alignment that is easy to read.
What you will learn.
Compare left, centered, and justified alignment; distinguish line spacing from letter spacing; explain one reading effect.
Before you begin.
Start with Understand letters and fonts. Keep one unchanged paragraph in your C27 Academy Figma file; use the same font, size, and words throughout.
Learn the concept.
Space and alignment
Words to know.
Kerning
Changing space between one pair of letters.
Kerning changes the gap between a pair of letters. Leading changes the gap between lines. Tracking changes spacing across a whole word or text selection.
Slide 5.
Space between letters and lines
Tracking
Changing letter spacing across selected text.
Spacing across letters
Leading
The space from one line of text to the next.
Space between text lines
Alignment
The edge or middle line the text follows.
Parts share an edge
Negative space
Empty space around or within visible shapes.
Look around and inside the letters. Those spaces separate shapes and can also form another shape. Empty space is part of the design.
Slide 13.
Negative space is the empty area
The idea in practice
See a worked example.
Read the paragraph at its intended size.
For exampleRead the paragraph at the size someone would really see it.
Look for uneven gaps or a hard-to-find next line.
For exampleA very wide line may make the next line hard to find.
Change one spacing or alignment setting at a time.
For exampleAdjust only the line spacing, then compare the two versions.
Worked comparison. Start with a left-aligned paragraph. Center a copy without changing its words or size; the next line begins at a shifting edge. Restore left alignment and increase only the gap between lines in another copy. Check line spacing by following the next line; tracking changes the space between letters and is a different control.
