Goal

You’ll be able to set up a consistent type and color system for a page, understand why a limited, deliberate scale reads as more professional than unlimited choice, and recognize the specific long-term maintenance problem that motivates this discipline.

Learn

Two properties do most of the typography work: font-family (which typeface) and a consistent size scale — not just random pixel values scattered ad hoc through your CSS as you build each new component. A common, sane approach is defining a handful of sizes once, in one place, then reusing them everywhere: a small size for captions, a base size for body text, and two or three larger sizes for headings.

/* A simple, deliberate scale, defined once */
--text-sm: 14px;
--text-base: 16px;
--text-lg: 20px;
--text-xl: 28px;
--text-2xl: 40px;

For color, the same principle applies, and matters even more, since color is used far more pervasively across a real site than font size: define your palette once (primary brand color, secondary accent, body text color, background color, maybe one or two semantic colors like a success green or error red) rather than typing hex codes fresh in every single rule you write. This makes a future redesign, or even a small brand color adjustment, dramatically less painful.

Font weight and line-height also deserve deliberate choices, not defaults left unexamined. Body text generally reads more comfortably with a line-height around 1.5 to 1.6 (meaning the line spacing is 1.5–1.6 times the font size), while tight headings often use a smaller line-height, closer to 1.1–1.2, since large text needs less breathing room between lines to still feel readable.

Decision Task

You’re setting text color across a 40-page site using hex codes typed directly into each rule, like color: #2563eb; repeated in dozens of separate places. Before reading on: what’s the practical problem this creates six months from now if the brand’s blue needs to change slightly?

Reveal the Answer

You’d need to find and manually replace that exact hex code in potentially dozens of separate places across the stylesheet, risking missing some occurrences, or accidentally changing an unrelated color that happened to use the exact same hex value by coincidence. This exact problem is what CSS Custom Properties, covered in Part 5, are specifically built to solve — this lesson is deliberately setting up that motivation before you learn the fix.

Common Mistake

Using too many different font sizes across a page — twelve or more slightly different sizes chosen in the moment, each individually reasonable, like 15px here, 17px there, 22px somewhere else — which makes a design feel visually inconsistent and unplanned even if no single choice looks technically wrong on its own. A defined, limited scale (like the 5-6 sizes shown above) almost always reads as more intentional and professional than an unlimited one, purely because of consistency across the whole page.

Practice Questions

1. List a reasonable minimum type scale (in terms of number of distinct sizes) for a typical blog, and briefly justify why that many, not more.

Show Answer

Typically 4-6 sizes: a caption/small size, base body size, and 2-3 heading sizes — enough to create clear visual hierarchy without so many that consistency breaks down.

2. Why does a line-height around 1.5-1.6 generally read as more comfortable for body text than a tighter line-height like 1.1?

Show Answer

More line spacing gives the eye room to track from the end of one line to the start of the next without lines feeling cramped together, which matters especially for longer blocks of body text people read continuously.

3. Explain the real six-months-later problem with hardcoding the same hex color repeatedly, in your own words.

Show Answer

A future color adjustment requires finding and replacing every occurrence of that exact hex code across the whole project, risking missed instances or accidentally changing an unrelated color that happened to share the same value.

4. True or False: using more font sizes generally makes a design look more sophisticated.

Show Answer

False — a smaller, deliberate, consistent scale generally reads as more professional than many slightly different ad hoc sizes.

5. A heading uses line-height: 1.6, the same as the body text. What visual problem might this cause specifically for large heading text, based on this lesson’s reasoning?

Show Answer

Large heading text with a loose 1.6 line-height can look like it has excessive, awkward vertical gaps between lines, since large text needs proportionally less line spacing to still feel visually balanced.

Try It Yourself

You’re designing a blog. List the minimum type sizes you’d realistically need, thinking through actual content types (not guessing a number).

Show Answer

body text, one size for headings within an article (maybe two levels), a caption/small-text size, and the main page title size — typically 4-5 total, not fifteen.

Quick Check

1. What real problem does typing the same hex color repeatedly across a stylesheet create later?

Show Answer

A future color change requires finding and replacing every occurrence, risking missed or incorrect replacements.

2. Why does a small, defined type scale usually look more professional than an unlimited one?

Show Answer

Consistency reads as intentional design; too many similar-but-different sizes reads as unplanned.

3. What CSS feature (covered later in this course) directly solves the repeated-color problem?

Show Answer

CSS Custom Properties (variables).

4. You’re designing a blog. List the minimum type sizes you’d realistically need, thinking through actual content types (not guessing a number).

Show Answer

body text, one size for headings within an article (maybe two levels), a caption/small-text size, and the main page title size — typically 4-5 total, not fifteen.

5. You’re setting text color across a 40-page site using hex codes typed directly into each rule, like color: #2563eb; repeated in dozens of separate places. Before reading on: what’s the practical problem this creates six months from now if the brand’s blue needs to change slightly?

Show Answer

You’d need to find and manually replace that exact hex code in potentially dozens of separate places across the stylesheet, risking missing some occurrences, or accidentally changing an unrelated color that happened to use the exact same hex value by coincidence. This exact problem is what CSS Custom Properties, covered in Part 5, are specifically built to solve — this lesson is deliberately setting up that motivation before you learn the fix.