Typography
The system uses two typefaces, loaded once by the shared package in fixed weights. Sites do not add typefaces of their own, do not change the sizes set out below, and do not apply weights or styles other than those the components already use. What a site controls is the prose; the type is given.
The pairing is deliberate. A serif carries the titles and gives the sites of the Velocity Interoperability Network their formal, printed character; a sans-serif carries the text and the small labels, where it is easier to read at the sizes used for navigation, captions and tables. The two faces are never mixed within a line.
- Serif: EB Garamond
- Used for the wordmark, page titles, lead headlines, item titles, questions, key figures and step numbers. Loaded in the regular, medium, semibold and bold weights with italics, but set almost always in the regular weight; emphasis is given by size, not by boldness. The italic appears in one place only, the connective word of the wordmark.
- Sans-serif: Open Sans
- Used for body text, navigation, labels, captions, tables, dates and form controls. Loaded in the regular, semibold and bold weights with italics. Semibold carries navigation items, form labels and step titles; bold is reserved for the small uppercase labels and for the strong element within prose.
Type scale. Every size the components use is listed below, with the face, the colour and the line height where it differs from the default. Sizes step up at the medium breakpoint on titles only; text sizes are the same at every width.
| Use | Face | Size | Where it is used |
|---|---|---|---|
| Home page title | Serif | 36 px; 46 px from md | The hero of a service home page, in ink. Line height 1.15. |
| Page title | Serif | 36 px; 44 px from md | Standard pages and the newsroom index, in brand-700. Line height 1.25. |
| Lead headline | Serif | 32 px; 42 px from md | The featured story on a department home page, in ink. |
| Key figure | Serif | 40 px | The number in a row of key figures, in brand-700. |
| Step number | Serif | 28 px | The numeral beside each step of a procedure, in brand-700. |
| Newsroom title | Serif | 24 px | Titles in the press release index. |
| Item title | Serif | 22 px | Titles in definition lists, grids, timelines and news items. Line height 1.25. |
| Question | Serif | 20 px | The title of an accordion item. |
| Body | Sans-serif | 17 px | Prose on standard pages, in bands and in press release articles. Line height 1.7. |
| List body | Sans-serif | 16 px | Text within definition lists, steps, timelines and accordion panels. Line height 1.7. |
| Secondary | Sans-serif | 15 px | Descriptions beneath titles, table cells, footer links and the summary of a press release. |
| Small | Sans-serif | 14 px | Links that lead to more, key figure labels and article dates. |
| Label | Sans-serif, bold, uppercase | 12 to 13 px | Eyebrows, section headings, table headers, dates in lists and photograph credits; letter-spaced. |
Weights and styles. Seven weights are loaded across the two faces. Most of the system is set in the regular weight of either face, and the distinctions below are the only ones the components make.
| Weight | Face | Use |
|---|---|---|
| Regular, 400 | Serif and sans-serif | Every title and every paragraph. The default weight of the system. |
| Medium, 500 | Serif | Loaded for the wordmark and held in reserve; used by no component at present. |
| Semibold, 600 | Sans-serif | Navigation items, form labels, step titles, buttons and links that lead to more. |
| Bold, 700 | Sans-serif | Uppercase labels: eyebrows, section headings, table headers, dates in timelines and the strong element in prose. |
| Italic | Serif | The connective word of the wordmark only. |
| Italic | Sans-serif | Loaded for emphasis within prose, where a title or a foreign term is cited; used sparingly. |
Letter-spacing. Small capitals are letter-spaced so that they read as labels and not as shouted words. The values are fixed by the components and are listed for reference. Titles and prose are never letter-spaced.
| Element | Tracking | Notes |
|---|---|---|
| Wordmark eyebrow | 0.18 em | The small first line of the logotype, in capitals. |
| Wordmark name | 0.08 to 0.12 em | The main line of the logotype, widening with the viewport. |
| Section headings, eyebrows, table captions, dates in timelines | 1.5 px | Small bold capitals above content. |
| Table headers, dates in grids, more links | 1 px | Small capitals within content. |
| Buttons | 2 px | The label of a button, in capitals. |
| Navigation items | 0.25 px; 0.5 px from md | The uppercase items of the navigation bar. |
| Titles and prose | None | Serif titles and body text are never letter-spaced. |
Colour of text. Text is set in a small number of the shared colour tokens. The tokens themselves, with their values, are on the Colours page; how they are applied to text is set out here.
| Token | Applied to |
|---|---|
| ink | Body text, item titles, questions, the home page title and the lead headline. |
| brand-700 | Page titles on standard pages, key figures, step numbers and the accent of the accordion chevron. |
| link | Text links within prose and the links that lead to more beneath a section. |
| steel-500 | Secondary text, captions, dates, table captions and photograph credits on light surfaces. |
| steel-300 | Column labels in the footer. |
| white | The wordmark, navigation items, utility links, buttons and footer links, on brand surfaces. |
Rules of composition. The rules below follow from the scale and are applied to every page. They are checked in the review before a site is published.
- One title per page
- Every page has exactly one first-level heading, set in the serif. Section headings within the page are the small uppercase labels with an accent rule beneath, not further serif titles.
- Emphasis by size, not weight
- The serif is never set bold. A more important title is a larger title. Within prose, the strong element is the only inline emphasis and is used for the lead words of a paragraph that introduces a list or table.
- Capitals for labels only
- Uppercase is reserved for the wordmark, the navigation bar and the small letter-spaced labels. Titles and prose are never set in capitals.
- A measured line
- Prose is set in a column no wider than 48 rem, giving between seventy and ninety characters to the line at the body size. Bands split the width between prose and photograph so that the line stays within this measure.
- Text in the system's colours only
- Text is set in ink, brand-700, link or the steel greys on light surfaces, and in white or steel-300 on brand surfaces. No other colour is applied to text, and colour is never used for emphasis.
- Numbers and dates
- Dates in prose are written day, month, year. Numbers are written in words where they read naturally in a sentence and as numerals in dates, measurements, tables and key figures.
- Typographic characters
- Apostrophes and quotation marks in rendered text are typographic. Dashes within a sentence are avoided in favour of a comma, a semicolon or a new sentence.
The typeface tokens and the measures of the prose column are recorded in the register of Design Tokens. For the components that set each size, see Components; for the standards of prose that the type carries, see Standards for Sites. Questions may be sent to contact@design.gov.vin.