CSS Typography - Fonts & Text
Learning Objectives: By the end of this lesson, you will be able to:
- Master CSS typography properties to control font appearance, sizing, and spacing
- Understand the difference between web-safe fonts and custom fonts, and when to use each
- Create visually appealing and readable text layouts using proper typography principles
- Implement responsive typography that scales appropriately across different devices
1. Welcome and Introduction (5 minutes)
Icebreaker Activity
Welcome! Typography is everywhere around us - from the book you’re reading to the signs on the street to the apps on your phone. Good typography can make content feel trustworthy, elegant, or playful, while poor typography can make even great content feel amateurish. If you could invent a new font, what would you name it and what would it look like? Would it be bold and geometric for headlines, or flowing and script-like for invitations? Understanding how fonts work and how to control them with CSS is fundamental to creating beautiful, readable web experiences.
Lesson Overview
- Duration: 90 minutes
- Prerequisites: Basic HTML structure and CSS fundamentals
- Materials Needed: Code editor, web browser, access to Google Fonts
2. Learning Objectives and Session Outline (5 minutes)
What We’ll Cover Today:
- Typography Fundamentals - Understanding fonts, typefaces, and their impact on design
- CSS Font Properties - Mastering font-family, font-size, font-weight, and font-style
- Text Layout Control - Alignment, spacing, decoration, and readability
- Web Fonts - Web-safe fonts vs. custom fonts from Google Fonts and other sources
- Responsive Typography - Creating text that looks good on all screen sizes
Success Criteria:
By the end of this session, you should be able to create professional-looking typography that enhances readability and supports your design goals across all devices.
3. Foundation Knowledge (15-20 minutes)
Core Concepts
What is Typography?
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. In web development, typography involves using CSS to control how text appears on screen, affecting both aesthetics and user experience.
Real-World Analogy: Think of typography like choosing the right voice for a story. A children’s book might use a friendly, rounded font (like someone speaking in a warm, gentle voice), while a legal document uses a serious, traditional font (like a formal, authoritative voice). The font choice communicates meaning before users even read the words.
Why This Matters: Good typography:
- Improves readability and reduces eye strain
- Establishes visual hierarchy to guide users through content
- Reinforces brand identity and emotional tone
- Enhances accessibility for users with visual impairments
- Affects user engagement and conversion rates
Understanding Fonts vs. Typefaces
- Typeface: The design of the letters (e.g., “Helvetica”)
- Font: A specific style and size of a typeface (e.g., “Helvetica Bold 16px”)
- Font Family: A group of related fonts with variations in weight, style, and size
Typography Hierarchy and Readability
Good typography creates clear information hierarchy through size, weight, color, and spacing. This helps users scan content quickly and understand the relative importance of different text elements.
Key Terminology
- Serif: Fonts with small decorative strokes (Times New Roman, Georgia)
- Sans-serif: Fonts without decorative strokes (Arial, Helvetica)
- Monospace: Fonts where each character takes the same width (Courier, Monaco)
- Web-safe fonts: Fonts commonly available across operating systems
- Web fonts: Custom fonts loaded from external sources
- Font stack: A prioritized list of fonts for fallback compatibility
4. Detailed Explanation and Examples (25-30 minutes)
Understanding CSS Font Properties
Font Family - Choosing Typefaces
The font-family property specifies which fonts to use. It’s best practice to provide a “font stack” - multiple font options in order of preference.
/* Font stack with fallbacks */
.heading {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Different font categories */
.serif-text {
font-family: Georgia, "Times New Roman", Times, serif;
}
.monospace-code {
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
}
Font Size - Controlling Text Size
Font size can be specified in various units, each with different behaviors:
/* Absolute units */
.pixel-size { font-size: 16px; } /* Fixed size */
.point-size { font-size: 12pt; } /* Print-oriented */
/* Relative units */
.em-size { font-size: 1.2em; } /* Relative to parent */
.rem-size { font-size: 1.2rem; } /* Relative to root */
.percent-size { font-size: 120%; } /* Percentage of parent */
/* Viewport units */
.viewport-size { font-size: 4vw; } /* Responsive to screen width */
/* Keywords */
.keyword-size { font-size: large; } /* Predefined sizes */
Font Weight - Controlling Text Boldness
Font weight determines how thick or thin the characters appear:
.light { font-weight: 300; } /* Light */
.normal { font-weight: 400; } /* Normal (default) */
.medium { font-weight: 500; } /* Medium */
.semibold { font-weight: 600; } /* Semi-bold */
.bold { font-weight: 700; } /* Bold */
.extrabold { font-weight: 800; } /* Extra bold */
/* Keyword values */
.bold-keyword { font-weight: bold; } /* Same as 700 */
.normal-keyword { font-weight: normal; } /* Same as 400 */
Font Style - Italics and Oblique
Font style controls the slant and style of the text:
.normal-style { font-style: normal; } /* Default */
.italic-style { font-style: italic; } /* True italic */
.oblique-style { font-style: oblique; } /* Slanted version */
Text Layout and Spacing Properties
Text Alignment
Controls horizontal text alignment within its container:
.left-align { text-align: left; } /* Default for LTR languages */
.center-align { text-align: center; } /* Centered */
.right-align { text-align: right; } /* Right-aligned */
.justify-align { text-align: justify; } /* Justified (fills width) */
Line Height - Vertical Spacing
Line height controls the space between lines of text:
.tight-lines { line-height: 1.2; } /* Tight spacing */
.normal-lines { line-height: 1.5; } /* Good for body text */
.loose-lines { line-height: 2.0; } /* Loose spacing */
.pixel-lines { line-height: 24px; } /* Fixed pixel value */
Letter and Word Spacing
Fine-tune character and word spacing:
.letter-spacing { letter-spacing: 0.1em; } /* Space between letters */
.word-spacing { word-spacing: 0.2em; } /* Space between words */
.tight-letters { letter-spacing: -0.05em; } /* Negative values allowed */
Text Decoration
Add or remove decorative elements:
.underlined { text-decoration: underline; }
.strikethrough { text-decoration: line-through; }
.overlined { text-decoration: overline; }
.no-decoration { text-decoration: none; } /* Remove default link underlines */
/* Multiple decorations */
.fancy-decoration {
text-decoration: underline overline;
text-decoration-color: red;
text-decoration-style: wavy;
}
Web Fonts and Custom Typography
Web-Safe Fonts
These fonts are widely available across different operating systems:
/* Common web-safe font stacks */
.serif-safe {
font-family: Georgia, "Times New Roman", Times, serif;
}
.sans-serif-safe {
font-family: Arial, Helvetica, sans-serif;
}
.monospace-safe {
font-family: "Courier New", Courier, monospace;
}
Custom Web Fonts
Import custom fonts from services like Google Fonts:
/* Import from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
/* Use the imported font */
.custom-font {
font-family: 'Roboto', Arial, sans-serif;
}
Common Misconceptions
-
Misconception: More fonts always make a design better Reality: Too many fonts create visual chaos; 2-3 fonts maximum is usually best
-
Misconception: All users see the same fonts Reality: Fonts render differently across operating systems and browsers
-
Misconception: Font size is the only way to create hierarchy Reality: Weight, color, spacing, and case also create effective hierarchy
5. Live Coding Demonstration (20-25 minutes)
Example 1: Basic Typography Styling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typography Fundamentals</title>
<style>
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
.main-heading {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
text-align: center;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.subtitle {
font-size: 1.25rem;
font-weight: 300;
color: #7f8c8d;
text-align: center;
margin-bottom: 2rem;
font-style: italic;
}
.section-heading {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.75rem;
font-weight: 600;
color: #34495e;
margin-top: 2rem;
margin-bottom: 1rem;
border-bottom: 2px solid #3498db;
padding-bottom: 0.5rem;
}
.body-text {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 1.5rem;
text-align: justify;
}
.emphasis {
font-weight: 600;
color: #e74c3c;
}
.quote {
font-size: 1.2rem;
font-style: italic;
color: #555;
border-left: 4px solid #3498db;
padding-left: 20px;
margin: 2rem 0;
background-color: #ecf0f1;
padding: 20px;
}
.code-sample {
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
font-size: 0.9rem;
background-color: #2c3e50;
color: #ecf0f1;
padding: 15px;
border-radius: 5px;
margin: 1rem 0;
overflow-x: auto;
}
.small-caps {
font-variant: small-caps;
letter-spacing: 0.1em;
font-weight: 600;
}
.highlight {
background-color: #f1c40f;
padding: 2px 4px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1 class="main-heading">Typography in Web Design</h1>
<p class="subtitle">Creating Beautiful and Readable Text</p>
<h2 class="section-heading">The Power of Typography</h2>
<p class="body-text">
Typography is more than just choosing fonts—it's about creating a
<span class="emphasis">visual hierarchy</span> that guides readers through
your content. Good typography enhances readability and supports your
message, while poor typography can <span class="highlight">distract from
even the best content</span>.
</p>
<blockquote class="quote">
"Typography is the craft of endowing human language with a durable
visual form." — Robert Bringhurst
</blockquote>
<h2 class="section-heading">Font Properties in CSS</h2>
<p class="body-text">
CSS provides numerous properties for controlling text appearance.
The <span class="small-caps">font-family</span> property is often
the starting point for any typographic design.
</p>
<div class="code-sample">
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.2rem;
font-weight: 600;
line-height: 1.6;
</div>
</body>
</html>
Explanation:
- Lines 8-16: Base typography settings for the document with readable line height
- Lines 18-25: Large heading with custom font stack and negative letter spacing for tighter feel
- Lines 27-33: Subtitle using lighter weight and italic style for hierarchy
- Lines 49-57: Emphasized text using weight and color to draw attention
- Lines 67-76: Monospace font for code samples with dark background for contrast
Example 2: Google Fonts Integration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts Demo</title>
<!-- Import Google Fonts -->
<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=Poppins:wght@300;400;600;700&family=Merriweather:ital,wght@0,300;0,400;1,300&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Merriweather', Georgia, serif;
font-size: 18px;
line-height: 1.8;
color: #2c3e50;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 40px 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
background: white;
padding: 60px;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.display-heading {
font-family: 'Poppins', Arial, sans-serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.tagline {
font-family: 'Poppins', Arial, sans-serif;
font-size: 1.25rem;
font-weight: 300;
text-align: center;
color: #7f8c8d;
margin-bottom: 3rem;
letter-spacing: 0.5px;
}
.section-title {
font-family: 'Poppins', Arial, sans-serif;
font-size: 1.8rem;
font-weight: 600;
color: #2c3e50;
margin: 2.5rem 0 1rem 0;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.paragraph {
margin-bottom: 1.5rem;
text-align: justify;
}
.intro-paragraph {
font-size: 1.2rem;
font-weight: 300;
color: #34495e;
margin-bottom: 2rem;
}
.highlight-text {
font-weight: 400;
color: #8e44ad;
background: rgba(142, 68, 173, 0.1);
padding: 2px 6px;
border-radius: 4px;
}
.font-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.font-example {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 10px;
border: 1px solid #e9ecef;
}
.poppins-demo {
font-family: 'Poppins', Arial, sans-serif;
}
.merriweather-demo {
font-family: 'Merriweather', Georgia, serif;
}
.font-name {
font-size: 0.9rem;
font-weight: 600;
color: #6c757d;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.font-display {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #2c3e50;
}
.font-description {
font-size: 0.95rem;
color: #666;
line-height: 1.6;
}
@media (max-width: 768px) {
.container {
padding: 30px 20px;
}
.font-showcase {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="display-heading">Beautiful Typography</h1>
<p class="tagline">Enhancing readability with Google Fonts</p>
<p class="paragraph intro-paragraph">
Typography plays a crucial role in web design, affecting both aesthetics and user experience.
By combining <span class="highlight-text">custom web fonts</span> with thoughtful CSS styling,
we can create engaging and readable content that draws users in.
</p>
<h2 class="section-title">Font Pairing in Action</h2>
<p class="paragraph">
This page demonstrates the effective pairing of Poppins (a modern sans-serif)
with Merriweather (a readable serif). Poppins is used for headings and UI elements,
while Merriweather provides excellent readability for body text.
</p>
<div class="font-showcase">
<div class="font-example poppins-demo">
<div class="font-name">Poppins</div>
<div class="font-display">Modern Sans-Serif</div>
<div class="font-description">
Clean, geometric, and highly legible. Perfect for headings,
UI elements, and modern designs that need clarity and impact.
</div>
</div>
<div class="font-example merriweather-demo">
<div class="font-name">Merriweather</div>
<div class="font-display">Readable Serif</div>
<div class="font-description">
Designed for optimal reading on screens. The letterforms are
open and the spacing is generous, making it ideal for body text.
</div>
</div>
</div>
<h2 class="section-title">Implementation Benefits</h2>
<p class="paragraph">
Using web fonts allows for consistent branding across all devices and platforms.
The combination of proper font selection, sizing, and spacing creates a
professional appearance that enhances user trust and engagement.
</p>
</div>
</body>
</html>
Key Points:
- Lines 8-10: Proper Google Fonts import with preconnect for performance
- Lines 35-42: Gradient text effect using background-clip (modern browsers)
- Lines 44-51: Responsive font sizing using clamp() function
- Lines 85-87: Grid layout for responsive font showcase
- Lines 125-131: Media queries for mobile optimization
Example 3: Responsive Typography System
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Typography</title>
<style>
:root {
/* Type scale using modular scale */
--text-xs: clamp(0.75rem, 0.5vw + 0.7rem, 0.8rem);
--text-sm: clamp(0.875rem, 0.6vw + 0.8rem, 0.95rem);
--text-base: clamp(1rem, 0.8vw + 0.9rem, 1.125rem);
--text-lg: clamp(1.125rem, 1vw + 1rem, 1.35rem);
--text-xl: clamp(1.25rem, 1.5vw + 1.1rem, 1.6rem);
--text-2xl: clamp(1.5rem, 2vw + 1.3rem, 2rem);
--text-3xl: clamp(1.875rem, 3vw + 1.5rem, 2.5rem);
--text-4xl: clamp(2.25rem, 4vw + 1.8rem, 3.2rem);
/* Font families */
--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
/* Line heights */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;
/* Letter spacing */
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: #374151;
background-color: #ffffff;
}
.container {
max-width: 65ch; /* Optimal reading line length */
margin: 0 auto;
padding: 2rem 1rem;
}
/* Heading hierarchy */
.h1 {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: 800;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: #111827;
margin-bottom: 1rem;
}
.h2 {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: 700;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: #1f2937;
margin-top: 2rem;
margin-bottom: 1rem;
}
.h3 {
font-family: var(--font-heading);
font-size: var(--text-2xl);
font-weight: 600;
line-height: var(--leading-normal);
color: #374151;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
/* Body text styles */
.text-large {
font-size: var(--text-xl);
line-height: var(--leading-relaxed);
color: #4b5563;
margin-bottom: 1.5rem;
}
.text-normal {
font-size: var(--text-base);
line-height: var(--leading-relaxed);
margin-bottom: 1.25rem;
}
.text-small {
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: #6b7280;
}
/* Utility classes */
.font-mono {
font-family: var(--font-mono);
font-size: var(--text-sm);
}
.font-semibold {
font-weight: 600;
}
.font-bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
.tracking-wide {
letter-spacing: var(--tracking-wide);
}
/* Special text treatments */
.drop-cap::first-letter {
float: left;
font-size: 3.5em;
line-height: 1;
margin: 0.1em 0.1em 0 0;
font-weight: 700;
color: #7c3aed;
}
.pull-quote {
font-size: var(--text-2xl);
font-weight: 300;
font-style: italic;
color: #7c3aed;
text-align: center;
margin: 2rem 0;
padding: 1rem;
border-left: 4px solid #c4b5fd;
background: #f3f4f6;
}
</style>
</head>
<body>
<article class="container">
<h1 class="h1">Responsive Typography System</h1>
<p class="text-large">
A well-designed typography system forms the backbone of effective
web communication, ensuring readability and visual hierarchy across
all devices and screen sizes.
</p>
<h2 class="h2">Fluid Type Scaling</h2>
<p class="text-normal drop-cap">
Modern responsive typography uses CSS custom properties and the clamp()
function to create fluid scaling between minimum and maximum sizes.
This approach ensures that text remains readable on small screens while
taking advantage of larger displays.
</p>
<blockquote class="pull-quote">
"Typography is the detail and the presentation of a story."
</blockquote>
<h3 class="h3">Implementation Details</h3>
<p class="text-normal">
The system uses <span class="font-mono font-semibold">clamp()</span>
functions with viewport-relative units to create smooth scaling.
Each text size is defined with a minimum value, a preferred value
based on viewport width, and a maximum value.
</p>
<p class="text-small italic tracking-wide">
This approach provides better user experience compared to traditional
breakpoint-based responsive design.
</p>
</article>
</body>
</html>
Debugging Common Typography Issues
/* Problem: Text appearing too small on mobile */
.too-small {
font-size: 12px; /* Fixed size - doesn't scale */
}
/* Solution: Use relative units or clamp() */
.responsive-size {
font-size: clamp(16px, 4vw, 24px); /* Scales with viewport */
}
/* Problem: Poor line height causing readability issues */
.cramped-text {
line-height: 1.0; /* Too tight */
}
/* Solution: Use appropriate line height for text size */
.readable-text {
line-height: 1.6; /* Good for body text */
}
/* Problem: Fonts not loading properly */
.font-fallback-issue {
font-family: 'CustomFont'; /* No fallbacks */
}
/* Solution: Always provide fallback fonts */
.font-with-fallbacks {
font-family: 'CustomFont', Arial, sans-serif;
}
6. Hands-On Practice (30-40 minutes)
Exercise 1: Basic Typography Setup (10 minutes)
Objective: Create a well-structured document with proper typography hierarchy.
Instructions:
- Create an HTML document with headings, paragraphs, and emphasized text
- Apply a font stack with web-safe fallbacks
- Set appropriate font sizes, weights, and line heights
- Create clear visual hierarchy through typography alone
Starter Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typography Practice</title>
<style>
/* Add your typography styles here */
</style>
</head>
<body>
<article>
<h1>The Art of Typography</h1>
<h2>Understanding Font Properties</h2>
<p>Typography is fundamental to web design...</p>
<h3>Font Families</h3>
<p>Choosing the right font family...</p>
<blockquote>Good typography is invisible...</blockquote>
</article>
</body>
</html>
Solution:
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
line-height: 1.6;
color: #333;
max-width: 65ch;
margin: 0 auto;
padding: 2rem;
}
h1 {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
color: #2c3e50;
}
h2 {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 1.8rem;
font-weight: 600;
line-height: 1.3;
margin-top: 2rem;
margin-bottom: 1rem;
color: #34495e;
}
h3 {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 1.4rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
p {
margin-bottom: 1.25rem;
}
blockquote {
font-style: italic;
font-size: 1.2rem;
border-left: 4px solid #3498db;
padding-left: 1rem;
margin: 2rem 0;
color: #555;
}
Exercise 2: Google Fonts Integration (15 minutes)
Objective: Implement custom web fonts from Google Fonts with proper fallbacks.
Requirements:
- Choose 2 complementary fonts from Google Fonts
- Import them properly for performance
- Create a typography system using both fonts
- Ensure proper fallbacks are in place
Hints:
- Use Google Fonts’ font pairing suggestions
- Consider loading performance with font-display: swap
- Test with slow network connections
Exercise 3: Responsive Typography System (15 minutes)
Objective: Build a responsive typography system using modern CSS techniques.
Challenge: Create a blog post layout that includes:
- Responsive font sizes using clamp()
- Proper vertical rhythm and spacing
- Different text treatments (drop caps, pull quotes)
- Mobile-optimized reading experience
Extension Ideas:
- Add dark mode typography
- Implement variable fonts
- Create animated text effects
- Add print-specific typography styles
7. Common Pitfalls and Troubleshooting (10 minutes)
Frequent Mistakes
-
Problem: Text too small on mobile devices Cause: Using fixed pixel sizes without responsive scaling Solution: Use relative units (rem, em) or clamp() for fluid scaling
-
Problem: Poor readability due to line height Cause: Not adjusting line height appropriately for font size Solution: Use line-height: 1.4-1.6 for body text, 1.2-1.3 for headings
-
Problem: Fonts not loading or flashing Cause: Missing fallbacks or improper font loading Solution: Always include fallback fonts and use font-display: swap
-
Problem: Inconsistent typography across pages Cause: Not using a systematic approach to font sizing Solution: Create a typography scale using CSS custom properties
Debugging Tips
- Use browser developer tools to inspect computed font properties
- Test typography across different devices and browsers
- Validate that web fonts are loading properly in the Network tab
- Check for font accessibility with screen readers
- Test reading experience with actual content, not placeholder text
8. Best Practices and Professional Tips (5 minutes)
Industry Standards
- Limit font families: Use 2-3 fonts maximum per project
- Optimize loading: Use font-display: swap and preload critical fonts
- Accessibility: Ensure sufficient color contrast (4.5:1 minimum)
- Performance: Consider font subsetting for large font files
Typography Principles
/* Good typography system foundation */
:root {
/* Establish a type scale */
--scale-ratio: 1.25;
--text-base: 1rem;
--text-sm: calc(var(--text-base) / var(--scale-ratio));
--text-lg: calc(var(--text-base) * var(--scale-ratio));
--text-xl: calc(var(--text-lg) * var(--scale-ratio));
/* Consistent spacing */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 3rem;
}
Next Steps in Your Learning Journey
- Variable Fonts: Explore modern variable font technology
- Typography in Design Systems: Study component-based typography
- Advanced CSS: Learn about CSS Grid typography and container queries
- Performance Optimization: Master web font loading strategies
9. Summary and Review (5 minutes)
Key Takeaways
- Typography creates hierarchy and improves readability through size, weight, spacing, and color
- Font stacks with fallbacks ensure compatibility across different systems and browsers
- Responsive typography uses modern CSS techniques like clamp() for fluid scaling
- Good typography is systematic and consistent across all content
Quick Review Questions
- What’s the difference between serif and sans-serif fonts?
- Why should you always include fallback fonts in your font stack?
- How does line-height affect readability?
Answers:
- Serif fonts have decorative strokes (like Times New Roman), sans-serif fonts don’t (like Arial)
- Fallback fonts ensure text displays properly if custom fonts fail to load
- Proper line-height (1.4-1.6 for body text) improves readability by providing adequate space between lines
For Instructors
Teaching Tips
- Show examples of good and bad typography side-by-side to illustrate principles
- Use live font loading demonstrations to show the importance of fallbacks
- Encourage students to experiment with different font pairings
- Emphasize the connection between typography and user experience
Assessment Ideas
- Typography critique: Students analyze and improve existing website typography
- Font pairing exercise: Students create effective font combinations
- Responsive typography test: Students build typography that works across devices
Adaptation Notes
- For Beginners: Focus on basic font properties before advanced techniques
- For Advanced Students: Include variable fonts, performance optimization, and accessibility
- Online Delivery: Use screen sharing to demonstrate font loading and developer tools
- Time Management: Allow extra exploration time for Google Fonts and creative exercises