🎨 Welcome to Your Font Adventure!

Design Principles Part 2 - Typography

🎯 Today's Super Mission

Ready to become a font master? Today we're exploring the amazing world of letters and text! You'll discover why some text looks serious and professional while others look fun and playful. Ever wonder why movie posters use different fonts? Get ready to solve the mystery!

📋 Prerequisites

• Required Knowledge: Understanding of UI/UX concepts and color theory from previous lessons
• Technical Skills: Ability to navigate design tools and browser interfaces
• Design Experience: Basic understanding of visual design principles
• Previous Lessons: Concept 01 - Introduction to UI/UX Design, Concept 02 - Color Theory

⏱️ Time Requirements

• Preparation: 5-10 minutes (accessing fonts, setting up text examples)
• Core Activity: 30-40 minutes
• Extension Tasks: 15 minutes (optional font pairing challenges)
• Total Estimated Time: 45-60 minutes

Agenda

• Understanding Typography
• Font Classifications and Their Uses
• Typographic Hierarchy and Layout
• Readability and Accessibility in Typography
• Applying Typography Principles in Figma

Introduction to Typography

Definition: Typography is the art and technique of arranging type to make written language legible, readable, and visually appealing.

🌟 Fun Design Fact!

Typography is like choosing the perfect outfit for your words! Just like how you dress differently for a party versus school, words need different "outfits" (fonts) for different occasions. A fun game might use bouncy letters, while a news app uses clean, serious fonts!

Importance of typography in UI/UX Design:

• Communicates brand personality
• Guides users through content
• Enhances readability and user engagement

Font Classifications

🤔 Design Thinking Moment Why do you think different types of fonts exist? How does the shape and style of letters affect the message they communicate? Think about how a horror movie poster font differs from a children's book font.

Serif Fonts:

• Features small decorative lines (serifs) at the end of strokes
• Examples: Times New Roman, Georgia
• Use Cases: Traditional, formal contexts; good for print

Sans-Serif Fonts:

• Lacks the decorative serifs; clean and modern appearance
• Examples: Arial, Helvetica, Open Sans
• Use Cases: Digital screens; modern and minimalist designs

Script Fonts:

• Mimics cursive handwriting; elegant and flowing
• Examples: Pacifico, Great Vibes
• Use Cases: Invitations, feminine or elegant brands (use sparingly)

Display Fonts:

• Decorative and attention-grabbing; unique styles
• Examples: Impact, Lobster
• Use Cases: Headlines, logos (not suitable for body text)

Monospaced Fonts:

• Each character takes up the same horizontal space
• Examples: Courier New, Consolas
• Use Cases: Coding environments, aligning numbers in tables

💡 Try This!

Look at different apps and games! Notice how Minecraft uses a blocky, pixelated font that matches its blocky world? Or how Disney+ uses a magical, rounded font that feels friendly and fun? Each font tells a story!

Choosing the Right Font

Considerations:

• Brand Personality: Match the font to the brand's voice (playful, serious)
• Audience: Tailor typography to the target demographic
• Medium: Ensure readability on intended devices (desktop, mobile)

Best Practices:

• Limit the number of fonts to 2-3 per project
• Ensure sufficient contrast between text and background
• Test fonts on different screen sizes and resolutions

Typographic Hierarchy

Definition: Organizing text elements to guide the reader's eye and indicate the importance of content

🌟 Fun Design Fact!

Typography hierarchy is like organizing your room! The biggest, most important things (like your bed) are the most noticeable. Medium things (like your desk) are next. Small things (like decorations) are last. Same with text - big headers grab attention first!

Elements of Hierarchy:

• Headings (H1, H2, H3): Largest and boldest; grab attention
• Subheadings: Support headings; introduce sections
• Body Text: Main content; focus on readability
• Captions and Footnotes: Smaller text; supplementary information

Techniques:

• Size: Larger fonts stand out more
• Weight: Bold vs. regular
• Color: Use contrasting colors to highlight
• Style: Italics, uppercase, different typefaces

🤔 Design Thinking Moment How does typography hierarchy guide your eye when reading? Can you think of examples where poor typography hierarchy made content confusing? What would happen if all text on a website was the same size and weight?

Readability and Legibility

Readability: How easily text can be read and understood in context

Legibility: How easily individual characters can be distinguished

Accessibility Considerations:

• Use clear fonts that are easily readable by users with visual impairments
• Avoid very small text sizes
• Ensure sufficient color contrast

Factors Affecting Readability and Legibility:

• Font Choice: Avoid overly decorative fonts for body text
• Font Size: Ensure text is large enough to read comfortably
• Line Length: Optimal line length is 50-75 characters
• Line Spacing (Leading): Adequate space between lines improves readability
• Letter Spacing (Tracking): Adjust spacing to avoid cramped or sparse text

Text Alignment

• Left-Aligned: Standard for most languages; easy to read
• Center-Aligned: Best for short texts like titles; harder to read in long blocks
• Right-Aligned: Rarely used; can be effective in specific design contexts
• Justified: Aligns text to both left and right margins; can create irregular spacing

Spacing

• Tracking: The spacing between all letters in a line of text. This should be used sparingly to shorten the lines of text (my rule is no more than -20), but can produce great results when used for spacing out headings and subheadings.
• Kerning: The spacing between individual letters.
• Leading: The vertical spacing between lines of text.

Applying Typography in Figma

Adding Text:

• Use the Text tool to add text layers

Font Selection:

• Access Google Fonts and other font libraries directly in Figma
• Import custom fonts if necessary

Creating Text Styles:

• Define text styles for headings, subheadings, body text, etc.
• Apply styles consistently across your design

Adjusting Spacing:

• Modify line height and letter spacing in the properties panel

Responsive Typography:

• Consider how text scales on different screen sizes
• Use auto-layout features for responsive designs

🔧 Troubleshooting Guide

Common Issue: Fonts Not Loading in Figma

Symptoms: Selected fonts appear as default fonts, custom fonts missing Solution:

1. Check internet connection for Google Fonts
2. Install Figma Desktop app for better font access
3. Restart Figma if fonts aren't appearing
4. Use web-safe fonts as alternatives Prevention: Use Figma's built-in Google Fonts library for consistency

Common Issue: Text Too Small to Read

Symptoms: Users complain text is hard to read, especially on mobile Solution:

1. Use minimum 16px for body text on mobile
2. Test designs on actual devices, not just computer screens
3. Check text in different lighting conditions
4. Consider users who might have vision difficulties Prevention: Always test readability on target devices

Common Issue: Too Many Fonts in One Design

Symptoms: Design looks messy, unprofessional, or chaotic Solution:

1. Limit to 2-3 font families maximum
2. Use different weights and sizes of the same font family
3. Create a typography style guide
4. Stick to your font choices throughout the project Prevention: Plan your typography system before starting design

Common Issue: Poor Font Pairing

Symptoms: Fonts clash with each other, look unprofessional Solution:

1. Use proven font pairing resources (Google Fonts suggestions)
2. Contrast serif with sans-serif fonts
3. Ensure fonts have similar x-heights
4. Test combinations with actual content Prevention: Research font psychology and pairing principles

---

🔑 Key Takeaways

• Main Concept: Typography communicates personality and guides user attention through hierarchical structure
• Design Skill: You can now choose appropriate fonts and create clear typographic hierarchy
• Tool Mastery: Understanding of font categories, text spacing, and typography best practices
• Real-World Application: Professional designers use typography to enhance readability and reinforce brand identity

📋 Quick Reference

• Important Terms:
  • Serif: Fonts with decorative lines (formal, traditional)
  • Sans-serif: Clean fonts without decorative lines (modern, digital)
  • Hierarchy: Organizing text by importance using size, weight, color
  • Leading: Vertical spacing between lines of text
• Figma Shortcuts:
  • T: Text tool to add text layers
  • Ctrl/Cmd + B: Bold text
  • Ctrl/Cmd + I: Italic text
• Design Pattern: Use no more than 2-3 font families, create clear hierarchy with size and weight

---

🎉 You Did It!

Fantastic work, typography master! You've just unlocked the secret language of fonts and text! Now you know how to make words look friendly, serious, playful, or professional. You're ready to choose the perfect "outfit" for every word in your designs!

💡 Try This Challenge!

Go on a font safari! Look at 5 different apps or websites and try to identify what type of font they're using. Is Instagram using a clean sans-serif font to look modern? Is a cooking app using a friendly script font to feel homey? You're becoming a font detective!