Headings

It is important to structure documents semantically correctly. A consistent and coherent heading hierarchy is particularly important here. This applies not only to informative articles, but also to pages that serve purely marketing purposes for reasons of accessibility.
For these reasons, headings should not be selected according to their visual size. This can be adjusted independently if necessary. Also, purely decorative text should not be solved as a heading, but designed separately.

For SEO reasons, the first-order heading <h1> is always reserved for the DEHN logo in the header of the page. Your content hierarchy should therefore start with a second-order heading <h2>.

Typography

In addition to these semantic and technical rules, all the specifications of our general typography naturally apply.

See them in action

Heading 1 - h1

Noto Sans – Demi Bold (600) – size: 56px | 3.5rem, line-height: 64px | 4rem, spacing: -2%

Heading 2 - h2

Noto Sans – Demi Bold (600) – size: 48px | 3rem, line-height: 56px | 3.5rem, spacing: -2%

Heading 3 - h3

Noto Sans – Demi Bold (600) – size: 40px | 2.5rem, line-height: 48px | 3rem, spacing: -1%

Heading 4 - h4

Noto Sans – Demi Bold (600) – size: 32px | 2rem, line-height: 40px | 2.5rem, spacing: -1%

Heading 5 - h5

Noto Sans – Demi Bold (600) – size: 24px | 1.5rem, line-height: 32px | 2rem

Heading 6 - h6

Noto Sans – Demi Bold (600) – size: 20px | 1.25rem, line-height: 24px | 1.5rem

CSS

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    margin-top: 1.5rem;
}
h1 { font-size: 3.5rem; line-height: 4rem; letter-spacing: -0.02ch; }
h2 { font-size: 3rem; line-height: 3.5rem; letter-spacing: -0.02ch; }
h3 { font-size: 2.5rem; line-height: 3rem; letter-spacing: -0.01ch; }
h4 { font-size: 2rem; line-height: 2.5rem; letter-spacing: -0.01ch; }
h5 { font-size: 1.5rem; line-height: 2rem; }
h6 { font-size: 1.25rem; line-height: 1.5rem; }