Text & Typography: Fonts, Layouts, Digital Text Design

Core Concepts of Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. It includes:

• Font selection (typeface design)
• Text alignment (left, right, justified, centered)
• Line spacing (leading)
• Character spacing (kerning, tracking)
• Hierarchy (headings, subheadings, body text)

1. Font Classification

Fonts are categorized based on their design characteristics. The two primary classifications are:

Serif vs. Sans-Serif Fonts

2. Text Formatting Techniques

Proper formatting enhances readability and visual appeal.

Key Formatting Elements

Worked Example: Optimizing Text for a Daraz Product Page

• Font Choice: Sans-serif (e.g., Roboto) for digital readability.
• Kerning: Tightened between "D" and "a" in "Daraz" for branding.
• Leading: 1.6x font size for product descriptions to avoid crowding.
• Hierarchy: H1 (Product Name: Bold, 24px), H2 (Price: Sans-serif, 18px), Body (14px, left-aligned).

---

Typography in Digital Multimedia

Digital text requires optimization for screens, considering:

• Resolution: High-DPI displays need scalable fonts (e.g., SVG fonts).
• Accessibility: Font size, contrast (WCAG guidelines: 12px minimum, 4.5:1 contrast).
• File Size: Embedded fonts (e.g., .ttf, .otf) increase file size; web-safe fonts (e.g., Arial) reduce load time.

3. Real-World Applications of Typography

In Nepali Apps

1. eSewa

   • Idea Used: Hierarchy and Contrast
   • How: Transaction amounts are displayed in bold, high-contrast sans-serif (e.g., Roboto Bold) to stand out against gray backgrounds. Buttons use all-caps for urgency (e.g., "PAY NOW").

2. Khalti

   • Idea Used: Monospace for Data
   • How: Transaction IDs and reference numbers use a monospace font (e.g., Consolas) to align digits neatly in receipts, reducing errors.

3. Nepal Rastra Bank (NRB) Notices

   • Idea Used: Serif for Formality
   • How: Official documents use serif fonts (e.g., Garamond) to convey authority and tradition, while digital versions (PDFs) embed the font for consistency.

Global Examples

1. Google Fonts

   • Idea Used: Open-Source Typography
   • How: Provides free, web-optimized fonts (e.g., Open Sans, Noto Sans) with variable fonts to reduce HTTP requests and improve load times.

2. YouTube UI

   • Idea Used: Microtypography for UX
   • How: Video titles use kerning adjustments (e.g., "YouTube" logo) and tracking in trending tags to fit more text in limited space without crowding.

3. WhatsApp Messages

   • Idea Used: Monospace for Code Sharing
   • How: Users paste code snippets in monospace fonts (e.g., Courier New) to preserve alignment, making debugging easier.

---

Typography Tools and Workflow

4. Software for Typography

5. Workflow for Digital Text Design

Worked Example: Designing a Ncell Promotional Banner

1. Purpose: Highlight a new data plan.
2. Font: Bold sans-serif (e.g., Bebas Neue) for the headline "UNLIMITED DATA," monospace (e.g., Courier New) for plan details.
3. Kerning: Tightened between "N" and "c" in "Ncell" for branding.
4. Leading: 1.8x for plan descriptions to avoid text blocks.
5. Accessibility: Tested with screen readers (e.g., NVDA) to ensure contrast meets WCAG AA standards.
6. Export: Embedded fonts as .woff2 for web use (smaller file size).

---

Typography Pitfalls and Best Practices

6. Common Mistakes

• Overusing decorative fonts: Hard to read in body text (e.g., Comic Sans in formal documents).
• Ignoring contrast: Light gray text on white backgrounds (e.g., some Daraz product pages).
• Poor kerning: Uneven spacing in logos (e.g., poorly designed "NT" in NTC branding).
• Inconsistent hierarchy: Mixing font sizes/weights without clear structure.

7. Best Practices

• Limit font families: 2–3 max per project (e.g., sans-serif for headings, serif for body).
• Use system fonts for web: Reduces load time (e.g., -apple-system, BlinkMacSystemFont in CSS).
• Test on multiple devices: Fonts render differently on iOS (San Francisco) vs. Android (Roboto).
• Follow brand guidelines: e.g., Nepal Rastra Bank uses Garamond; Khalti uses Roboto.

---

Exam Tip

This unit is heavily tested in TU/PU exams through:

1. Short Questions (5–10 marks):

   • Define kerning vs. tracking.
   • Differentiate serif and sans-serif fonts with examples.
   • Explain how leading affects readability.

2. Long Questions (15–25 marks):

   • Design a typography scheme for a given scenario (e.g., a bank’s loan interest rate notice).
     • Example Answer Structure:
       • Font choices (serif for formality, sans-serif for digital).
       • Hierarchy (H1: Loan Amount, H2: Interest Rate, Body: Terms).
       • Accessibility (16px minimum, 75% contrast).
   • Compare two fonts (e.g., Arial vs. Times New Roman) with pros/cons for digital vs. print.
   • Trace the workflow of creating a typography-heavy multimedia asset (e.g., a YouTube thumbnail).

3. Practical (20–30 marks):

   • Given a mock-up, identify typography errors (e.g., poor kerning in a logo, low contrast in a button).
   • Optimize a text-heavy image for web use (e.g., convert to SVG, adjust leading).

Key Formulas to Remember:

• Optimal line length: 45–75 characters per line (for readability).
• Contrast ratio: Use WebAIM Contrast Checker to verify compliance.

---

Final Note: Typography is 50% technical (tools, formats) and 50% creative (aesthetics, UX). Always justify your choices with real-world examples (e.g., "Khalti uses Roboto for readability on low-end phones").