Introduction

Colors, typography, and units form the visual foundation of web design. Understanding color formats, font properties, and responsive units like rem, em, and viewport units is essential for creating accessible, scalable, and beautiful websites. This tutorial covers everything from basic color values to advanced typography techniques and modern unit systems.

CSS Color Systems

Color Format Options

css

/* Named colors (limited but readable) */
.named-colors {
    color: red;
    background-color: lightblue;
    border-color: darkgreen;
}

/* Hexadecimal colors */
.hex-colors {
    color: #ff0000;        /* Red */
    background-color: #00ff00; /* Green */
    border-color: #0000ff;     /* Blue */
    outline-color: #f0f;       /* Short hex - #ff00ff */
}

/* RGB colors */
.rgb-colors {
    color: rgb(255, 0, 0);        /* Red */
    background-color: rgb(0, 128, 255); /* Blue */
    border-color: rgba(0, 0, 0, 0.5);   /* Black with 50% opacity */
}

/* HSL colors (Hue, Saturation, Lightness) */
.hsl-colors {
    color: hsl(0, 100%, 50%);          /* Red */
    background-color: hsl(240, 100%, 50%); /* Blue */
    border-color: hsla(120, 50%, 50%, 0.7); /* Green with opacity */
}

/* Modern color functions */
.modern-colors {
    color: oklch(0.7 0.15 30);    /* Modern perceptual color */
    background-color: color(display-p3 1 0 0); /* Wide gamut red */
}

Color Variables and Theming

css

/* CSS Custom Properties for colors */
:root {
    /* Primary palette */
    --color-primary: #007bff;
    --color-primary-dark: #0056b3;
    --color-primary-light: #66b3ff;
    
    /* Semantic colors */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #17a2b8;
    
    /* Neutral colors */
    --color-text: #212529;
    --color-text-muted: #6c757d;
    --color-bg: #ffffff;
    --color-border: #e9ecef;
}

/* Using color variables */
.button {
    background-color: var(--color-primary);
    color: white;
    border: 1px solid var(--color-primary-dark);
}

.button:hover {
    background-color: var(--color-primary-dark);
}

/* Dark theme override */
[data-theme="dark"] {
    --color-text: #ffffff;
    --color-bg: #121212;
    --color-border: #333333;
}

Typography Fundamentals

Font Properties

css

/* Font family with fallbacks */
.typography-examples {
    /* System font stack */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                 Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Web fonts */
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    
    /* Font size */
    font-size: 1rem;        /* Relative to root element */
    font-size: 1.2em;       /* Relative to parent element */
    font-size: 18px;        /* Absolute pixels */
    
    /* Font weight */
    font-weight: normal;    /* 400 */
    font-weight: bold;      /* 700 */
    font-weight: 300;       /* Light */
    font-weight: 600;       /* Semi-bold */
    
    /* Font style and variant */
    font-style: italic;
    font-variant: small-caps;
}

/* Font shorthand property */
.font-shorthand {
    /* font: [style] [variant] [weight] size/line-height family */
    font: italic small-caps bold 1.2rem/1.5 'Georgia', serif;
}

Text Properties

css

.text-styling {
    /* Text alignment */
    text-align: left;       /* left | center | right | justify */
    text-align: center;
    
    /* Text decoration */
    text-decoration: underline;
    text-decoration: line-through;
    text-decoration-color: red;
    text-decoration-style: dashed;
    
    /* Text transformation */
    text-transform: uppercase;  /* UPPERCASE */
    text-transform: lowercase;  /* lowercase */
    text-transform: capitalize; /* Title Case */
    
    /* Letter and word spacing */
    letter-spacing: 0.05em;
    word-spacing: 0.1em;
    
    /* Text shadow */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 white; /* Subtle highlight */
}

Line Height and Spacing

css

.text-spacing {
    /* Line height (leading) */
    line-height: 1.5;       /* Unitless (recommended) */
    line-height: 1.5em;     /* Relative to font size */
    line-height: 24px;      /* Absolute */
    
    /* Paragraph spacing */
    margin-bottom: 1rem;
    
    /* Text indentation */
    text-indent: 2em;       /* First line indent */
    
    /* Vertical alignment */
    vertical-align: baseline; /* For inline/inline-block elements */
    vertical-align: middle;
    vertical-align: top;
}

/* Typography scale */
.heading-scale {
    /* Modular scale for headings */
    font-size: 2.5rem;      /* h1 */
    font-size: 2rem;        /* h2 */
    font-size: 1.75rem;     /* h3 */
    font-size: 1.5rem;      /* h4 */
    font-size: 1.25rem;     /* h5 */
    font-size: 1rem;        /* h6, body */
}

CSS Units Deep Dive

Absolute Units

css

.absolute-units {
    /* Pixel units - most common absolute unit */
    font-size: 16px;
    margin: 20px;
    border-width: 1px;
    
    /* Other absolute units (rarely used) */
    width: 2in;     /* Inches */
    height: 5cm;    /* Centimeters */
    padding: 10mm;  /* Millimeters */
    font-size: 12pt; /* Points (typography) */
}

Relative Units - em and rem

css

/* em - relative to parent element's font size */
.parent {
    font-size: 20px;
}

.child-em {
    font-size: 1.5em;      /* 30px (1.5 × 20px) */
    padding: 0.5em;        /* 15px (0.5 × 30px) */
    margin: 1em 0;         /* 30px top/bottom */
}

/* rem - relative to root element's font size */
html {
    font-size: 16px; /* Root font size */
}

.child-rem {
    font-size: 1.5rem;     /* 24px (1.5 × 16px) */
    padding: 1rem;         /* 16px */
    margin: 2rem 0;        /* 32px top/bottom */
}

/* Practical usage comparison */
.em-example {
    font-size: 1.2em;      /* Scales with parent */
    padding: 1em;          /* Proportional to element's font size */
}

.rem-example {
    font-size: 1.2rem;     /* Consistent across components */
    padding: 1rem;         /* Predictable spacing */
}

Viewport Units

css

/* Viewport width and height */
.viewport-units {
    /* Viewport width units */
    width: 50vw;           /* 50% of viewport width */
    max-width: 90vw;       /* Never wider than 90% of screen */
    
    /* Viewport height units */
    height: 100vh;         /* Full viewport height */
    min-height: 50vh;      /* At least half screen height */
    
    /* Viewport minimum/maximum */
    font-size: 4vmin;      /* 4% of smaller viewport dimension */
    padding: 2vmax;        /* 2% of larger viewport dimension */
}

/* Responsive typography with viewport units */
.responsive-heading {
    font-size: calc(1.5rem + 2vw); /* Fluid scaling */
    font-size: clamp(1.2rem, 4vw, 3rem); /* Min, preferred, max */
}

/* Modern viewport units (better mobile support) */
.modern-viewport {
    height: 100dvh;        /* Dynamic viewport height */
    height: 100svh;        /* Small viewport height */
    height: 100lvh;        /* Large viewport height */
}

Percentage Units

css

.percentage-units {
    /* Width/height percentages relative to parent */
    width: 50%;            /* Half of parent's width */
    height: 75%;           /* 75% of parent's height */
    
    /* Font size percentage relative to parent */
    font-size: 120%;       /* 1.2 times parent's font size */
    
    /* Position percentages relative to element itself */
    transform: translateX(-50%); /* Move left by half own width */
}

Advanced Typography Techniques

Web Fonts and Loading

css

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');

/* Font face declaration */
@font-face {
    font-family: 'CustomFont';
    src: url('custom-font.woff2') format('woff2'),
         url('custom-font.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Better loading performance */
}

/* Font loading with fallbacks */
.custom-typography {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 
                 'Segoe UI', system-ui, sans-serif;
}

Text Effects and Advanced Styling

css

.text-effects {
    /* Gradient text */
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Text stroke */
    -webkit-text-stroke: 1px black;
    
    /* Multiple text shadows */
    text-shadow: 
        1px 1px 0 #000,
        2px 2px 0 #000,
        3px 3px 0 #000;
    
    /* Text overflow handling */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive typography system */
.typography-system {
    /* Base font size */
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    
    /* Heading sizes */
    --h1: clamp(1.75rem, 4vw, 3rem);
    --h2: clamp(1.5rem, 3.5vw, 2.5rem);
    --h3: clamp(1.25rem, 3vw, 2rem);
    --h4: clamp(1.125rem, 2.5vw, 1.75rem);
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }

Practical Examples

Color Scheme Implementation

css

/* Light theme */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --accent: #007bff;
}

/* Dark theme */
[data-theme="dark"] {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --text-primary: #ffffff;
    --text-secondary: #b3b3b3;
    --accent: #66b3ff;
}

/* Component using theme colors */
.card {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--bg-secondary);
}

Responsive Typography Scale

css

/* Mobile first typography */
.responsive-text {
    font-size: 1rem;
    line-height: 1.5;
}

/* Tablet */
@media (min-width: 768px) {
    .responsive-text {
        font-size: 1.125rem;
        line-height: 1.6;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .responsive-text {
        font-size: 1.25rem;
        line-height: 1.7;
    }
}

Conclusion

Mastering colors, typography, and units is essential for creating professional web designs. Use CSS custom properties for maintainable color systems, choose appropriate units for different contexts (rem for consistency, em for scaling, viewport units for responsiveness), and establish a clear typography hierarchy. These fundamentals will serve as the foundation for all your design systems.