India, label
Alfa Header
By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, text link the sable cloud beneath was dished out…
Menu
Foundations
Typography
Usage
- For headlines, links and buttons use the brand font Filson Soft.
- All body, caption, label, sub-text use Helvetica Neue.
- The line height is always 8px greater than the text size, e.g. 20/28.
- India is all in uppercase, so the line-height remains the same as the text size.
- Golf has a reduced line height as it needs to sit centrally within the button.
- For accessibility and to ensure maximum legibility, make sure to disable ligatures when using Filson Soft (also in code via
font-variant-ligatures: no-common-ligatures;)
Note: Spelling based on the NATO Phonetic Alphabet (Wikipedia)
| Name | Font size / line height | Colour | Use for |
|---|---|---|---|
Filson Soft Bold |
|||
| Alfa |
Desktop 56/64 Mobile 40/48 |
First heading on a page | |
| Bravo |
Desktop 40/48 Mobile 32/40 |
Headings | |
| Charlie |
Desktop 32/40 Mobile 22/30 |
Headings | |
| Delta |
Desktop 22/30 Mobile 18/26 |
Headings | |
| Echo |
Desktop & mobile 18/26 |
Headings | |
| Foxtrot |
Desktop & mobile 16/24 |
Headings | |
| Golf |
Desktop & mobile 16/20 |
Buttons | |
| Hotel |
Desktop & mobile 14/20 |
Headings / links | |
| Oscar |
Desktop & mobile 12/18 |
Links in results cards | |
Filson Soft Regular, uppercase, 3px letter spacing |
|||
| India |
Desktop & mobile 16/16 |
Headings | |
Helvetica Neue Regular/Bold |
|||
| Juliett |
Desktop & mobile 20/30 |
Large Body copy | |
| Kilo |
Desktop & mobile 18/28 |
Questions | |
| Lima |
Desktop & mobile 16/24 |
Body copy | |
| Mike |
Desktop & mobile 14/22 |
Captions | |
| November |
Desktop & mobile 12/20 |
Substantiation text | |
Lists
Bulleted list
- Lima - Bullet list item, ensure 16px spacing between items
- Lima - Bullet list item, ensure 16px spacing between items
- Lima - Bullet list item, ensure 16px spacing between items
- Bulleted list using Lima, and showing multiple lines
- Bulleted list using Lima
Icon list
- Lima - Icon list item, ensure 16px spacing between items
- Lima - Icon list item, ensure 16px spacing between items
- Lima - Icon list item, ensure 16px spacing between items
- Icon list using Lima, and showing multiple lines
- Icon list using Lima
Bulleted list
- Lima - Bullet list item, ensure 16px spacing between items
- Lima - Bullet list item, ensure 16px spacing between items
- Lima - Bullet list item, ensure 16px spacing between items
- Bulleted list using Lima, and showing multiple lines
- Bulleted list using Lima
Icon list
- Lima - Icon list item, ensure 16px spacing between items
- Lima - Icon list item, ensure 16px spacing between items
- Lima - Icon list item, ensure 16px spacing between items
- Icon list using Lima, and showing multiple lines
- Icon list using Lima
Examples
Desktop
Bravo Header
Delta Header
By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, text link and the car seemed to float in the middle of an immense dark sphere, whose upper half…
Overline / India
Charlie Header
Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, text link and the car seemed to float in the middle of an immense dark sphere, whose upper half…
Mobile
India, label
Alfa Header
By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, text link the sable cloud beneath was dished out…
Bravo Header
Delta Header
By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, text link and the car seemed to float in the middle of an immense dark sphere, whose upper half…
Overline / India
Charlie Header
Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, text link and the car seemed to float in the middle of an immense dark sphere, whose upper half…
Accessibility
To adhere to WCAG guidelines, blocks of text should be no more then 80 characters in length, therefore:
- Juliett has a maximum container width of 728px
- Lima has a maximum container width of 576px
Juliett (large body copy)
Juliett has a maximum container width of 728px … Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, text link and the car seemed to float in the middle of an immense dark sphere, whose upper half…
Lima (body copy)
Lima has a maximum container width of 576px … Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, text link and the car seemed to float in the middle of an immense dark sphere, whose upper half…
1.4.8 Visual Presentation of blocks of text - Level AAA
- Line spacing (leading) is at least space-and-a-half within paragraphs
- Paragraph spacing is at least 1.5 times larger than the line spacing
- Width is no more than 80 characters or glyphs
- Text is not justified