BT.com Design Guidelines
| Introduction | Notifications | Grids | Colours | Typography | Image Sizes | Padding and Spacing | Modals | Icons | Social Norms | Dividers
| Tables | Package Selector | Timelines | Progress Indicator | CTAs and Buttons | Forms | Tooltips | Accordions | Loaders |
Typography
The BT typeface
We use the BT typeface in three weights – light, regular and bold.
BT Light
The quick brown fox jumps over the lazy dog
BT Regular
The quick brown fox jumps over the lazy dog
BT Bold
The quick brown fox jumps over the lazy dog
Typographic scale
We have three typographic scales that apply to the following breakpoints:
Scale 1: 320 & 600
Scale 2: 768 & 960
Scale 3: 1200
‘H1, H2’ numbers are used when semantically correct. If not, use ‘S1, S2’ and so on to describe the size.
There is a preferred weight for each size, but other weights can be used where appropriate to help the hierarchy and structure of the page.
H1 / S1
Break point (Bp)
320 & 600
768 & 960
1200
Font size
32px (2em)
40px (2.5em)
48px (3em)
Leading / line height
36px (2.250em)
44px (2.75em)
51px (3.188)
Preferred weight(s)
Light
Light
Light
H2 / S2
Break point (Bp)
320 & 600
768 & 960
1200
Font size
26px (1.625em)
32px (2em)
36px (2.25em)
Leading / line height
30px (1.875em)
36px (2.25em)
40px (2.5em)
Preferred weight(s)
Light
Light
Light
H3 / S3
Break point (Bp)
320 & 600
768 & 960
1200
Font size
22px (1.375em)
24px (1.5em)
28px (1.75em)
Leading / line height
26px (1.625em)
28px (1.75em)
32px (2em)
Preferred weight(s)
Light
Light
Light
H4 / S4
Break point (Bp)
320 & 600
768 & 960
1200
Font size
18px (1.25em)
20px (1.25em)
20px (1.25em)
Leading / line height
23px (1.438em)
25px (1.563em)
25px (1.563em)
Preferred weight(s)
Reg
Reg
Reg
Body
Break point (Bp)
320 & 600
768 & 960
1200
Font size
16px (1em)
16px (1em)
16px (1em)
Leading / line height
21px (1.313em)
21px (1.313em)
21px (1.313em)
Preferred weight(s)
Reg / bold
Reg / bold
Reg / bold
Notes
Break point (Bp)
320 & 600
768 & 960
1200
Font size
14px (0.875em)
14px (0.875em)
14px (0.875em)
Leading / line height
19px (1.188em)
19px (1.188em)
19px (1.188em)
Preferred weight(s)
Reg / bold
Reg / bold
Reg / bold
BT font not available?
Sometimes, BT font might not be available on the system we’re designing for. If that’s the case, our order of fall-back typefaces are: Calibri, Arial and Sans Serif in corresponding light, regular and bold weights.
Sentence case
We use sentence case across the site for titles and general copy. Sentence case is ‘a mixed-case style in which the first word of the sentence is capitalised, as well as proper nouns and other words as required by a more specific rule.’
Sentence case examples
The brand new BT TV App is here
BT Call Protect – stop nuisance calls for free
Choose the right broadband for you
Title punctuation
Titles usually have no full stops at the end of the sentence. However, full stops may be used for stylistic effect in some circumstances – take, for example, this Black Friday tagline: ‘The BT Black Friday sale. No need to queue.’
Typographic pairings
See below for examples of typographic pairings across our breakpoints.
The preferred sizes for prices are also shown. These are used only when the price points are pulled out or featured. If the price appears in a line or paragraph of text, it assumes the weight and size of the paragraph.
Note that when S4 is used as a larger ‘body copy’, it’s preferable to use the light rather than regular weight.
Changelog
1.0.1
1.0.0