Colors, Typography, and Units

Site Admin · 11 Sep 2026 · 7 views

Colors, Typography, and Units

Colors and typography establish the visual identity of your website. Units control sizing and spacing. Getting these right transforms a page from ugly to professional.

Color Values

CSS supports several color formats. Modern projects often use Hex or HSL:

/* Named colors */
.color-name { color: tomato; }

/* Hex colors */
.hex-short { color: #f00; }      /* RGB shorthand */
.hex-full { color: #e74c3c; }    /* Full hex */

/* RGB */
.rgb { color: rgb(231, 76, 60); }

/* RGBA with transparency */
.rgba { color: rgba(231, 76, 60, 0.8); }

/* HSL (Hue, Saturation, Lightness) */
.hsl { color: hsl(6, 78%, 57%); }

Typography

CSS gives you full control over fonts, sizing, spacing, and line height:

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 1rem;          /* Base size */
    line-height: 1.6;         /* Comfortable reading */
    color: #1f2937;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

code {
    font-family: "Fira Code", monospace;
    font-size: 0.875em;
    background: #f3f4f6;
    padding: 0.125em 0.375em;
    border-radius: 0.25rem;
}

Units Compared

Unit	Relative To	Best For
px	Nothing (absolute)	Borders, small fixed sizes
rem	Root font size	Font sizes, padding, margins
em	Parent font size	Component-level sizing
%	Parent element	Widths, responsive layouts
vw / vh	Viewport width/height	Full-screen sections

CSS Custom Properties

Use CSS variables for consistent theming:

:root {
    --color-primary: #2563eb;
    --color-text: #1f2937;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
}

.btn {
    background: var(--color-primary);
    padding: var(--spacing-sm) var(--spacing-md);
}