Colors, Fonts and Units That Don't Fight You

Set colours safely, pick readable fonts, and choose units (px, rem, %) that scale. After this, the page looks intentional instead of default-browser grey.

5 min HTML and CSS Web Development Testing and Debugging Beginner

Skip ahead: If you already set base font and colour on body, use rem for type, and avoid tiny grey text on grey backgrounds, skip to "Units that don't fight you", then continue.

Default browser styles are readable but bland. Your job is to set colour and type on purpose without trapping yourself in twenty one-off declarations.

Colour you can defend

body {
  color: #080b0e;
  background: #ffffff;
}

a {
  color: #034bff;
}

.muted {
  color: #626976;
}

Prefer hex or rgb()/hsl() you can reuse. Named colours (blue) are fine for demos; brand work needs exact values.

Contrast matters. Dark grey on light grey may look "soft" to you and unreadable to someone else. If you are unsure, enlarge the text and squint. Better: use a contrast checker before you ship.

⚠ Warning: Don't put important text in images only. Colour-blind visitors and search engines both lose.

Fonts without a font party

body {
  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1, h2, h3 {
  line-height: 1.25;
  font-weight: 700;
}

system-ui uses the platform's UI font. It loads fast and looks native. Custom web fonts come later (Advanced). For beginners, system fonts are enough.

Don't set five font families on five tags. Set body once, then adjust headings.

Units that don't fight you

Unit	Use for
`rem`	Font sizes and most spacing that should scale with the root font
`em`	Spacing that should scale with the element's own font size
`px`	Borders, hairlines, shadows when you want a fixed device pixel look
`%`	Widths relative to the parent
`vh` / `vw`	Occasional full-viewport layouts (careful on mobile browser chrome)

html {
  font-size: 100%; /* usually 16px */
}

.lead {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.card {
  width: 100%;
  max-width: 40rem;
  padding: 1rem 1.25rem;
  border: 1px solid #626976;
}

If the user enlarges the browser default font, rem scales with them. Pure px type does not care. That is why rem is the better default for text.

A small, consistent set

:root {
  --ink: #080b0e;
  --muted: #626976;
  --brand: #034bff;
  --surface: #f2f8ff;
}

body {
  color: var(--ink);
  background: #fff;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.badge {
  background: var(--surface);
  color: var(--brand);
}

Custom properties (variables) let you change brand colour in one place. You will use them more in Intermediate. Even one or two on a beginner page helps.

Common mistakes

Setting font-size on every paragraph individually. Set body, then exceptions.
Line length too wide. Cap content with max-width around 60–75 characters (max-width: 40rem is a decent start).
Light grey text for body copy. Save muted colour for secondary hints.

💡 Tip: Zoom the page to 200% once while you design. If it falls apart or becomes unreadable, fix type and spacing before you add decoration.

What happens if you skip this

You will pick colours from a screenshot eyedropper every time and never get the same blue twice. The site will look unfinished even when the HTML is fine.

Set body colour, link colour and one muted class. Print (or PDF) a page in grey. Can you still tell links from body text by shape and underline? If not, fix contrast or underline links.

A readable base scale

body { font-size: 1rem; }
.small { font-size: 0.875rem; }
.lead { font-size: 1.25rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }

Stick to a short scale. Random sizes on every block look accidental.

Links should look like links

Underline or another clear cue helps. Colour alone is not enough for everyone. If you remove underlines, add a strong weight or icon and a clear hover/focus style.

a {
  color: #034bff;
  text-underline-offset: 2px;
}
a:focus {
  outline: 2px solid #034bff;
  outline-offset: 2px;
}

About