Why this matters
As a Data Visualization Engineer, you ship dashboards, reports, and embedded charts that must be readable at a glance. A solid typography scale ensures:
- Consistent sizing for titles, axis labels, ticks, legends, and data labels.
- Clarity in dense tables and KPI cards without wasting space.
- Responsive behavior across mobile, laptop, and wallboard displays.
- Design tokens that developers can implement once and reuse everywhere.
Real tasks youll face:
- Define sizes for chart titles, subtitles, axis labels, and tick text that balance readability and density.
- Choose a scale that preserves hierarchy without crowding small screens.
- Standardize numerals (e.g., tabular lining digits) so columns and KPIs align visually.
Concept explained simply
A typography scale is a set of type sizes that step up and down from a base size using a fixed ratio. Example: base = 14, ratio = 1.2, sizes: 14, 17, 20, 24, 296.
Why use it? You get predictable hierarchy, fewer arbitrary sizes, and easier maintenance in a design system.
Mental model
Think of a ladder:
- The middle rung is your base size (t0).
- Each step up multiplies by the ratio (t1, t26).
- Each step down divides by the ratio (t-1, t-26).
In code and design tokens, name rungs as t-2, t-1, t0, t1, t2. Use rem units so the whole ladder can scale with one change.
Core components of a typographic scale
1) Base size
Pick 14px for dense data UIs or 16px for general readability. Represent as 1rem in your system so it can scale.
2) Ratio
Use a gentle ratio for dashboards: 1.125C1.25. Larger ratios create big jumps and wasted space.
3) Tokens (names)
Name steps as t-2, t-1, t0, t1, t2, t3. Map each to a font-size value (in rem) and a default line-height.
4) Line-height
Body and labels: ~1.4C1.6. Short labels and headings: ~1.1C1.3. Use unitless line-height values so they scale with size.
5) Units & rounding
Use rem for sizes. Round to a consistent grid (e.g., nearest 2px). Consistent rounding prevents jittery layouts.
6) Responsive rules
Mobile: consider smaller base or smaller ratio. Large screens: same ratio with a slightly larger base.
7) Numeric typography
Prefer tabular lining digits for KPIs and tables so numbers align. Use regular proportional digits for paragraphs.
8) Accessibility
Minimum comfortable size for dense tables is ~12px; aim for 14px+ if possible. Maintain sufficient color contrast (body text ~4.5:1, large text ~3:1).
9) Chart-specific mapping
- Chart title: t2
- Subtitle/description: t1
- Axis label: t-1 or t0
- Tick text: t-2 or t-1
- Legend labels: t-1 or t0
- Data labels: t-1 (increase if sparse, decrease if dense)
- KPI number: t3, unit/suffix: t-1
Worked examples
Example 1: Build a modular scale for a dense dashboard
Choice: base = 14px (t0), ratio = 1.2. Compute sizes and snap to nearest 2px for consistency.
- t-2: 14 / 1.2^2 = 9.7 C10px
- t-1: 14 / 1.2 = 11.7 C12px
- t0: 14px
- t1: 14 * 1.2 = 16.8 C17px (round to 16 or 18; pick 16px to align with grid)
- t2: 14 * 1.2^2 = 20.2 C20px
- t3: 14 * 1.2^3 = 24.3 C24px
Result (rounded): t-2=10, t-1=12, t0=14, t1=16, t2=20, t3=24. Line-heights: 1.4 for t-2Ct0; 1.3 for t1Ct3.
Example 2: Map the scale to a chart UI
- Dashboard H1: t3 (24px)
- Chart title: t2 (20px)
- Subtitle: t1 (16px)
- Axis label: t0 or t-1 (14px or 12px)
- Tick text: t-2 (10px) if many ticks; t-1 (12px) if fewer
- Legend: t-1 (12px)
- Data labels: t-1 (12px) unless overlap occurs; then t-2 (10px) or hide on small screens
- Primary KPI number: t3 (24px) with tabular lining digits; unit (e.g., %) at t-1 (12px)
Example 3: Responsive rules across breakpoints
- Mobile (base ~14, ratio 1.2): t-2=10, t-1=12, t0=14, t1=16, t2=20, t3=24. Reduce long labels; prefer wrapping over truncation for axis labels.
- Desktop (base ~16, ratio 1.2): t-2=11, t-1=13, t0=16, t1=19, t2=23, t3=27 (snap to nearest 2px: 12, 14, 16, 18, 22, 26).
- Wallboard (base ~18, ratio 1.2): increase one step for titles (title: t3), keep ticks at t-1 or t0 for density.
Tip: Keep token names (t-2Ct3) stable across breakpoints; only the values behind them change.
Guided exercise (youll submit this below)
Exercise EX1: Define a typography scale for a BI dashboard and map it to chart elements.
- Choose a base (14 or 16) and a ratio (1.2 or 1.25).
- Calculate sizes for t-2 to t3. Snap to a consistent grid (nearest 2px).
- Assign line-heights: 1.4 for small text, 1.3 for large.
- Map tokens to: dashboard title, chart title, subtitle, axis label, tick text, legend, data labels, KPI number and unit.
- Add a responsive rule: how values change on mobile vs desktop (keep token names stable).
Checklist
- One base and one ratio chosen.
- t-2Ct3 values present and consistently rounded.
- Line-heights included.
- Token-to-element mapping complete.
- Responsive adjustment described.
- Mention tabular lining digits for KPIs and tables.
Common mistakes and how to self-check
- Jumping ratios. Sizes arent derived from one ratio and look random.
Self-check
Divide each size by the previous. If numbers differ a lot, your scale isnt consistent.
- Too large ratio. Headings dominate, labels wrap too much.
Fix
Use 1.125C1.2 for data-dense views.
- Using px everywhere. Hard to scale across breakpoints.
Fix
Use rem for font-size and unitless line-height. Change the base per breakpoint.
- Proportional digits in tables/KPIs. Numbers misalign.
Fix
Use tabular lining digits for numeric UIs. Many fonts provide this via font-feature settings.
- Low contrast small text.
Fix
Keep small text at sufficient contrast (~4.5:1). Increase size or weight if needed.
- Line-height too tight on labels.
Fix
Use ~1.4 for multi-line labels and table cells to prevent crowding.
Mini challenge
Your dashboards data labels overlap at t-1. Propose a minimal-change plan using your scale (without redesigning the chart):
- Option A: Decrease data labels one step (t-1 t-2) and increase line-height by 0.1.
- Option B: Keep size, reduce line-height.
- Option C: Increase size and hide every other label.
Pick the best option and explain why. Hint: preserve readability, minimize reflows.
Learning path
- Typography basics: units (px, rem), line-height, font weights.
- Modular scales: base size, ratio, rounding rules.
- Chart mapping: titles, labels, ticks, legends, KPIs.
- Responsive strategy: token stability, value changes per breakpoint.
- Accessibility: minimum sizes, contrast, numeric alignment.
Practical projects
- Create a type scale token file (t-3 to t4) and apply it to two dashboards: a dense table view and a KPI overview.
- Refactor an existing report to use tabular lining digits and show before/after column alignment.
- Build a responsive specimen: display each token at mobile, desktop, and wallboard values with annotations.
Who this is for
- Data Visualization Engineers defining reusable chart components.
- BI developers building dashboards and reports.
- Product analysts who publish recurring visual analyses.
Prerequisites
- Basic CSS knowledge (rem, line-height, font-weight).
- Familiarity with common chart parts (titles, axes, ticks, legends).
- Comfort with simple ratio math and rounding.
Next steps
- Complete the Guided Exercise EX1 below and compare with the sample solution.
- Take the Quick Test to check your understanding. Note: Anyone can take the test; only logged-in users will have progress saved.
- Apply your scale to a current dashboard and gather feedback from at least one non-designer teammate.