@ecl/generic-style-typography-heading

    1.2.0 • Public • Published

    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

    Install

    npm i @ecl/generic-style-typography-heading

    DownloadsWeekly Downloads

    166

    Version

    1.2.0

    License

    EUPL-1.1

    Unpacked Size

    7 kB

    Total Files

    9

    Last publish

    Collaborators

    • papegaill
    • yhuard
    • kalin.chernev
    • weslito
    • emeryro
    • planctus