Font size and line height in Figma - Deep Dive

Overview - Font size and line height

What is it?

Font size is how tall the letters appear on your screen or paper. Line height is the space between lines of text, making it easier to read. Together, they control how text looks and feels in your designs. Adjusting these helps make information clear and comfortable to read.

Why it matters

Without proper font size and line height, text can be too small to read or too crowded, causing eye strain and confusion. Good control over these makes reports and dashboards easier to understand quickly. This improves decision-making and reduces mistakes caused by misreading data.

Where it fits

You should know basic text editing and layout design before learning this. After mastering font size and line height, you can explore typography principles and accessibility in design. This is part of creating effective visual reports and dashboards.

Mental Model

Core Idea

Font size sets the height of letters, and line height sets the vertical space between lines, together shaping text readability and comfort.

Think of it like...

Imagine writing on lined paper: font size is how big your handwriting is, and line height is how far apart the lines on the paper are. If your handwriting is big but lines are too close, it feels cramped; if lines are too far, it feels disconnected.

Text Block Example:
┌───────────────────────────┐
│ Font Size: 16px           │
│ Line Height: 24px         │
│                           │
│ This is a line of text.   │
│                           │
│ This is the next line.    │
└───────────────────────────┘

Build-Up - 6 Steps

1

Foundation

Understanding Font Size Basics

Concept: Font size controls how tall each letter appears in your text.

In Figma, font size is measured in pixels (px). Increasing font size makes letters bigger and easier to see. For example, 12px is small text, while 24px is large text. You can change font size by selecting text and adjusting the size value.

Result

Text changes size on screen, becoming easier or harder to read depending on the value.

Knowing font size basics helps you control how visible and clear your text is in any design.

2

Foundation

Grasping Line Height Fundamentals

Concept: Line height sets the vertical space between lines of text.

In Figma, line height is also measured in pixels or as a multiplier of font size. It controls how much space appears above and below each line. For example, a line height of 20px with a font size of 16px adds 4px extra space between lines.

Result

Lines of text become spaced out or tight, affecting readability.

Understanding line height is key to making text blocks comfortable to read without crowding or gaps.

3

Intermediate

Balancing Font Size and Line Height

🤔Before reading on: do you think increasing font size requires increasing line height? Commit to your answer.

Concept: Font size and line height must work together to keep text readable and visually balanced.

When you increase font size, you usually need to increase line height too. If line height stays too small, lines overlap or feel cramped. If line height is too big, lines feel disconnected. A common rule is line height about 1.5 times font size for body text.

Result

Text blocks look neat and are easy to scan without strain.

Knowing how font size and line height relate prevents common readability problems in reports and dashboards.

4

Intermediate

Using Relative vs Absolute Line Height

🤔Before reading on: do you think setting line height as a number (like 1.5) or pixels (like 24px) changes how text behaves? Commit to your answer.

Concept: Line height can be set as a fixed pixel value or a relative number that scales with font size.

In Figma, you can set line height as pixels (absolute) or as a multiplier (relative). Relative line height (like 1.5) adjusts automatically if font size changes, keeping spacing consistent. Absolute line height stays fixed, which can cause spacing issues if font size changes.

Result

Relative line height keeps text spacing flexible and consistent across different font sizes.

Choosing relative line height helps maintain design consistency and responsiveness.

5

Advanced

Impact of Font Size and Line Height on Accessibility

🤔Before reading on: do you think bigger font size always improves accessibility? Commit to your answer.

Concept: Font size and line height affect how easily people with vision or reading difficulties can use your designs.

Accessibility guidelines recommend minimum font sizes (usually 16px or more) and sufficient line height to avoid crowding. Too small font or tight lines make reading hard for many users. Proper sizing improves comprehension and reduces eye strain, especially on screens.

Result

Designs become usable by a wider audience, including those with disabilities.

Understanding accessibility needs ensures your BI reports reach and help everyone effectively.

6

Expert

Advanced Typography Control in Figma

🤔Before reading on: do you think line height affects only vertical spacing, or can it influence overall layout flow? Commit to your answer.

Concept: Line height influences not just text readability but also the overall layout and visual rhythm of your design.

In Figma, adjusting line height affects how text blocks push or pull surrounding elements. Designers use this to create visual hierarchy and guide the viewer’s eye. Combining font size and line height with other typography settings like letter spacing and paragraph spacing creates polished, professional reports.

Result

Your BI dashboards and reports look balanced, clear, and visually appealing.

Mastering typography details elevates your design from functional to professional and engaging.

Under the Hood

Font size sets the height of the font's em square, which defines the space each character occupies vertically. Line height controls the distance between the baselines of consecutive lines of text. Internally, rendering engines calculate line boxes using font metrics and line height to position text lines correctly, ensuring no overlap and consistent spacing.

Why designed this way?

This separation allows designers to control letter size independently from spacing, providing flexibility for readability and aesthetics. Early digital typography inherited these concepts from print, where physical space between lines was crucial. The design balances clarity with efficient use of space.

┌───────────────┐
│ Font Size     │  ← Height of letters (em square)
├───────────────┤
│ Line Height   │  ← Distance between baselines
├───────────────┤
│ Text Line 1   │
│───────────────│
│ Text Line 2   │
│───────────────│
│ Text Line 3   │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does increasing font size alone always make text more readable? Commit to yes or no.

Common Belief: Bigger font size always means better readability.

Reality: Without adjusting line height, bigger font can cause lines to overlap or feel cramped, reducing readability.

Why it matters: Ignoring line height leads to cluttered text blocks that confuse readers and reduce report clarity.

Quick: Is line height just empty space that doesn’t affect reading? Commit to yes or no.

Common Belief: Line height is just blank space and doesn’t impact how text is read.

Reality: Line height guides the eye from one line to the next, improving reading flow and comprehension.

Why it matters: Neglecting line height can cause readers to lose their place or misread data in reports.

Quick: Does setting line height in pixels always work better than relative values? Commit to yes or no.

Common Belief: Fixed pixel line height is more precise and better than relative line height.

Reality: Relative line height scales with font size, maintaining consistent spacing across different text sizes.

Why it matters: Using fixed line height can break layouts when font sizes change, causing inconsistent spacing.

Quick: Can font size and line height alone guarantee accessible text? Commit to yes or no.

Common Belief: Just setting font size and line height is enough for accessibility.

Reality: Accessibility also requires color contrast, font choice, and other factors beyond size and spacing.

Why it matters: Focusing only on size and spacing can leave users with disabilities struggling to read your reports.

Expert Zone

1

Line height affects not only readability but also the vertical rhythm of the entire page, influencing user focus and flow.

2

Relative line height values allow responsive typography that adapts seamlessly across devices and screen sizes.

3

Combining font size and line height with letter spacing and paragraph spacing creates nuanced control over text density and visual hierarchy.

When NOT to use

Avoid fixed pixel line heights in responsive or dynamic text environments; use relative units instead. For very small text like captions, consider slightly tighter line height but test readability. When designing for print, line height rules differ due to physical paper constraints.

Production Patterns

Professionals set base font size and line height in style guides to ensure consistency across dashboards. They use relative line heights for body text and fixed values for headings. Accessibility audits check these settings to meet standards. Designers also adjust line height to balance dense data tables with readable labels.

Connections

Visual Hierarchy

Font size and line height are key tools to build visual hierarchy in design.

Understanding how text size and spacing guide attention helps create clearer, more effective BI dashboards.

Accessibility Design

Proper font size and line height are foundational for accessible user interfaces.

Knowing typography basics supports creating reports usable by people with vision impairments or reading difficulties.

Human Factors Psychology

Font size and line height influence cognitive load and reading speed, studied in human factors.

Applying psychological principles to typography improves how users process and retain information in BI tools.

Common Pitfalls

#1 Using too small font size with default line height.

Wrong approach:

Font size: 10px; Line height: 12px

Correct approach:

Font size: 10px; Line height: 15px

Root cause:

Assuming default line height fits all font sizes without adjusting for readability.

#2 Setting fixed pixel line height that doesn’t scale with font size changes.

Wrong approach:

Font size: 14px; Line height: 20px (fixed); then font size changed to 18px but line height stayed 20px

Correct approach:

Font size: 14px; Line height: 1.5 (relative); font size changed to 18px and line height scales to 27px

Root cause:

Not using relative line height causes inconsistent spacing when font size changes.

#3 Ignoring line height when increasing font size for accessibility.

Wrong approach:

Font size: 20px; Line height: 20px

Correct approach:

Font size: 20px; Line height: 30px

Root cause:

Believing bigger font alone improves accessibility without adjusting spacing.

Key Takeaways

Font size controls how tall letters appear, while line height controls the space between lines of text.

Proper balance between font size and line height is essential for clear, readable text in BI reports and dashboards.

Using relative line height values helps maintain consistent spacing when font sizes change.

Accessibility depends on both font size and line height, but also requires other design considerations.

Mastering these typography basics improves the clarity, usability, and professionalism of your business intelligence visuals.