Project 3: Style the Text Page

Project 3: Style the Text Page

Typography: fonts, sizes, alignment and shadows - style a reading page beautifully.

The CSS crew

body {
  font-family: Georgia, serif;
  line-height: 1.6;
  font-size: 16px;
  color: #333;
}

h1 {
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.small-note {
  font-size: 0.8em;        /* relative to parent font size */
  font-style: italic;
}

Shrink science

• em scales with the parent font-size; rem scales with the root.
• Use rem for page-wide sizes, em for components you want to scale internally.
• line-height between 1.4 and 1.7 is easiest to read.
• Add max-width: 65ch to the text container for comfortable line length.

Your mission

1. Pick a readable font family and a body size.
2. Give headings a heavier weight and a lazy text-shadow.
3. Make one note styled with em sizing.
4. Keep line-lengths short - wrap the text in a container with safe max-width.

Checklist

• [ ] Body color + size + family set
• [ ] Nice line-height
• [ ] Headings styled with weight and shadow
• [ ] One element used em or rem
• [ ] Text width is comfortable

TL;DR

Readable text = font-family + size + line-height + comfortable width. em is parent-relative; rem is root-relative.