Typography and Text Design

# CHAPTER 5

Typography and Text Design #

1. Introduction #

"Web design is 95% typography." This famous quote by Oliver Reichenstein remains absolutely true today. When a user opens an article, a dashboard, or a shopping app, they are not there to admire your drop shadows or your corner radiuses; they are there to consume information. If that information is difficult to read, the user will abandon the app instantly. Typography is not merely choosing a "pretty font" from a dropdown menu. It is a highly technical discipline involving exact mathematical ratios, spacing, and psychological hierarchy. In this chapter, we will master Typography and Text Design in Figma. We will utilize Google Fonts, establish an ironclad Visual Hierarchy, and manipulate Line Height and Letter Spacing to engineer maximum readability.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Insert and manipulate text utilizing the Figma Text Tool.

• Select modern, highly legible typefaces (e.g., Inter, Roboto).

• Establish Visual Hierarchy using Font Weight, Size, and Color.

• Calculate optimal Line Height (Leading) for paragraph readability.

• Adjust Letter Spacing (Tracking) for all-caps subheadings.

3. The Text Tool (T) #

Adding text in Figma is simple:

1. 1. Press T on your keyboard to select the Text tool.

1. 2. Click once on the canvas to create an auto-resizing text box (best for short titles or buttons).

1. 3. Click and drag to create a fixed-width text box (best for long paragraphs, where the text will automatically wrap to the next line).

Look at the Text panel on the right. You have access to thousands of free, commercial-ready fonts via Figma's native integration with Google Fonts.

4. Choosing the Right Font #

In UI design, you rarely use cursive, highly decorative, or "fun" fonts. You need absolute, utilitarian clarity.

• Serif Fonts (with "feet"): Classic, elegant, academic (e.g., *Merriweather, Playfair Display*). Good for long-form reading like Medium articles or news sites.

• Sans-Serif Fonts (no "feet"): Clean, modern, digital (e.g., *Inter, Roboto, Open Sans, SF Pro*). This is the absolute standard for 99% of modern UI design, SaaS dashboards, and mobile apps.

*Pro Tip:* A beginner tries to use 5 different fonts on one screen. A professional uses one highly versatile Sans-Serif font family (like *Inter*) and relies on different font *weights* to create variety.

5. Visual Hierarchy (Size, Weight, Color) #

When a user glances at a screen for 1 second, they should instantly know what the most important piece of information is. This is Visual Hierarchy. You establish hierarchy by contrasting three variables:

1. 1. Size: The Page Title (H1) should be massively larger (e.g., 32px) than the paragraph text (e.g., 16px).

1. 2. Weight (Thickness): The Title should be Bold or Semi-Bold. The paragraph should be Regular.

1. 3. Color: The Title should be a stark, dark gray (#111827). The secondary subtitle should be a lighter, muted gray (#6B7280) to de-emphasize it.

6. Line Height and Letter Spacing #

Picking the font is only 20% of typography. The other 80% is spacing.

1. Line Height (Leading): This is the vertical space between lines of text in a paragraph.

• *The Problem:* If lines are too tight, the eye gets confused and jumps to the wrong line. If they are too loose, the paragraph looks like disconnected sentences.

• *The Rule:* Paragraph Line Height should generally be 140% to 150% of the font size. (If your font is 16px, set the Line Height in Figma to 24px or 150%).

2. Letter Spacing (Tracking): This is the horizontal space between individual letters.

• *The Rule:* Never touch this for normal paragraph text! The font designer already optimized it.

• *The Exception:* When you use ALL CAPS for a tiny subheading (e.g., OVERVIEW), the capital letters cluster too tightly. You should *increase* the letter spacing (e.g., 10% or 1px) to make all-caps readable.

7. Diagrams/Visual Suggestions #

*Visual Concept: Bad vs. Good Hierarchy* Panel 1 (Bad): A card where the Title, the Date, and the Paragraph are all Roboto, 16px, Regular weight, and Black. It looks like an unreadable block of mud. Panel 2 (Good): The same card.

• Title: 24px, Bold, Dark Gray.

• Date: 12px, Medium, Light Gray, ALL CAPS, Letter spacing 5%.

• Paragraph: 16px, Regular, Medium Gray, Line Height 150%.

This visual proves that you don't need different fonts to make a design look incredibly professional; you just need mathematical contrast.

8. Best Practices #

• The Minimum Font Size: Never design paragraph text smaller than 16px for web, or 14px for mobile. Designers using high-resolution 4K monitors often mistakenly make text 12px because it looks "clean and minimal" to them. However, when a normal user views it on a standard laptop, it is completely illegible. 16px is the golden standard for body text.

9. Common Mistakes #

• Center-Aligning Paragraphs: Beginners love to use "Align Center" for all their text because they think it looks balanced. Center alignment forces the human eye to search for the starting point of every new line because the starting edge is jagged. *The Rule:* You can center-align a short Title (1-2 lines). You must ALWAYS Left-Align paragraphs of text (3+ lines) for readability.

10. Mini Project: Build a Typography Scale #

Let's build a reusable mathematical hierarchy system in Figma.

1. 1. Press T and click the canvas. Type "Heading 1".

• Settings: Font Inter, Size 32, Weight Bold, Color #111827.

1. 2. Duplicate the text (Select it, hold Alt/Option, and drag down). Type "Heading 2".

• Settings: Font Inter, Size 24, Weight Semi-Bold, Color #374151.

1. 3. Duplicate again. Type "Body Text".

• Settings: Font Inter, Size 16, Weight Regular, Color #4B5563, Line Height 150%.

1. 4. Duplicate again. Type "CAPTION".

• Settings: Font Inter, Size 12, Weight Medium, Color #9CA3AF, Letter Spacing 5%.

*You have just engineered a professional, highly readable typography system ready to be used in a real app!*

11. Practice Exercises #

1. 1. Draw a fixed-width text box, paste in two paragraphs of "Lorem Ipsum" dummy text. Change the Line Height from 100% (Auto) to 150% and observe the massive improvement in readability.

1. 2. Create an All-Caps label (e.g., ENTER PASSWORD). Experiment with the Letter Spacing setting, increasing it to see how it improves the legibility of capitalized text.

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the concept of Visual Hierarchy in typography. If you are restricted to using a single font size (e.g., 16px) for an entire card, how can you still establish a clear visual hierarchy between the Title and the Date?

• Q: Why is center-aligning a massive, 5-line paragraph considered a severe usability failure in UI design? What biological mechanism of reading does it disrupt?

• Q: Explain the specific scenario where a UI Designer should explicitly increase the Letter Spacing (Tracking) of a word, and conversely, when they should absolutely leave the Letter Spacing alone.

14. FAQs #

Q: Do I need to buy expensive fonts for my designs? A: No! Figma natively integrates with the entire Google Fonts library, which contains thousands of completely free, open-source fonts licensed for commercial use. Fonts like *Inter, Roboto, Open Sans*, and *Montserrat* are used by billion-dollar corporations and are available to you for free in the Figma dropdown.

15. Summary #

In Chapter 5, we acknowledged that the vast majority of digital interface consumption is simply reading. We abandoned the chaotic use of decorative fonts, embracing the utilitarian clarity of Sans-Serif workhorses like *Inter* and *Roboto*. We engineered Visual Hierarchy, realizing that the human eye is guided not by chance, but by mathematical contrasts in font Size, Weight, and muted Color. Finally, we manipulated the invisible negative space—expanding Line Height to make paragraphs breathable, and injecting Letter Spacing into all-caps labels, ensuring our interfaces are not merely beautiful, but effortlessly legible.

16. Next Chapter Recommendation #

We have perfect shapes, beautiful colors, and readable text. But if we place them randomly on the screen, the app will look like a chaotic mess. We must learn the invisible mathematics of alignment. Proceed to Chapter 6: Layouts and Spacing Principles.