Fleetline uses one family (Inter) for all UI text, chosen for legibility on tablets outdoors; data columns switch on tabular numerals with .text-tabular so mileage and costs line up. Type is applied through role classes, never raw sizes.
Pick the heading element for document structure (one h1 per page, no skipped levels) and the class for visual size. A card title can be an h3 styled .text-h5.
Use .text-lead once, under a page title. Use .text-small for secondary metadata, .text-caption for figure and table captions, .text-overline for a short eyebrow above a title (two or three words).
Body text stays within 65 characters per line (--size-measure). Headings balance their lines; paragraphs avoid orphans.
Don't use bold or color as the only way to mark something important — say it in the text.
Anatomy
Font family — --typography-{role}-font-family
Size — --typography-{role}-font-size (from the --font-size-* scale)
Weight — --typography-{role}-font-weight
Line height — --typography-{role}-line-height
Measure — --size-measure for running text
Examples
Headings
Demo headings below use <p> elements so they don't disturb this page's outline; in product screens use real h1–h6.
1,284 vehicles
Fleet overview
Open work orders
Van KX-219 — brake inspection
Parts and labour
Assigned mechanic
Service history
h2 element, h5 size
Depot: North Yard
<h1 class="text-h1">Fleet overview</h1>
<h2 class="text-h2">Open work orders</h2>
<!-- Semantic level and visual size are independent -->
<h2 class="text-h5">Depot: North Yard</h2>
<!-- Display: big numbers on dashboards, once per screen -->
<p class="text-display text-tabular">1,284 vehicles</p>
Body text
Track every vehicle's service schedule, assign repairs to mechanics and keep your fleet on the road.
The front brake pads on van KX-219 are at 3 mm. Replace them before the next scheduled route on Thursday, and check the discs for scoring while the wheels are off.
Last updated by Priya Nair at 14:32 · Odometer 84,210 km
Figure 2. Average repair time per vehicle class, last 90 days.
Work order
WO-4182 · Replace front brake pads
<p class="text-lead">Track every vehicle's service schedule…</p>
<p class="text-body">The front brake pads on van KX-219 are at 3 mm…</p>
<p class="text-small text-muted">Last updated by Priya Nair at 14:32</p>
<figcaption class="text-caption">Figure 2. Average repair time…</figcaption>
<p class="text-overline">Work order</p>
Code
Set the vehicle status to in_service after the inspection passes, or call PATCH /vehicles/KX-219.
{
"id": "WO-4182",
"vehicle": "KX-219",
"status": "in_progress",
"assignee": "Priya Nair",
"tasks": ["Replace front brake pads", "Inspect discs for scoring"]
}
<code class="code">in_service</code>
<!-- Scrollable block: tabindex="0" + a name so keyboard users can scroll it -->
<pre class="code-block" tabindex="0" aria-label="Example API response for a work order"><code>…</code></pre>
Lists
Check tyre pressure and tread depth
Top up coolant and washer fluid
Test brake lights and indicators
Lift the vehicle and remove the front wheels
Remove the caliper and the worn pads
Fit new pads and torque the caliper bolts to spec
Van KX-219 · North Yard
Truck HT-507 · Riverside depot
Van KX-344 · North Yard
<ul class="list">…</ul>
<ol class="list">…</ol>
<!-- role="list" keeps list semantics in Safari when markers are removed -->
<ul class="list list--unstyled" role="list">…</ul>
API
Hook
Values
Purpose
.text-display | .text-h1 … .text-h6
class
Heading roles (balanced wrapping, tight tracking)
.text-lead | .text-body | .text-small
class
Running text, capped at --size-measure
.text-caption | .text-overline
class
Captions and eyebrows (muted)
.text-muted, .text-tabular
modifier class
Secondary color; tabular numerals for data
.code, .code-block
class
Inline code; scrollable block (pre with tabindex="0")
.list, .list--unstyled
class
Prose lists; marker-less list (keep role="list")
Do and don't
Assigned mechanic
Do keep the outline correct and pick the visual size with a class.
This vehicle is overdue for its annual safety inspection and must not be dispatched
Don't put sentences in an overline or use uppercase for long text.
Accessibility
Headings: screen-reader users navigate by heading level. Never skip levels to get a smaller size — use the class.
Contrast: default text is ≥ 4.5:1 on canvas and surfaces in all themes; muted and subtle text are checked at 4.5:1 too, so they are safe for body copy.
Zoom: all sizes are rem, so text scales with the user's browser setting and reflows at 320px.
Code blocks scroll horizontally instead of wrapping; tabindex="0" plus an aria-label lets keyboard users reach and scroll them.
Lists with list-style: none lose their semantics in Safari/VoiceOver; role="list" restores them.