CSS

Lesson 3: Typography & Colors

Duration: 50 minutes | Difficulty: Beginner | Prerequisites: Lessons 1-2 completed

📋 Learning Objectives

By the end of this lesson, you will be able to:

Apply different font families and understand font stacks
Control font size, weight, and style properties
Use various CSS color systems (names, hex, RGB, HSL)
Implement text alignment, spacing, and decoration
Create readable typography with proper line height and spacing
Apply CSS color best practices for accessibility

🎯 Typography Fundamentals

Font Properties

Font Family

/* Font stack - fallbacks if primary font isn't available */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

h1 {
    font-family: 'Georgia', 'Times New Roman', serif;
}

code {
    font-family: 'Fira Code', 'Monaco', monospace;
}

/* Absolute units */
h1 { font-size: 32px; }
h2 { font-size: 24px; }
p { font-size: 16px; }

/* Relative units (recommended) */
h1 { font-size: 2rem; }    /* 2 × root font size */
h2 { font-size: 1.5rem; }  /* 1.5 × root font size */
p { font-size: 1rem; }     /* 1 × root font size */
small { font-size: 0.875rem; }

/* Responsive units */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); } /* Min 1.5rem, max 3rem, scales with viewport */

Font Weight & Style

.normal { font-weight: normal; }    /* 400 */
.bold { font-weight: bold; }        /* 700 */
.light { font-weight: 300; }
.heavy { font-weight: 900; }

.italic { font-style: italic; }
.oblique { font-style: oblique; }

Text Properties

Text Alignment

.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.justify { text-align: justify; }

Text Decoration & Transform

.underline { text-decoration: underline; }
.strikethrough { text-decoration: line-through; }
.no-decoration { text-decoration: none; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

Line Height & Spacing

/* Line height for readability */
body { line-height: 1.6; }         /* 1.6 × font size */
h1 { line-height: 1.2; }           /* Tighter for headings */

/* Letter and word spacing */
.spaced { letter-spacing: 0.1em; }
.tight { letter-spacing: -0.05em; }
.word-spaced { word-spacing: 0.2em; }

/* Text indentation */
.indent { text-indent: 2em; }

🎨 CSS Color Systems

Color Names

.red { color: red; }
.blue { color: blue; }
.darkslategray { color: darkslategray; }

Hexadecimal Colors

.brand-primary { color: #3498db; }    /* Blue */
.brand-secondary { color: #2ecc71; }  /* Green */
.text-dark { color: #2c3e50; }        /* Dark gray */
.text-light { color: #ecf0f1; }       /* Light gray */

/* Shorthand hex (when digits repeat) */
.white { color: #fff; }               /* Same as #ffffff */
.black { color: #000; }               /* Same as #000000 */

RGB Colors

.rgb-red { color: rgb(231, 76, 60); }
.rgb-transparent { color: rgba(231, 76, 60, 0.7); } /* 70% opacity */

HSL Colors (Recommended)

/* HSL: Hue (0-360), Saturation (0-100%), Lightness (0-100%) */
.primary { color: hsl(210, 80%, 50%); }     /* Blue */
.primary-light { color: hsl(210, 80%, 70%); } /* Lighter blue */
.primary-dark { color: hsl(210, 80%, 30%); }  /* Darker blue */

/* HSLA with transparency */
.overlay { background-color: hsla(210, 80%, 50%, 0.8); }

🛠️ Hands-On Exercises

Exercise 1: Typography System

Create a comprehensive typography system:

/* Base typography */
:root {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-mono: 'Fira Code', Monaco, monospace;
    
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.6;
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p {
    margin-bottom: 1em;
    line-height: 1.7;
}

.lead {
    font-size: var(--text-lg);
    font-weight: 300;
    line-height: 1.8;
}

.small {
    font-size: var(--text-sm);
    color: #666;
}

Exercise 2: Color Palette

Design a cohesive color system:

:root {
    /* Primary colors */
    --primary-50: hsl(210, 40%, 98%);
    --primary-100: hsl(210, 40%, 96%);
    --primary-200: hsl(210, 40%, 92%);
    --primary-300: hsl(210, 40%, 84%);
    --primary-400: hsl(210, 40%, 64%);
    --primary-500: hsl(210, 40%, 48%);
    --primary-600: hsl(210, 40%, 40%);
    --primary-700: hsl(210, 40%, 32%);
    --primary-800: hsl(210, 40%, 24%);
    --primary-900: hsl(210, 40%, 16%);
    
    /* Semantic colors */
    --success: hsl(142, 76%, 36%);
    --warning: hsl(38, 92%, 50%);
    --error: hsl(0, 84%, 60%);
    --info: hsl(188, 78%, 41%);
    
    /* Text colors */
    --text-primary: var(--primary-900);
    --text-secondary: var(--primary-700);
    --text-muted: var(--primary-500);
}

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }

🚨 Common Pitfalls

Poor contrast: Ensure sufficient contrast between text and background
Too many fonts: Limit to 2-3 font families maximum
Inconsistent sizing: Use a systematic scale for font sizes
Unreadable line height: Too tight (< 1.2) or too loose (> 2.0)

🔍 Best Practices

Use system fonts for better performance and native feel
Establish hierarchy with consistent font sizing scale
Test readability across different devices and screen sizes
Consider accessibility with proper color contrast ratios
Use CSS custom properties for maintainable color systems

📝 Assessment

Quick Quiz

What’s the difference between font-size: 16px and font-size: 1rem?
Which color format is best for creating color variations?
What line-height value is recommended for body text?
How do you create a 50% transparent red color?

Practice Tasks

Create a typography scale using CSS custom properties
Design a color palette with primary, secondary, and semantic colors
Style a blog post with proper typography hierarchy
Test your color combinations for accessibility compliance

🔗 What’s Next?

In Lesson 4, we’ll dive into the CSS Box Model, understanding how elements are sized, spaced, and how margins, padding, and borders work together.

Typography and color are fundamental to good design. Master these concepts to create visually appealing and readable websites.

CSS