Colors & Typography — CSS Styling

CSS color formats

Ways to specify color

css

/* Named colors */
color: red;
color: tomato;
color: cornflowerblue;

/* Hexadecimal — 6 digits: #RRGGBB */
color: #C96A30;    /* burnt orange */
color: #EDE8DC;    /* warm cream */

/* Shorthand hex — 3 digits (each digit doubles) */
color: #fff;       /* same as #ffffff */
color: #000;       /* same as #000000 */

/* RGB */
color: rgb(201, 106, 48);

/* RGBA — with transparency (0 = transparent, 1 = opaque) */
color: rgba(201, 106, 48, 0.5);

/* HSL — Hue (0-360) Saturation (%) Lightness (%) */
color: hsl(25, 61%, 49%);

/* Modern oklch — perceptually uniform, great for design systems */
color: oklch(55% 0.15 40);

Typography

Font properties

css

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;       /* base size — other elements use rem relative to this */
  line-height: 1.6;      /* unitless = 1.6x the font size. 1.5–1.8 is readable */
  color: #EDE8DC;
}

h1 {
  font-size: 3rem;        /* 3x the base = 48px */
  font-weight: 700;       /* bold */
  letter-spacing: -0.03em; /* tight tracking for large headings */
  line-height: 1.1;       /* tight line-height for headings */
}

p {
  font-size: 1rem;        /* equals base = 16px */
  font-weight: 400;       /* regular */
  max-width: 65ch;        /* optimal reading line length (characters) */
}

.caption {
  font-size: 0.875rem;    /* 14px */
  font-style: italic;
  color: #998870;
}

rem vs em vs px

Unit	What it's relative to	Best used for
px	Screen pixels (absolute)	Borders, box shadows — things that shouldn't scale
rem	Root element font-size (usually 16px)	Font sizes, spacing — scales with user preferences
em	Parent element font-size	Padding/margin that should scale with its own text
%	Parent element dimension	Widths, responsive containers
vw/vh	Viewport width/height	Full-screen sections, hero heights
ch	Width of the '0' character	Optimal text column widths

TIP

Use rem for font sizes. Using rem for font sizes respects the user's browser font size preference (some users bump it up for accessibility). Using px overrides their preference. Default browser font size is 16px, so 1rem = 16px, 1.5rem = 24px, etc.