Typography
Typography is the cornerstone of Arc and a significant part of BT's visual identity. Good typography should present content clearly.
Typefaces
Arc uses the BT Curve brand font. Curve is available in the BT Figma instance, otherwise please contact the Arc team. If you're a developer, follow our development instructions.
Type scale
Base scale
| Name | Size | Line Height |
|---|---|---|
| 01 | 12px | 16px |
| 02 | 14px | 20px |
| 03 (default) | 16px | 24px |
| 04 | 20px | 28px |
| 05 | 24px | 32px |
| 06 | 28px | 36px |
| 07 | 32px | 40px |
| 08 | 36px | 44px |
| 09 | 40px | 48px |
| 10 | 56px | 64px |
| 11 | 80px | 96px |
| 12 | 120px | 136px |
Heading scale
All heading sizes use the equivalent line-height from the base scale.
| Name | Default breakpoint | Medium breakpoint | Extra large breakpoint |
|---|---|---|---|
| xxxs | 12px | - | - |
| xxs | 14px | - | - |
| xs | 16px | - | - |
| s | 20px | - | - |
| m | 24px | 28px | 32px |
| l | 28px | 32px | 40px |
| xl | 36px | 40px | 56px |
| xxl | 40px | 56px | 80px |
| xxxl | 56px | 80px | 120px |
Body text scale
All body text sizes use the equivalent line-height from the base scale.
| Name | Size |
|---|---|
| xs | 12px |
| s | 14px |
| m | 16px |
| l | 20px |
Formatting
Text formatting can be used to add visual clarity and adjust voice or meaning.
Underline
Underline is used for the default state of text links, as part of the Arc linking language.
Colour
Colour is used as a second visual indicator for text links, or in branded headings (size m or larger).
Two-tone colour
Two-tone colours can be used in headings to further emphasise elements of the content. This is called a proposition.
Font weights
Default
The default font weight is used for most content throughout Arc.
Headline
The headline font weight (500) is used sparingly for emphasising content like headings and form labels.
Bold
The bold font weight (700) is used to emphasise important pieces of text.
Components
Arc's typography components embody the type scales and usage guidelines.
Heading
Heading is used to create various levels of typographic hierarchies. It implements the heading type scale, scaling responsively.
Use contrasting sizes to make your heading stand out and create a visual centrepiece for the page.
Text
Text implements the body text scale and is primarily used for blocks of text.
Markup
Markup applies Arc typographic styles to HTML, such as rich text output from a CMS.
In Figma
- Use the Heading and Text components to style headings and body text.
- Colour headings and body text by using Arc colour styles under Pathway > Heading and Pathway > Body.
- Use Arc's System text styles when designing new components.
- Avoid use of Arc's System text styles for headings and body text.
Usage guidelines
Use the BT Curve font
Use only the BT Curve brand font to ensure products are on-brand.
Use Arc font sizes
Use only the values from Arc's defined font sizes. Using other values risks upsetting the hierarchy and balance of typography in your product.
Use Large Type as the visual centrepiece
Very large type should be used, often in contrast with smaller type sizes, to create a visual centrepiece that draws the user's attention. This technique can be used in place where we might have otherwise used stock photography.
Decouple semantic headings from size
Semantic heading level (h1, h2, h3 etc) should not be tied to the size of the heading. Setting the correct heading level is important for SEO and accessibility, and does not always correlate to the visual size.
The only exception to this rule is when styling raw HTML, for example when formatting content produced by a CMS or rich text editor.
Don't use brand indigo for smaller headings
Headings can be brand indigo above size m. Using brand indigo on smaller sizes risks conflicting with our linking language.