Typography
Two typefaces with clearly separated jobs, one product scale built for reading at clinical distance, and a hard floor below which text is not permitted to go.
Overview
Typography in clinical software is a legibility problem before it is an aesthetic one. The reader is interrupted, often standing, sometimes gloved, frequently more than a metre from the screen, and occasionally reading a number that determines what happens to a patient in the next ten minutes.
So the system splits typefaces by job. Fraunces — the brand's serif — carries identity in documentation, marketing and page titles. Inter carries everything inside a product interface, because it was drawn for screen UI and because its tall x-height and open apertures hold up at distance and at small sizes.
Legible first
Every size, weight and spacing decision is judged at the worst realistic viewing condition, not the best. Elegance is what is left after legibility is satisfied.
Hierarchical
Size, weight and colour work together so a clinician can find the one number they came for without reading the screen. Three levels of emphasis, never five.
Unmistakable
Clinical values are set so that characters that could be confused — 1 and l, 0 and O, 5 and S — cannot be. Ambiguity in a dose or a lead name is a hazard.
The two typefaces
| Face | Licence | Where | Where not |
|---|---|---|---|
| Fraunces | SIL OFL | Documentation headings, marketing, product splash and About screens | Anywhere inside a working clinical interface |
| Inter | SIL OFL | All product UI — headings, body, labels, controls | Tabular numeric data (use the mono stack) |
| Mono stack | System | MRNs, timestamps, measured values, model versions, code | Prose of any kind |
Fraunces is a display serif with high stroke contrast and an optical size axis. It is excellent at 32 px on a marketing page and progressively worse as it gets smaller, further away, or rendered on a low-PPI bedside display. The brand is carried in-product by colour, surface and geometry instead.
Product type scale
Deliberately small. Nine styles cover every screen in AcuteLine; a tenth would be a hierarchy problem, not a typography one.
| Style | Size / line | Weight | Use |
|---|---|---|---|
| Display | 28 / 34 | 600 | One per screen at most. Patient name in a header, primary finding. |
| Heading 1 | 22 / 28 | 600 | Region title |
| Heading 2 | 18 / 24 | 600 | Panel title |
| Heading 3 | 16 / 24 | 600 | Group label within a panel |
| Body | 16 / 24 | 400 | Default. All prose. |
| Body compact | 16 / 20 | 400 | Worklist rows, toolbars, stacked key–value pairs. Never paragraphs. |
| Body small | 14 / 20 | 400 | Helper and supporting text |
| Label | 14 / 20 | 600 | Form labels, column headers |
| Metadata | 12 / 16 | 400 mono | Identifiers, timestamps, versions. Absolute floor. |
No text in a product interface may render below 12 px, and 12 px is reserved for metadata that is never the sole carrier of clinical meaning. Anything a clinician must read to make a decision is 14 px or larger. This is a governed token, not a preference.
Clinical values and numerals
Numbers in a clinical interface are read differently from prose. They are scanned, compared across rows, and transcribed. Three rules follow.
47 ng/L
108 ng/L
1 240 ng/L
47 ng/L
108 ng/L
1 240 ng/L
- Always tabular. Any numeral that appears in a column, a trend or a
repeated row uses
font-variant-numeric: tabular-numsso digits align and a magnitude change is visible as a shape change. - Always a unit. A bare number is never shown.
47 ng/L, not47. The unit is part of the value, not a column header. - Thin space as thousands separator, never a comma or a full stop — both
are decimal separators somewhere the product ships.
1 240, not1,240or1.240. - Never abbreviate a clinical identifier. An MRN is shown in full or not at all; a truncated identifier invites wrong-patient error.
Clinical identifiers and measured values are set in the mono stack specifically because
1 l I, 0 O and 5 S are drawn distinctly there. Inter's
default l is a plain vertical stroke; in an MRN read aloud over a phone that is a
transcription error waiting to happen.
Reading at distance
The type scale above assumes a desktop or workstation at roughly 60 cm. Two other conditions occur constantly in a hospital and need explicit handling.
| Context | Typical distance | Approach |
|---|---|---|
| Workstation / reporting | 50–70 cm | Scale as published. Default. |
| Bedside or cart display | 70–120 cm | Apply the 1.35× scale factor. Do not hand-pick larger sizes. |
| Wall display / handover board | 2–4 m | Apply the 1.75× scale factor and reduce content — legibility comes from showing less, not only from bigger type. |
Scale factors multiply the whole interface — type, spacing and touch targets together — so proportions and hit areas stay correct. Scaling type alone breaks touch targets and is not permitted. See Scaling & displays.
Language and localisation
- Budget 35 % expansion. German and Finnish are the practical worst cases for this domain. A label that only fits in English is a defect, not a translation problem.
- Never bake text into an image. It cannot be translated, resized, read by a screen reader, or contrast-tested.
- Sentence case throughout. Title Case does not survive translation and slows scanning. Reserve capitals for proper nouns and standard abbreviations — STEMI, ECG, MRN.
- Use logical properties —
ms-*/me-*, notml-*/mr-*— so right-to-left works by construction rather than by retrofit. - Do not rely on italics for emphasis. Many scripts have no italic form. Use weight or a label.
Do's and don'ts
Label, value with unit, provenance. Three levels, tabular numerals, nothing below 12 px.
Below the 12 px floor, serif italic for a clinical value, no unit, and a comma that reads as a decimal point in half of Europe.
More do's and don'ts
14 px for anything decision-relevant; 12 px reserved for metadata that never carries clinical meaning on its own.
A measurement at 11 px. Below the floor, and unreadable at arm's length on a cart for much of the rota.
47 ng/L
1 240 ng/L
Tabular numerals and a thin space. The jump to four digits registers as a shape change before it is read.
47 ng/L
1,240 ng/L
Proportional digits and a comma. Nothing aligns, and the comma is a decimal separator in half of Europe.
Clinical safety notes
Trace these in your risk file (ISO 14971).
- 12 px floor, 14 px for anything decision-relevant. Mitigates: misread values under realistic viewing conditions.
- Units always shown with values. Mitigates: order-of-magnitude error from a unit assumed rather than read.
- Thin-space thousands separator. Mitigates: a 1000× misreading between locales that swap comma and full stop.
- Mono stack for identifiers. Mitigates: wrong-patient error from transcribing an ambiguous character.
- Tabular numerals in all repeated contexts. Mitigates: missed magnitude change when scanning a trend or worklist.
- No text in images. Mitigates: untranslated, unreadable and untestable clinical content.
Related
- Colour — contrast pairs for every text token.
- Tokens — how the type scale is expressed and governed.
- Scaling & displays — the 1.35× and 1.75× factors in full.