Foundations · Typography · v1.0.0

Arial, used with intention.

DTTT advisory deliverables use Arial throughout. The choice is structural: it renders identically across Word, PowerPoint, Google Docs, email clients, and the browser. The system's job is to make Arial feel intentional through optical refinement — careful sizing, gentle negative tracking on display, and a tight scale.

Why Arial

A non-negotiable that earns its keep.

The temptation to specify a brand display face is real. The system refuses it. Every output DTTT produces eventually leaves HTML — exported to Word, dropped into a deck, forwarded as an email — and a brand face that survives only in the browser is a brand face the practice cannot rely on. Arial survives every container.

The corollary: when Arial reads as flat or generic, the answer is to refine the typography, not the typeface. Sizing, tracking, weight contrast, and rhythm do most of the work.

Stack

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

Helvetica Neue and Helvetica are listed as fallbacks for environments without Arial; in practice every target environment has Arial. Do not add web font imports for the brand face.

Type scale

Eight steps. Tight, deliberate, complete.

The scale is small for a reason: every step has a clear job and there is no overlap. When you find yourself reaching for an in-between size, the answer is one of the existing steps used differently — never a ninth size.

A working-tools system for advisory delivery.
Hero · 40 / 48
weight 700
tracking -0.015em
--t-hero · .t-hero
Document cover only.
Six commitments that govern every decision.
H1 · 28 / 34
weight 700
tracking -0.01em
--t-h1 · .t-h1
Page title.
Two colours do most of the work.
H2 · 20 / 28
weight 700
tracking -0.005em
--t-h2 · .t-h2
Section heading within a page.
Stockholm Business Region — engagement summary
H3 · 16 / 22
weight 700
--t-h3 · .t-h3
Subsection. Component titles.
DTTT speaks to destination leadership as an experienced colleague offering guidance — not as a consultant pitching, not as a teacher explaining. The voice assumes intelligence and context.
Body · 15 / 24
weight 400
--t-body · .t-body
Default prose.
Used in dense panels, table cells, supporting prose under a primary block, and most component bodies. Reserve regular body for the document's main reading flow.
Body Small · 13 / 21
weight 400
--t-body-sm · .t-body-sm
Components, dense regions.
Engagement · Reference DTTT-ADV-2026-018
Label · 11 / 14
weight 700, uppercase
tracking 0.1em
--t-label · .t-label
Eyebrows, meta labels.
Source: Eurostat tourism statistics, Q3 2025 · Last updated 18 March 2026
Micro · 10 / 14
weight 400
tracking 0.06em
--t-micro · .t-micro
Source refs, fine print.
Container translation

The same scale, in points and pixels.

Word, PowerPoint and PDF think in points; HTML thinks in rems. The system's scale is calibrated so that a point value in a Word advisory matches the visual weight of the equivalent rem step in HTML.

StepHTML (rem)HTML (px)Word (pt)PPTX (pt)
Hero2.54040
H11.75281828
H21.25201420
H31.0161116
Body0.93751510 (advisory)14
Body small0.812513912
Label0.6875118 (caps)10 (caps)
Micro0.625107 (footnotes)9

The Word advisory baseline is 10pt body — non-negotiable for written advisories. PPTX minimums are higher because slides are read at distance.

Weight, line, tracking

Use weight contrast, not weight inflation.

PropertyRule
WeightsOnly 400 (regular) and 700 (bold). No 600, no 500. Arial's intermediate weights vary across systems.
Line-heightDisplay 1.2 · Headings 1.4 · Body 1.6 · Loose body 1.75. Never below 1.2 even for hero.
TrackingNegative on display (−0.015em hero, −0.01em h1, −0.005em h2). Zero on body. Positive on uppercase (0.1em labels, 0.06em micro).
ItalicsReserved for: blockquotes, document titles inline (SBR Session Outcomes), and clarifying asides. Never for emphasis — use bold.
CapsReserved for labels and micro. Never for headings or body.
UnderlineReserved for links. Never for emphasis.
Do

Use 700 against 400 to create hierarchy. A bold lead-in followed by regular continuation is preferred over h3-h4-h5 stacks.

Trust the negative tracking on display sizes. Arial at 28px+ benefits from −0.01em. The system applies it via tokens.

Don't

Don't use semibold (600) — it renders inconsistently across Arial implementations. Use 700.

Don't import Inter, Helvetica Neue, or any web font as a brand face. The system is Arial.

Don't set body below 13px in HTML or 9pt in print, even for "footnotes" — use micro (10/7pt) sparingly and only for source references.