W24

WEEK 24

Placing Text
web.selah-hcs.orgweb design for kids // html5 + css3one day academy
THIS WEEK'S JOB // Align, indent, and space your words like a printed page instead of a ransom note. (Book pages 183-194 in Mrs. Gaiser's book.)

THE THREE IDEAS

text-align
left, center, right, or justify. Headings often center; body text almost always stays left because eyes ski down the left edge.
line-height is air
Space between lines makes paragraphs breathe. Around 1.5 reads well; cramped lines read like the terms and conditions.
Spacing properties
letter-spacing, word-spacing, text-indent: tiny dials with loud effects. Adjust in whispers, not shouts.

TRY IT IN THE PAINT BOOTH

<style>
  h1 { text-align: center; letter-spacing: 2px; }
  p  { line-height: 1.6; }
</style>
<h1>The Readable Shop</h1>
<p>These lines have room to breathe, which is why you did not notice the paragraph doing any work. Good typography is invisible.</p>
OPEN THE PAINT BOOTH, PRELOADED »

ON YOUR LOT

Set your site's body line-height and pick alignments on purpose for every heading. Compare before and after; the after should feel calmer.
« W23W25 »