Typography & Color — The Feel of Design

What you'll learn

• Why typography is 90% of design
• Font pairing, sizing, and line-height
• Color theory basics and the 60-30-10 rule
• You'll build a readable, well-colored text block

Words are most of the web ✍️

Most of what people do online is read. So typography — how text looks — is arguably 90% of design. Get it right and everything feels polished; get it wrong and no amount of pretty colors will save you.

The essentials:

• Font choice. Two broad families: serif (little feet on letters, like Times — traditional, editorial) and sans-serif (clean, no feet, like Arial — modern, digital). Most interfaces use sans-serif for clarity on screens. For Arabic, fonts like Tajawal or Cairo (this site uses Tajawal!) are made to read beautifully.
• Font pairing. Usually pick just 1–2 fonts for a whole design (e.g. one for headings, one for body). More than that looks messy. When in doubt, use a single good font in different sizes and weights.
• Size & hierarchy. Body text around 16px; headings clearly bigger. Establish a scale (16 → 20 → 28 → 40) so sizes feel intentional, not random.
• Line-height (leading). The space between lines. Too tight and text feels cramped and hard to read; ~1.5× the font size is a comfortable default for body text. This one setting dramatically affects readability.
• Line length. ~50–75 characters per line is easiest to read. Very wide lines tire the eye.

Color sets the mood — but use it with discipline:

• The 60-30-10 rule. A balanced palette: 60% a dominant/neutral color (usually the background), 30% a secondary color, 10% an accent for calls-to-action. This keeps things harmonious and tells the eye where to click.
• Meaning. Colors carry meaning: green = success, red = error/danger, yellow = warning, blue = trust/info. Use these consistently.
• Less is more. Beginners use too many colors. A restrained palette (one accent + neutrals) almost always looks more professional than a rainbow.

Together, clean typography and a disciplined palette do more for "looking professional" than any fancy graphic. They're the foundation every polished interface stands on.

Never rely on color alone 🎨🚫

About 1 in 12 men and 1 in 200 women have some form of color blindness (most commonly red-green). If your design's only signal for something important is a color — a red vs. green dot for "offline/online," a red border on an invalid field with no other clue — a meaningful slice of your users literally cannot perceive the difference.

The fix is simple and always works: pair color with a second signal.

• An error field should get a red border and an icon and a text message ("Email is required") — not just red.
• A status dot should have color and a label ("● Online" vs "● Offline") or a distinct shape.
• A chart shouldn't rely on "the blue line vs the green line" alone — add different line styles (dashed/solid) or direct labels.

This is directly related to the type scale you just learned. A well-built type scale (a fixed set of font sizes, usually multiplying by a ratio like 1.25× or 1.333× each step: 16 → 20 → 25 → 31px) does something similar for hierarchy — it means size alone, not just color or boldness, reliably tells users what's most important, which helps low-vision users too. Redundant signals — color + icon + text, or size + weight + spacing — make a design robust for everyone, not just an edge case.

This single habit (never color alone) is one of the most-cited items in real accessibility audits, and it costs almost nothing to apply if you build it in from the start.

Real-world case study: the traffic-light dashboard fix 🔍

A well-documented pattern in enterprise software: early analytics dashboards commonly used a plain red/yellow/green "traffic light" to show project or system status — color as the only signal. Accessibility audits (and real complaints from colorblind engineers and managers) repeatedly flagged the same problem: a red-green colorblind user looking at a dot could not reliably tell "critical" from "healthy" at a glance, especially in quick scans of large tables.

The fix that spread industry-wide is exactly the principle from this lesson: keep the color, but add a shape and a label — a filled circle for "critical," a triangle for "warning," a check mark for "healthy" — plus a text status column. Now the dashboard works correctly whether or not the viewer can distinguish red from green, and as a side effect it also became easier to read for everyone, including on low-quality screens, printed reports, and screenshots dropped into black-and-white slide decks.

This is the curb-cut effect again, now applied to color specifically: designing for colorblind users produced a dashboard that was simply better for every single viewer.

Summary

• Typography is ~90% of design — font choice, size, line-height, line length
• Use 1–2 fonts; body ~16px with ~1.5 line-height and 50–75 char lines
• Color with discipline: 60-30-10, consistent meaning, fewer colors
• You made a cramped article readable

Next: Figma — the tool where you'll actually design interfaces.