Design Principles Part 2 - Typography

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.

Importance of typography in UI/UX Design:

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

Font Classifications

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

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

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

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