Header
Titles
Desktop and tablet
You must establish a visual and semantic hierarchy by using titles correctly. Here are the measurements used throughout the site:
H1 - BDC heading |
Circular Black | 48 px | 3 rem |
H2 - BDC heading |
Circular Black | 32 px | 2 rem |
H3 - BDC heading |
Circular Black | 24 px | 1.5 rem |
H4 - BDC heading |
Roboto Bold | 20 px | 1.25 rem |
H5 - BDC heading |
Roboto Bold | 18 px | 1.125 rem |
H6 - BDC heading |
Roboto Bold | 16 px | 1 rem |
| Pretitle | Circular Black | 20 px | 1.25 rem |
| Subtitles | Roboto Regular | 24 px | 1.5 rem |
| Current text | Roboto Regular | 16 px |
Pretitle and subtitle
A subtitle classification is often used to add information to the title (H1) of the page. Also, a pretitle classification may be used, for example to specify a category such as “Ebook”, but this usage is much less common.
Pretitle
H1 title
Subtitle
H1 - BDC heading |
Circular Black | 32 px | 2 rem |
H2 - BDC heading |
Circular Black | 24 px | 1.5 rem |
H3 - BDC heading |
Roboto Bold | 20 px | 1.25 rem |
H4 - BDC heading |
Roboto Bold | 18 px | 1.125 rem |
H5 - BDC heading |
Roboto Bold | 16 px | 1 rem |
H6 - BDC heading |
Roboto Bold | 16 px | 1 rem |
| Pretitle | Circular Black | 20 px | 1.25 rem |
| Subtitles | Roboto Regular | 20 px | 1.25 rem |
| Current text | Roboto Regular | 16 px |