Text & Typography: Fonts, Layouts, and Digital Design

Core Concepts

1. What is Typography?

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

• Font selection (serif vs. sans-serif, script, etc.)
• Text alignment (left, right, center, justified)
• Spacing (kerning, tracking, leading)
• Hierarchy (headings, subheadings, body text)

2. Types of Fonts

Fonts are categorized based on design, structure, and usage. The three primary classifications are:

3. Key Typography Terms

Understanding these terms is crucial for effective text design:

• Kerning: Adjusting space between two specific characters (e.g., "AV" or "To").
• Tracking: Uniform spacing across an entire block of text.
• Leading: Vertical space between lines of text (increases readability).
• Baseline: Invisible line where characters sit (e.g., the bottom of "g" or "j").
• X-Height: Height of lowercase letters (e.g., "x" or "o") excluding ascenders/descenders.
• Ascender/Descender: Parts of letters that extend above/below the x-height (e.g., "b" ascender, "p" descender).

| | | |

4. Readability and Legibility

• Legibility: How easily individual characters can be distinguished (e.g., font size, contrast).
• Readability: How comfortably text can be read for extended periods (e.g., line length, spacing).

Rules for Better Readability:

1. Font Size: Minimum 12pt for body text, 16pt+ for older audiences.
2. Line Length: 45–75 characters per line (too long = eye strain; too short = inefficient).
3. Contrast: Dark text on light backgrounds (or vice versa) for accessibility.
4. Color: Avoid red/green for colorblind users; use tools like WebAIM Contrast Checker.
5. Font Pairing: Combine fonts strategically (e.g., sans-serif for headings + serif for body text).

---

In the Real World

Typography isn’t just academic—it’s everywhere in apps and services we use daily:

1. eSewa & Khalti (Nepal)

   • Idea Used: Hierarchy and contrast in UI buttons.
   • How: Payment buttons (e.g., "Pay Now") use bold, high-contrast sans-serif fonts (like Roboto Bold) to stand out, while transaction details use smaller, readable sans-serif (e.g., Open Sans). Script fonts are avoided to prevent confusion in financial transactions.

2. Pathao (Ride-Hailing App)

   • Idea Used: Monospace fonts for code-like displays.
   • How: When users check ride estimates or driver IDs, Pathao uses monospace fonts (e.g., Consolas) for numerical data (e.g., "₹450" or "Driver ID: PKH-1234") to align numbers neatly and improve scanning speed.

3. Nepal Rastra Bank (NRB) Reports

   • Idea Used: Serif fonts for formal documents.
   • How: Official reports (e.g., inflation data) use Garamond or Times New Roman for authority and readability. Headings use bold sans-serif (e.g., Arial Black) for clarity.

4. YouTube (Global)

   • Idea Used: Tracking and kerning for brand consistency.
   • How: The YouTube logo uses custom kerning to tighten spacing between letters (e.g., "TT" in "YouTube"), making it instantly recognizable. Body text in descriptions uses Open Dyslexic (a dyslexia-friendly font) as an option.

5. Daraz (E-Commerce)

   • Idea Used: Font hierarchy in product listings.
   • How: Product titles use bold, large sans-serif (e.g., Montserrat Bold), while prices use red, high-contrast fonts (e.g., Impact) to draw attention. Reviews use smaller, readable sans-serif (e.g., Lato) to avoid clutter.

---

Worked Example: Designing a Bank Loan Notification

Scenario: Nepal Bank Limited sends an SMS to customers about a new loan scheme. How would you apply typography principles?

Given:

• Character limit: 160 characters.
• Audience: Urban professionals (age 25–45).
• Goal: High readability + urgency.

Solution:

1. Font Choice:

   • Heading (Loan Type): Bold sans-serif (e.g., Roboto Bold 14pt) for clarity.
   • Body (Details): Sans-serif (e.g., Open Sans 12pt) for readability.
   • Avoid script fonts (hard to read in SMS).

2. Spacing:

   • Leading: 1.2x font size (e.g., 14pt → 16.8pt spacing).
   • Tracking: Tighten by -0.5px to fit within 160 chars.

3. Hierarchy:

   **💰 NEW LOAN: 8% INTEREST**
   Apply now! ₹5L limit. 3yr tenure.
   Link: https://nepalbank.com/loan
   

   • Bold/emoji for urgency.
   • URL in monospace (if possible) for scannability.

4. Color Contrast:

   • Dark blue text (#003366) on white background (meets WCAG AA contrast ratio).

Why This Works:

• Sans-serif is ideal for digital screens.
• Short lines (160 chars) prevent eye strain.
• Emoji + bold guides the user to the CTA (call to action).

---

Typography Tools and Software

---

Common Mistakes to Avoid

1. Overusing decorative fonts in body text (hard to read).
2. Ignoring contrast (e.g., light gray text on white).
3. Poor line length (e.g., 100+ characters per line in a report).
4. Inconsistent font pairing (mixing 3+ fonts without hierarchy).
5. Not testing on mobile (small screens need larger fonts).

---

Exam Tip

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

1. Short Questions (5–10 marks):

   • Define kerning vs. tracking.
   • Differentiate serif vs. sans-serif fonts with examples.
   • Explain why leading improves readability.

2. Long Questions (15–25 marks):

   • Design a typography scheme for a given scenario (e.g., a newspaper headline vs. body text).
   • Compare two fonts (e.g., "Why would you use Garamond over Arial for a wedding invitation?").
   • Analyze a real-world example (e.g., "How does Pathao use typography in its app?").

3. Practical Tasks:

   • Create a mock-up of a magazine cover using typography principles.
   • Critique a poorly designed text layout (identify 3+ issues).

Key Focus Areas for Exams:

• Font classifications (serif/sans-serif/script).
• Readability rules (line length, contrast, font size).
• Tools (Adobe Photoshop, Google Fonts).
• Real-world applications (eSewa, YouTube, NRB reports).

Pro Tip:

• Memorize 2–3 fonts from each category (e.g., Times New Roman (serif), Arial (sans-serif), Brush Script (script)).
• Practice designing layouts for different mediums (print vs. digital).