Colors, fonts, and units

The idea

Most of a page's look comes from three things: colour, type and size. CSS gives you several ways to write each, and picking the right one matters more than it seems: the right unit makes a page scale for users who enlarge their text; the right colour format makes a palette easy to adjust; the right line height makes long text pleasant to read.

Colours

Toko Kita's brand colour is a warm coffee brown. CSS lets you write that same colour in several formats, and each is handy in a different situation. All the first three lines below produce the same brown:

<style>
  .hex   { color: #7a4b2a; }                 /* red, green, blue in hexadecimal */
  .rgb   { color: rgb(122 75 42); }           /* the same colour, 0–255 per channel */
  .hsl   { color: hsl(25 49% 32%); }           /* hue (0–360°), saturation, lightness */
  .faded { color: rgb(122 75 42 / 0.5); }      /* 50% opacity */
  .named { color: rebeccapurple; }
  .badge { background: #2e7d32; color: white; padding: 2px 8px; }
</style>

<p class="hex">#7a4b2a</p>
<p class="rgb">rgb(122 75 42)</p>
<p class="hsl">hsl(25 49% 32%)</p>
<p class="faded">50% transparent</p>
<p class="named">rebeccapurple</p>
<p><span class="badge">In stock</span></p>

• Hex (#7a4b2a, or short #fff) is what designers usually hand you.
• rgb() is the same thing in decimal; a fourth value after / sets transparency (0 = invisible, 1 = solid).
• hsl() is the friendliest for building palettes: keep the hue, change the lightness for a lighter or darker shade.
• color sets the text colour; background (or background-color) the fill behind it.

Contrast matters. Light grey text on white looks elegant and is unreadable for many people (and for everyone on a phone in sunlight). Aim for a contrast ratio of at least 4.5:1 for normal text; browser developer tools show the ratio when you inspect a colour.

Fonts

Type does more for a page's feel than almost anything else. These are the properties that control it: which typeface, how heavy, how big, and how much space between lines:

<style>
  body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #222;
  }
  h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 2rem; line-height: 1.2; }
  .lead { font-size: 1.25rem; }
  .fine-print { font-size: 0.875rem; font-style: italic; }
</style>

<h1>Toko Kita</h1>
<p class="lead">Freshly roasted Indonesian coffee.</p>
<p>Every bag is roasted on Monday and shipped by Wednesday, so it reaches you at its best.</p>
<p class="fine-print">Prices include VAT.</p>

• font-family is a stack: the browser uses the first font it has. Always end with a generic family (sans-serif, serif, monospace).
• font-weight: 400 is normal, 700 bold.
• line-height without a unit (1.6) is a multiple of the font size, and it's the right choice for body text: around 1.5–1.7 for paragraphs, tighter (1.1–1.3) for big headings.
• Keep lines readable: about 60–75 characters. max-width: 65ch on a text column does that (ch is the width of a "0").

Web fonts (Google Fonts, or your own files with @font-face) are loaded with a <link> in the <head> and then used by name in font-family.

Units

<style>
  .card { width: 50%; padding: 1.5rem; border: 1px solid #ddd; }
  .button { font-size: 1.125rem; padding: 0.5em 1em; background: #7a4b2a; color: white; border: 0; }
  .small .button { font-size: 0.875rem; }
</style>

<div class="card">
  <p>50% of the page width, 1.5rem padding.</p>
  <button class="button">Normal button</button>
  <div class="small"><button class="button">Small button, padding scales too</button></div>
</div>

Why rem for text? Users can set a larger default font size in their browser. Sizes in rem scale with that setting; sizes in px ignore it. A 1.5rem heading is 24 px for most people and 30 px for someone who set 20 px as their default.

The em trap: em multiplies through nesting. A 1.5em element inside another 1.5em element is 1.5 × 1.5 = 2.25 times the base size. That's useful for button padding and confusing for font sizes; use rem for font sizes.

Why this matters for clean code

A small, deliberate set of values (a few colours, a type scale like 0.875 / 1 / 1.25 / 2 rem, a spacing scale) makes a design consistent and easy to change. Module 13 turns these values into CSS variables, so a colour defined once is used everywhere.

Recap

• Colours: hex, rgb(), hsl(), with / alpha for transparency; check contrast (4.5:1).
• font-family stacks end with a generic family; font-weight 400/700; unitless line-height ~1.6.
• rem (root-relative) for type and spacing; em compounds through nesting; %, vw, vh, ch for fluid sizes.
• Limit line length (~65ch) for readable text.