flowchart TD
H["Type<br>Hierarchy"]
H --> T["Title<br>~24–32 pt, bold"]
T --> S["Subtitle<br>~14–18 pt, regular,<br>often muted"]
S --> B["Body and labels<br>~10–12 pt, regular"]
B --> C["Caption and source<br>~8–10 pt, regular,<br>muted"]
style H fill:#e3f2fd,stroke:#1976D2
style T fill:#fce4ec,stroke:#AD1457
style S fill:#fff3e0,stroke:#EF6C00
style B fill:#e8f5e9,stroke:#388E3C
style C fill:#ede7f6,stroke:#4527A0
15 Typography and Layout Design
15.1 Why Typography and Layout Matter
A chart is read in two passes — first the picture, then the words. Typography and layout determine whether the second pass works.
A dashboard or report is far more than the charts it contains. The titles, axis labels, annotations, captions, and surrounding prose carry as much of the meaning as the chart itself, and the way those elements are arranged on the page determines whether the reader sees the message or has to hunt for it.
Typography governs how text is rendered — the choice of typeface, weight, size, spacing, and hierarchy. Layout governs how the elements on a page are positioned in relation to one another. Together, they form the silent structure that lets the reader find the answer to their question quickly, or buries that answer in clutter. The classical reference on typography remains The Elements of Typographic Style by Robert Bringhurst (2013), and the classical reference on dashboard layout remains Information Dashboard Design by Stephen Few (2013).
15.2 Typography Foundations
A small set of structural ideas underpins every type decision:
Typeface and Font: A typeface is the design (Helvetica, Garamond, Inter); a font is a specific instance (Helvetica Bold, 12 pt). The two terms are often used interchangeably, but the distinction is useful when discussing families and weights.
Serif, Sans-Serif, Monospace: Serif typefaces (Garamond, Times, Source Serif) carry small decorative strokes at the ends of letters; sans-serif typefaces (Helvetica, Inter, Roboto, Source Sans) do not; monospace typefaces (Courier, JetBrains Mono, IBM Plex Mono) give every character the same horizontal width.
Type Anatomy: The x-height is the height of lowercase letters; tall x-height aids legibility at small sizes. Ascenders and descenders extend above and below the body.
Weight and Style: Weight ranges from thin and light to regular, medium, semibold, bold, and black. Style includes upright (Roman) and italic. Used together they create hierarchy.
Spacing: Kerning is the adjustment of space between two specific letters. Tracking is the uniform letter-spacing across a word or line. Leading (line-height) is the vertical space between lines.
Type Hierarchy: A clear ladder of size and weight tells the reader, at a glance, which elements are most important. Three to four levels — title, subtitle, body, caption — is usually sufficient.
15.3 Typography in Analytics Contexts
Charts and dashboards have specific typographic needs that differ from prose documents. Three considerations matter most: legibility at small sizes, consistency across screen and print, and the rendering of numbers.
Sans-serif for screen, serif acceptable for print: Sans-serif faces with a tall x-height (Inter, Roboto, Source Sans, Helvetica Neue) read well on screen at small sizes; serif faces tend to perform better in long-form printed prose.
Tabular Figures (Lining Numerals): When numbers must align in columns or update on dashboards, use a font with tabular figures — every digit occupies the same horizontal width, so digits stack cleanly. Most modern professional families ship with both proportional and tabular variants. Without tabular figures, numbers in a table jitter as digits change.
Limit the Type Palette: One or two typefaces are usually enough. A common, robust pairing is one strong sans-serif for display and headings and either the same sans-serif or one serif for body. Three or more typefaces in the same chart or dashboard introduce clutter.
Favour Readable Sizes: Body text and chart labels rarely belong below 10 pt for screen viewing or 9 pt for print. Captions and source notes can drop a step lower. The smallest text in a chart should still be legible to a reader at the back of a meeting room.
Reserve Italic for Definitional Use: Italic is for terms being defined, titles of works, and emphasis on a single word. Italic for entire sentences slows the reader and reduces legibility.
Avoid All-Caps for Body Text: All-caps removes the differential information carried by ascenders and descenders and slows reading by twenty per cent or more. Reserve all-caps for short labels and section dividers.
TipRecommended Type Pairings for Analytical Work
| Use | Recommended Families | Notes |
|---|---|---|
| Display / Title | Inter, Helvetica Neue, Source Sans Pro, IBM Plex Sans | Strong sans-serif with multiple weights |
| Body / Labels | Inter, Roboto, Source Sans Pro, IBM Plex Sans | Tall x-height; legible at 10 pt |
| Numbers in Tables | Inter Tabular, IBM Plex Sans Mono, Roboto Mono | Tabular figures keep columns aligned |
| Long-Form Print Prose | Source Serif, IBM Plex Serif, Charter, Equity | Comfortable for paragraphs |
| Code Blocks | JetBrains Mono, IBM Plex Mono, Fira Code, Source Code Pro | Monospace; clear distinction of similar characters |
The point is not to memorise a list, but to choose deliberately. Most institutional designs run on three or four families chosen once and applied consistently across all reports and dashboards.
15.4 Layout Foundations
A page or screen with no layout discipline forces the reader to construct order from clutter. A page with deliberate layout makes the order obvious before the reader has read a word. Four principles do most of the work.
15.4.1 Grid Systems
A grid is an invisible scaffold of horizontal and vertical lines on which content is placed. Grids enforce alignment, allow elements to be reused at predictable proportions, and make complex layouts feel calm.
- The twelve-column grid popularised by web design divides the page into twelve equal columns. Elements span any whole number of columns — a chart spanning eight, a sidebar spanning four — and the grid keeps them perfectly aligned.
- A modular grid combines vertical columns and horizontal rows, producing rectangular cells that elements can span. Useful for dashboards with many small panels.
- A baseline grid aligns the bottom of every line of text to a consistent vertical rhythm, giving paragraphs a coherent feel even across different sizes.
A useful test: every element on the page should align to a grid line. Where alignment breaks down, the eye notices, even when it cannot say why.
15.4.2 Visual Hierarchy
Visual hierarchy is the deliberate ordering of importance through size, weight, colour, and position. The reader’s eye is drawn to whatever is largest, boldest, most colourful, or most isolated. Designers use this to guide attention without instructions.
A small set of rules:
- Size: Larger elements feel more important.
- Weight: Bolder text feels more important than light.
- Colour and contrast: A coloured element among neutral elements is read first.
- Position: Top and left positions feel more important than bottom and right.
- Isolation: Whitespace around an element makes it feel more important.
15.4.3 Whitespace
Whitespace (or negative space) is the empty area around and between elements. It is not wasted space; it is the space that lets the eye separate one thing from another and lets the page feel coherent rather than crowded.
Three uses of whitespace are particularly useful in analytics design:
- Macro whitespace — the wide margins around a page or dashboard — gives the whole composition room to breathe.
- Meso whitespace — the gaps between charts, sections, or columns — separates groups of related content.
- Micro whitespace — the spacing between letters, lines, and paragraphs — keeps the text legible.
A common pattern is the rule of thirds for whitespace: roughly one third of the page should be empty. Cluttered analytics dashboards almost always violate this rule.
15.4.4 Alignment and Proximity
Two of the strongest layout principles are deliberately invoked rather than inherited from typography:
- Alignment: Every element should align with at least one other element. Random positioning produces visual noise; consistent alignment produces calm.
- Proximity: Elements that belong together should be close together; elements that do not belong together should be separated by clear whitespace. Proximity does the work of grouping without borders or boxes.
These two principles will repair a surprisingly large fraction of poorly designed dashboards on their own.
15.5 Dashboard Layout
A dashboard is a particular kind of layout problem: many elements, often live, often updated by people other than the original designer, often viewed at speed and at small sizes. Stephen Few (2013) articulated the rules that have become standard practice in business intelligence design.
flowchart TD
Z["Dashboard<br>(Gutenberg layout)"]
Z --> Q1["Q1: Primary optical area<br>Most important KPI<br>or summary"]
Z --> Q2["Q2: Strong area<br>Supporting context<br>or filters"]
Z --> Q3["Q3: Weak area<br>Secondary detail<br>or breakdown"]
Z --> Q4["Q4: Terminal area<br>Call to action,<br>summary, source"]
style Z fill:#e3f2fd,stroke:#1976D2
style Q1 fill:#fce4ec,stroke:#AD1457
style Q2 fill:#fff3e0,stroke:#EF6C00
style Q3 fill:#fff8e1,stroke:#F9A825
style Q4 fill:#e8f5e9,stroke:#388E3C
A few practical rules for dashboard layout:
Most important content in the upper left: The reader’s eye lands there first. Place the headline KPI, the period summary, or the most-acted-on metric in the primary optical area.
Supporting context across the top row: A short row of summary cards or KPIs above the main panel gives the reader headline numbers before they read the charts.
Detail and breakdown in the middle: The largest, most data-rich panels belong below the headline strip, where the reader’s attention has settled.
Call to action and source notes in the bottom right: The terminal area is where the eye comes to rest. Place the next-step prompt, the data refresh time, and the source citation here.
Group by purpose, not by data origin: A dashboard is organised around the questions the reader asks, not around which database the data came from.
Match cadence to layout: Daily-refresh metrics belong in one section, monthly-refresh metrics in another, so the reader does not mistake stale numbers for fresh ones.
Limit each view to a single question: A dashboard that tries to answer ten questions answers none of them well. Build separate views for separate audiences.
15.6 Information Density
A useful concept from Tufte: a chart’s quality is partly measured by its information density — the meaningful data values per unit area. Low-density charts (a half page devoted to two numbers) waste the reader’s attention; high-density, well-organised charts respect their time.
Practical guidance:
- Use the available space: A chart should fill the panel or page region allotted to it, not float in the middle of empty real estate.
- Prefer small multiples: A grid of small charts often packs more information than one large chart while remaining readable.
- Sparklines and inline numbers: Small embedded charts in tables or text bring data into prose without dedicating a whole panel.
- Trim non-data ink: Borders, gridlines, three-dimensional effects, and decorative backgrounds all reduce density without contributing meaning.
The aim is not to maximise density at all costs — beyond a point, density harms readability — but to remove what does not earn its place.
15.7 Multi-Chart Composition
When several charts must appear together — a report, a dashboard, a slide deck — three composition patterns recur:
Small Multiples: A grid of identically structured charts, each showing the same variables for a different category, region, or period. The eye moves quickly across the panels and detects pattern, exception, and similarity.
Hub and Spoke: A central headline chart accompanied by smaller supporting charts that drill into specific aspects. The reader sees the summary first and then explores the detail.
Story Arc: A linear sequence of charts that walk the reader through a narrative — context, complication, finding, recommendation. The order is the message.
The pattern depends on whether the goal is comparison (small multiples), explanation (hub and spoke), or persuasion (story arc).
15.8 Common Pitfalls
Three or More Typefaces in One View: Mixing too many type families produces visual noise. One or two is almost always enough.
Inconsistent Type Hierarchy: Different report sections using different sizes for the same level of heading. The reader cannot rely on type to navigate.
Centred Body Text: Centring runs of body text creates a ragged left edge and slows reading. Reserve centring for short titles.
Tiny Type: Chart labels at 7 or 8 pt that no one in the back of a meeting room can read.
All-Caps Body Text: Removes the visual differentiation that ascenders and descenders provide.
Proportional Numbers in Tables: Letting digits jitter as values change. Tabular figures fix this immediately.
No Grid: Random positioning of charts and panels, with elements not aligning to anything. The eye reads disorder.
Cluttered Margins: Crowding charts to the edge of the page or screen. Macro whitespace is part of the composition, not a waste of space.
Ignoring Reading Direction: Placing the most important element in the bottom-right of a layout, where the eye comes to rest rather than where it lands.
Borders Everywhere: Boxes around every chart, every section, every cell. Proximity and alignment do the work of grouping; borders add clutter.
No Visual Hierarchy: Every element drawn at the same size and weight. The reader has no clue where to look first.
Decorative Type for Headings: Display fonts chosen for novelty rather than legibility. Headings carry the most weight of any text in a report; typeface choice should be conservative.
15.9 Illustrative Cases
The following cases illustrate how typography and layout decisions reshape the readability of business artefacts. They describe common situations and the redesign reasoning.
A Quarterly Report Redesign
A finance team’s quarterly report uses three typefaces — Times for body, Calibri for headings, Arial for table numbers — and centres every paragraph. The redesign moves to one family (IBM Plex Sans for headings and body, IBM Plex Sans Tabular for numerical columns), left-aligns body text, and introduces a clear three-level hierarchy. The report is no shorter, but reads in considerably less time.
A Branch-Performance Dashboard
A retail bank’s branch dashboard scatters fifteen panels across the screen with no obvious order. The redesign places the headline KPI strip across the top, a sorted bar chart of regional performance in the upper-left, supporting trend and detail charts in the middle, and the reporting period and refresh time in the bottom-right. The Gutenberg-honoured layout reduces eye travel and makes the headline immediately visible.
A Public Health Report
A health agency publishes a report with extensive tables of district-level statistics. The original tables use a body sans-serif for headings and the same family at smaller size for numbers, so the columns of digits do not align. The redesign switches the numerical columns to a tabular variant, and the eye can now scan a column for outliers without re-anchoring at every row.
An Executive Summary Slide
An executive summary slide tries to fit six charts and six paragraphs of commentary on a single landscape slide. The redesign reduces the slide to one headline chart, three numbers in a top strip, and one short paragraph of commentary at the bottom. The full breakdown moves to an appendix slide that is only opened on request. The summary slide now does its job in five seconds rather than fifty.
Summary
| Concept | Description |
|---|---|
| Foundations | |
| Why Typography and Layout Matter | A chart is read in two passes: first the picture, then the words; type and layout decide whether the second pass works |
| Typography Fundamentals | |
| Typeface and Font | A typeface is the design; a font is a specific instance with weight and size |
| Serif | Decorative strokes at the ends of letters; better suited to long-form printed prose |
| Sans-Serif | No decorative strokes; reads well on screen at small sizes |
| Monospace | Every character has the same horizontal width; used for code and data |
| Type Anatomy | X-height, ascenders, and descenders that determine legibility at small sizes |
| Weight and Style | Thin to black weights and Roman to italic styles used together create hierarchy |
| Kerning | Adjustment of space between two specific letters |
| Tracking | Uniform letter-spacing across a word or line |
| Leading | Vertical space between lines of text |
| Type Hierarchy | Ladder of size and weight that tells the reader what is most important |
| Typography in Analytics | |
| Sans-Serif for Screen | Tall x-height sans-serif faces read well on screen at small sizes |
| Tabular Figures | Digits of equal width that keep numerical columns aligned |
| Limit Type Palette | One or two typefaces are usually enough; three or more produce clutter |
| Readable Sizes | Body and labels rarely belong below 10 pt screen or 9 pt print |
| Reserve Italic | Italic is for definitional use, titles of works, and emphasis on a single word |
| Avoid All-Caps Body | All-caps removes ascender and descender information and slows reading |
| Grid Systems | |
| Twelve-Column Grid | Twelve equal columns into which page elements span any whole number |
| Modular Grid | Vertical columns and horizontal rows producing rectangular cells |
| Baseline Grid | Aligns bottom of every line of text to a consistent vertical rhythm |
| Visual Hierarchy | |
| Size | Larger elements feel more important |
| Weight | Bolder text feels more important than light |
| Colour and Contrast | A coloured element among neutral elements is read first |
| Position | Top and left positions feel more important than bottom and right |
| Isolation | Whitespace around an element makes it feel more important |
| Whitespace | |
| Macro Whitespace | Wide margins around the whole page or dashboard |
| Meso Whitespace | Gaps between charts, sections, or columns |
| Micro Whitespace | Spacing between letters, lines, and paragraphs |
| Rule of Thirds | Roughly one third of the page should be empty whitespace |
| Alignment and Proximity | |
| Alignment | Every element should align with at least one other element |
| Proximity | Elements that belong together should be close; unrelated elements separated by whitespace |
| Dashboard Layout | |
| Most Important Upper Left | Place the headline KPI or summary in the primary optical area |
| Supporting Context Top Row | A short row of summary cards above the main panel for headline numbers |
| Detail and Breakdown Middle | The largest data-rich panels belong below the headline strip |
| Call to Action Bottom Right | Place next-step prompt, refresh time, and source citation in the terminal area |
| Group by Purpose | A dashboard is organised around the questions the reader asks, not the database the data came from |
| Match Cadence to Layout | Daily-refresh metrics in one section, monthly-refresh in another |
| Single Question per View | A dashboard that tries to answer ten questions answers none well |
| Information Density | |
| Information Density | Meaningful data values per unit area; respects the reader's time |
| Use the Available Space | A chart should fill its panel rather than float in empty space |
| Prefer Small Multiples | A grid of small charts often packs more information than one large chart |
| Sparklines and Inline | Tiny embedded charts in tables or text that bring data into prose |
| Trim Non-Data Ink | Borders, gridlines, and decorative backgrounds reduce density without meaning |
| Multi-Chart Composition | |
| Small Multiples Pattern | Grid of identically structured charts for each category, region, or period |
| Hub and Spoke Pattern | Central headline chart accompanied by smaller supporting drill-downs |
| Story Arc Pattern | Linear sequence of charts that walk the reader through a narrative |
| Common Pitfalls | |
| Three-Plus Typefaces | Pitfall of mixing too many type families and producing visual noise |
| Inconsistent Hierarchy | Pitfall of different sections using different sizes for the same level of heading |
| Centred Body Text | Pitfall of centring runs of body text and creating a ragged left edge |
| Tiny Type | Pitfall of chart labels too small for readers in the back of a meeting room |
| All-Caps Body | Pitfall of body text in all caps removing differential ascender-descender information |
| Proportional Numbers in Tables | Pitfall of letting digits jitter in tables when tabular figures would fix it |
| No Grid | Pitfall of random positioning with elements not aligning to anything |
| Cluttered Margins | Pitfall of crowding charts to the edge of the page with no macro whitespace |
| Ignoring Reading Direction | Pitfall of placing the most important element where the eye comes to rest rather than lands |
| Borders Everywhere | Pitfall of boxes around every chart, every section, every cell |
| No Visual Hierarchy | Pitfall of every element at the same size and weight, leaving the reader with no clue where to look |
| Decorative Headings | Pitfall of choosing display fonts for novelty rather than legibility |