1.2.0 • Published 5 years ago
@ecl/ec-style-typography-heading v1.2.0
Headings
Headings and subheadings should be organised in a hierarchy, with heading first, followed by subheadings in order (An H2 will nestle under H1, and H2 under H3, and so on down).
| Size | Leading | Weight | Colour | Usage | |
|---|---|---|---|---|---|
| Headline | M | 40px | Bold / regular | White | Headline on Page header (only used on homepage) |
| Heading 1 | XXL | 44px | 600 | White/Black | Page titles (page header)/body of text |
| Heading 2 | XL | 33px | 600 | Black | Body of the page |
| Heading 3 | L | 24px | 600 | EC Grey | Body of the page/Listing components |
| Heading 4 | M | 30px | 600 | EC Grey | |
| Heading 5 | S | 22px | Regular / uppercase | EC Grey |
Line height
Line-height, traditionally known as leading, is one of several factors that directly contribute to readability and pacing of copy. Line-heights are based on the size of the font itself. Ideal line-heights for standard copy has a ratio of 1.66. For example, a type at 1em/16px would have a line-height of 24px (16 x 1.66). The exception to this rule are headings, which need less spacing and therefore have a line-height ratio of 1.1.
Headings line-height: type size x 1.1