@ecl/ec-style-typography-heading

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