Lesson 7: Colors and Typography - Making Text Beautiful

What You'll Learn

Color theory basics for web design
Creating color schemes
Using Google Fonts
Advanced typography techniques
Text shadows and effects
Letter and word spacing

Why This Matters

Good typography and color choices make the difference between amateur and professional-looking websites. These skills help create readable, accessible, and visually appealing content.

Part 1: Color Theory Basics

Primary, Secondary, and Tertiary Colors

Primary Colors (RGB for screens):

Red: #FF0000
Green: #00FF00
Blue: #0000FF

Secondary Colors:

Yellow (Red + Green): #FFFF00
Cyan (Green + Blue): #00FFFF
Magenta (Red + Blue): #FF00FF

Color Schemes

Monochromatic - Variations of one color:

.light { background-color: #CCE5FF; }
.medium { background-color: #66A3D2; }
.dark { background-color: #003D82; }

Complementary - Opposite colors:

.primary { color: #FF6B35; }  / Orange /
.accent { color: #004E89; }   / Blue /

Analogous - Adjacent colors:

.color1 { background-color: #FF6B35; }  / Orange /
.color2 { background-color: #FFA351; }  / Yellow-orange /
.color3 { background-color: #FFCF56; }  / Yellow /

Using CSS Custom Properties (Variables)

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --accent-color: #e74c3c;
    --text-dark: #333333;
    --text-light: #666666;
    --bg-light: #f5f5f5;
}

body {
    color: var(--text-dark);
    background-color: var(--bg-light);
}

h1 {
    color: var(--primary-color);
}

.button {
    background-color: var(--accent-color);
    color: white;
}

Benefits:

Easy to maintain and update
Consistent colors throughout site
Quick theme changes

Part 2: Web-Safe Fonts and Font Stacks

Font Stacks (Fallback Fonts)

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

code {
    font-family: 'Courier New', Courier, monospace;
}

The browser uses the first available font in the list.

System Font Stack (Modern Approach)

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                 'Helvetica Neue', Arial, sans-serif;
}

Uses the operating system's native font for better performance.

Part 3: Google Fonts

Google Fonts provides free, easy-to-use web fonts.

Using Google Fonts

Go to: https://fonts.google.com
Choose a font (e.g., "Roboto")
Select styles (Regular 400, Bold 700)
Copy the <link> code

In your HTML <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

In your CSS:

body {
    font-family: 'Roboto', sans-serif;
}

Popular Font Combinations

Modern and Clean:

h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
}

body {
    font-family: 'Open Sans', sans-serif;
}

Professional:

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
}

Friendly and Approachable:

h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
}

body {
    font-family: 'Lato', sans-serif;
}

Part 4: Advanced Typography

Letter Spacing

h1 {
    letter-spacing: 2px;  / Space between letters /
}

.tight {
    letter-spacing: -1px;
}

.spaced {
    letter-spacing: 5px;
}

Word Spacing

p {
    word-spacing: 5px;  / Space between words /
}

Line Height (Leading)

p {
    line-height: 1.6;  / 1.6x the font size /
}

/ Comfortable reading: 1.5 - 1.8 /
.article {
    line-height: 1.7;
}

Text Indent

p {
    text-indent: 30px;  / First line indentation /
}

White Space

pre {
    white-space: pre;  / Preserves spaces and line breaks /
}

.nowrap {
    white-space: nowrap;  / No line wrapping /
}

Part 5: Text Effects

Text Shadow

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /           x   y   blur  color /
}

Multiple Shadows:

h1 {
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.3),
        -2px -2px 4px rgba(255, 255, 255, 0.5);
}

Glowing Effect:

.glow {
    color: white;
    text-shadow: 0 0 10px #00ffff,
                 0 0 20px #00ffff,
                 0 0 30px #00ffff;
}

Gradient Text

.gradient-text {
    background: linear-gradient(45deg, #f093fb, #f5576c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 48px;
    font-weight: bold;
}

Part 6: Responsive Typography

Using rem Units

html {
    font-size: 16px;  / Base font size /
}

body {
    font-size: 1rem;  / 16px /
}

h1 {
    font-size: 3rem;  / 48px /
}

h2 {
    font-size: 2rem;  / 32px /
}

p {
    font-size: 1rem;  / 16px /
}

small {
    font-size: 0.875rem;  / 14px /
}

Benefits of rem:

Scales based on root font size
Easier to make responsive
Better for accessibility

Fluid Typography (Advanced)

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    / min    preferred  max /
}

Font size adjusts based on viewport width.

Part 7: Complete Example - Blog Post

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Beautiful Typography</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <article>
        <header>
            <h1>The Art of Typography</h1>
            <p class="subtitle">Making text beautiful on the web</p>
            <p class="meta">By John Doe • March 15, 2024</p>
        </header>
        
        <section>
            <h2>Introduction</h2>
            <p class="lead">
                Typography is the art and technique of arranging type to make 
                written language legible, readable, and appealing when displayed.
            </p>
            
            <p>
                Good typography establishes a strong visual hierarchy, provides 
                graphic balance, and sets the overall tone of the content. It's 
                one of the most important aspects of web design.
            </p>
        </section>
        
        <section>
            <h2>Key Principles</h2>
            <p>
                When working with typography, consider these fundamental principles:
            </p>
            
            <ul>
                <li><strong>Hierarchy:</strong> Use size and weight to show importance</li>
                <li><strong>Contrast:</strong> Create visual interest and readability</li>
                <li><strong>Spacing:</strong> Give text room to breathe</li>
                <li><strong>Alignment:</strong> Create order and organization</li>
            </ul>
        </section>
        
        <blockquote>
            "Typography is what language looks like."
            <cite>— Ellen Lupton</cite>
        </blockquote>
    </article>
</body>
</html>

styles.css:

:root {
    --color-primary: #2c3e50;
    --color-accent: #3498db;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-bg: #ffffff;
    --color-bg-light: #f8f9fa;
}


{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg-light);
}

article {
    max-width: 700px;
    margin: 60px auto;
    padding: 40px;
    background-color: var(--color-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/ Headings /
h1, h2 {
    font-family: 'Playfair Display', serif;
    color: var(--color-primary);
    line-height: 1.3;
}

h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
}

h2 {
    font-size: 2rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--color-accent);
}

/ Subtitle and Meta /
.subtitle {
    font-size: 1.5rem;
    color: var(--color-text-light);
    font-style: italic;
    margin-bottom: 0.5rem;
}

.meta {
    font-size: 0.9rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2rem;
}

/ Lead paragraph /
.lead {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

/ Regular paragraphs /
p {
    margin-bottom: 1.5rem;
}

/ Lists /
ul {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}

li {
    margin-bottom: 0.75rem;
}

/ Blockquote /
blockquote {
    margin: 3rem 0;
    padding: 1.5rem 2rem;
    background-color: var(--color-bg-light);
    border-left: 5px solid var(--color-accent);
    font-size: 1.3rem;
    font-style: italic;
    color: var(--color-primary);
}

cite {
    display: block;
    margin-top: 1rem;
    font-size: 1rem;
    font-style: normal;
    color: var(--color-text-light);
}

Practice Exercises

Exercise 1: Color Palette

Create a page showcasing a color scheme:

Define 5-6 colors as CSS variables
Create sections using each color
Show color codes and names
Demonstrate good contrast

Exercise 2: Font Showcase

Create a page demonstrating:

3 different Google Fonts
Various font weights
Different letter-spacing values
Text shadows
Good typography hierarchy

Exercise 3: Article Layout

Create a styled article with:

Custom fonts from Google Fonts
Proper heading hierarchy
Lead paragraph style
Blockquote styling
Good line height and spacing
Professional color scheme

What You Learned

✅ Color theory basics and schemes
✅ CSS custom properties (variables)
✅ How to use Google Fonts
✅ Advanced typography properties
✅ Text effects and shadows
✅ Responsive typography with rem
✅ Creating professional text layouts

What's Next?

In the next lesson, you'll learn about the CSS Box Model - understanding margins, padding, borders, and how elements take up space!