Color Mode

Typography Implementation

In this assignment, you will create a complete typographic system that demonstrates your understanding of the principles covered in the typography lesson. You will implement a modular scale, set proper measure and vertical rhythm, configure font loading, and create responsive typography using custom properties and modern CSS functions. This system will serve as a foundation for professional web typography that you can apply throughout the course and in real projects.

Assignment Overview

You will build a typography system from scratch using CSS custom properties, implementing all the core principles you have learned. Your system must demonstrate proper hierarchy, readability, and responsive behavior across different screen sizes. The focus is entirely on CSS implementation, so a starter HTML file is provided.

Learning Objectives

Setup Instructions

1. Create Project Directory

In your portfolio repository, create a new directory for this assignment: 


        portfolio/
        └── unit-1/
            └── typography-implementation/
                ├── index.html
                └── styles.css

2. Download Starter HTML

Use the starter HTML provided below. This file contains all the elements you need to style, including multiple heading levels, body text, lists, blockquotes, and UI components. Copy this into your index.html file: 


        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Typography System Implementation</title>
            <link rel="stylesheet" href="styles.css">
        </head>
        <body>
            <header>
                <nav>
                    <a href="#">Home</a>
                    <a href="#">About</a>
                    <a href="#">Articles</a>
                    <a href="#">Contact</a>
                </nav>
            </header>
            
            <main>
                <article>
                    <h1>The Art of Typography in Web Design</h1>
                    
                    <p class="lead">
                        Typography is the foundation of effective web design. It guides readers through content, establishes hierarchy, and creates visual harmony that enhances the user experience.
                    </p>
                    
                    <p>
                        Good typography is invisible. When readers engage with content without noticing the type itself, the typography has succeeded. This invisibility comes from careful attention to scale, spacing, measure, and rhythm. Each decision contributes to an overall system that feels natural and effortless.
                    </p>
                    
                    <h2>Understanding Typographic Hierarchy</h2>
                    
                    <p>
                        Hierarchy guides readers through content by establishing clear relationships between different levels of information. A well-designed hierarchy uses size, weight, spacing, and color to create distinct levels that readers can navigate intuitively.
                    </p>
                    
                    <h3>The Role of Scale</h3>
                    
                    <p>
                        A modular scale creates harmonious size relationships by using mathematical ratios. Common ratios like the golden ratio (1.618) or perfect fourth (1.333) generate proportions that feel natural because they appear throughout nature and classical architecture.
                    </p>
                    
                    <blockquote>
                        <p>
                            "Typography is two-dimensional architecture, based on experience and imagination, and guided by rules and readability."
                        </p>
                        <cite>Hermann Zapf</cite>
                    </blockquote>
                    
                    <h3>Measure and Readability</h3>
                    
                    <p>
                        The measure, or line length, directly impacts readability. Lines that are too long tire the eyes and make it difficult to find the next line. Lines that are too short create awkward rhythm and force frequent eye movements. The ideal measure falls between 45 and 75 characters, with 66 characters considered optimal for single-column text.
                    </p>
                    
                    <h4>Factors Affecting Measure</h4>
                    
                    <p>
                        Several factors influence optimal measure. Font size, line height, column width, and reading context all play roles. Body text at 16 pixels with 1.5 line height typically achieves good measure around 600 to 700 pixels wide. Larger text can sustain longer lines, while smaller text benefits from shorter measures.
                    </p>
                    
                    <h2>Vertical Rhythm and Spacing</h2>
                    
                    <p>
                        Vertical rhythm maintains consistent spacing relationships between elements. By basing all spacing on multiples of a baseline unit, designers create predictable patterns that guide the eye and establish visual harmony.
                    </p>
                    
                    <h3>Implementing Rhythm</h3>
                    
                    <p>
                        A baseline grid provides the foundation for vertical rhythm. All text baselines and spacing align to this grid, creating consistency throughout the design. Common baseline heights include 24 pixels or 1.5rem, which accommodates most body text comfortably.
                    </p>
                    
                    <ul>
                        <li>Line height should be a multiple of the baseline unit</li>
                        <li>Margins and padding should align to the baseline grid</li>
                        <li>Heading sizes should work with the established rhythm</li>
                        <li>Whitespace creates breathing room and visual hierarchy</li>
                    </ul>
                    
                    <h3>Responsive Typography</h3>
                    
                    <p>
                        Modern typography must adapt to different screen sizes and contexts. Fluid typography scales smoothly across viewport widths, maintaining readability without harsh breakpoints. The clamp() function enables this fluidity by setting minimum, preferred, and maximum sizes.
                    </p>
                    
                    <ol>
                        <li>Establish a base size that works across all devices</li>
                        <li>Use viewport units to create fluid scaling</li>
                        <li>Set appropriate minimum and maximum constraints</li>
                        <li>Test across multiple screen sizes and devices</li>
                        <li>Adjust line height and spacing for different contexts</li>
                    </ol>
                    
                    <h2>Practical Application</h2>
                    
                    <p>
                        Implementing these principles requires both technical skill and design sensitivity. A successful typography system balances mathematical precision with aesthetic judgment. The system should feel cohesive while remaining flexible enough to handle diverse content needs.
                    </p>
                    
                    <div class="card">
                        <h3>Typography Checklist</h3>
                        <p>
                            Before finalizing your typography system, verify that you have addressed these essential elements:
                        </p>
                        <ul>
                            <li>Clear hierarchy with distinct heading levels</li>
                            <li>Readable body text with proper measure</li>
                            <li>Consistent vertical rhythm throughout</li>
                            <li>Smooth responsive scaling across viewports</li>
                            <li>Appropriate font loading strategy</li>
                        </ul>
                    </div>
                    
                    <p>
                        Typography is both an art and a science. It requires understanding principles while developing intuition through practice. Each project offers opportunities to refine your approach and deepen your understanding of how type works in digital environments.
                    </p>
                    
                    <p class="small">
                        Last updated: January 2026. This article represents current best practices in web typography.
                    </p>
                </article>
                
                <aside>
                    <h2>Related Resources</h2>
                    <ul>
                        <li><a href="#">Modular Scale Calculator</a></li>
                        <li><a href="#">Typography Guidelines</a></li>
                        <li><a href="#">Font Pairing Examples</a></li>
                        <li><a href="#">Responsive Design Patterns</a></li>
                    </ul>
                    
                    <div class="callout">
                        <h3>Quick Tip</h3>
                        <p>
                            Start with a simple scale ratio like 1.25 (major third) and adjust based on your content needs. Larger ratios create more drama but may be harder to balance.
                        </p>
                    </div>
                </aside>
            </main>
            
            <footer>
                <p>&copy; 2026 Typography System. All rights reserved.</p>
            </footer>
        </body>
        </html>

Requirements

Your typography system must meet all of the following requirements. Each requirement demonstrates understanding of core typography principles covered in the lesson.

1. Font Loading and Configuration

Font Resources: Google Fonts provides free, high-quality fonts. Variable fonts like Inter, Recursive, or Source Sans offer maximum flexibility. You can also use system fonts like system-ui as your base if you prefer, but you must demonstrate understanding of @font-face syntax even if using system fonts.

2. Modular Scale Implementation

3. Measure and Readability

4. Vertical Rhythm

5. Responsive Typography

6. Complete System Organization

Implementation Guidelines

Approach

Start by reviewing the typography lesson and interactive demos. Pay attention to how custom properties organize typography systems and how calculations create proportional relationships. Your implementation should demonstrate these principles through your own design decisions.

Organization Strategy

Begin by defining your system in :root using custom properties. Organize your properties logically with clear naming conventions. Once your system is defined, apply it to the HTML elements. Reference your custom properties throughout rather than hardcoding values.

Testing Your System

Regularly test your typography at different screen sizes. Use your browser's responsive design mode to check how text flows at 320px (mobile), 768px (tablet), and 1024px+ (desktop). Verify that your measure remains appropriate and that text scales smoothly without awkward jumps.

Submission

Once you have completed your typography implementation, you will document your work and submit it for evaluation. Complete the form below with your typography decisions and reflections, then download the PDF and submit it to Canvas.

Your documentation should explain your design decisions and demonstrate understanding of typography principles. Be specific about why you made certain choices and what you learned through the implementation process.

Typography Implementation Documentation
Implementation Details
Provide the link to your live typography implementation in your portfolio.
Portfolio Link
Design Decisions
Explain the reasoning behind your typography choices. Focus on why you made specific decisions and how they support your goals for readability and hierarchy.
Why did you choose your particular scale ratio?
How did you approach measure and line length?
What guided your vertical rhythm decisions?
Explain your responsive typography strategy
Reflection
Reflect on your learning experience creating this typography system. Write 2-3 paragraphs addressing:
  • What was most challenging about implementing a complete typography system?
  • What discoveries did you make while working on this assignment?
  • How has your understanding of typography changed through this process?
  • What would you do differently if you were starting over?
Implementation Notes
Optional: Add any additional notes about your implementation, challenges you overcame, or features you are particularly proud of.

Evaluation Criteria

Your typography implementation will be evaluated on how well it demonstrates understanding of typography principles and technical execution. Consider these aspects as you work:

Tips for Success