Typography

The corporate typeface is the visible language in which a company communicates. It is like handwriting you can recognize someone by. The use of typography manifests the uniqueness of a company, and the corporate typeface set makes an important contribution to this.

---

Typeface

Our internationally valid DEHN font is Noto Sans. This is used for all digital and print media in external communication.

In regular communication, we focus on the Regular font for continuous text and longer passages, while Bold is used for headlines and special markup.
For e-mail, we will continue to use the Segoe UI font.

Noto Sans is a versatile and multilingual font family that fits well with DEHN and its goals of digitization and internationalization.

Noto Sans is a font family that supports all fonts and languages of the Unicode standard. Noto Sans is designed to be visually harmonious in different fonts styles and languages, with uniform heights and weights.

It is available and usable as open source at any time and has been specially developed to ensure good legibility across many languages.

---

Typography and Colors

The defined colors for the typography are Text Grey and Eerie Black. Real White is also used on darker full-color backgrounds. We should always ensure good legibility and a sufficient contrast ratio when using colors. In special cases, DEHN red may be used for headings and highlighting.

For detailed informations on our colors, visit DEHN colors.

---

---

Typography on the web

All our rules naturally also apply on the web. You will find further details on the application in the paragraphs and headings.

Sizes

We use ten different sizes on the web. Our base font-size is 16px and all other sizes inherit from that, using rem for relive sizing.
We only use eight sizes, but when we scale the base font-size down to 14px on small screens, this results in ten sizes.

The variables

font-size: 16px;
// font-sizes
--font-size-XXS: 0.625rem;
--font-size-XS: 0.75rem;
--font-size-S: 0.875rem;
--font-size-M: 1rem;
--font-size-L: 1.25rem;
--font-size-XL: 1.5rem;
--font-size-XXL: 2rem;
--font-size-3XL: 2.5rem;
--font-size-4XL: 3rem;
--font-size-5XL: 3.5rem;
// line-heights
--line-height-XXS: 1rem;
--line-height-XS: 1rem;
--line-height-S: 1.5rem;
--line-height-M: 1.5rem;
--line-height-L: 1.5rem;
--line-height-XL: 2rem;
--line-height-XXL: 2.5rem;
--line-height-3XL: 3rem;
--line-height-4XL: 3.5rem;
--line-height-5XL: 4rem;
// paragraph-spacing
--paragraph-spacing-M: 1rem;
--paragraph-spacing-3XL: 1.5rem;
// font-weight
--font-weight-normal: 400;
--font-weight-bold: 700;

The sizes in the semantic elements

CSS

body {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-M);
    line-height: var(--line-height-M);
    color: var(--dehn-textgrey);
}
h1, h2, h3, h4, h5, h6 {
    margin-top: var(--paragraph-spacing-3XL);
    font-weight: var(--font-weight-bold);
}
h1, h2, h3 {
    margin-bottom: var(--paragraph-spacing-3XL);
}
h4, h5, h6 {
    margin-bottom: var(--paragraph-spacing-M);
}
h1 { font-size: var(--font-size-5XL); line-height: var(--line-height-5XL); letter-spacing: -0.02ch; }
h2 { font-size: var(--font-size-4XL); line-height: var(--line-height-4XL); letter-spacing: -0.02ch; }
h3 { font-size: var(--font-size-3XL); line-height: var(--line-height-3XL); letter-spacing: -0.01ch; }
h4 { font-size: var(--font-size-XXL); line-height: var(--line-height-XXL); letter-spacing: -0.01ch; }
h5 { font-size: var(--font-size-XL); line-height: var(--line-height-XL); }
h6 { font-size: var(--font-size-L); line-height: var(--line-height-L); }
strong { font-weight: var(--font-weight-bold); }
em { font-style: italic; }
small, .small {
    font-size: var(--font-size-XS);
    line-height: var(--line-height-XS);
}

p, ul, ol, li, pre, table, blockquote {
    margin-top: 0;
    margin-bottom: var(--paragraph-spacing-M);
}

Fontstack

As there should always be a fallback defined, for systems that don’t allow font loading, or in the case something went wrong with the provision of the font, there are prefered fallback fonts on every major platform and eco system.

---

Font embedding

@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.dehn.cloud/shared/fonts/noto-sans/v36/noto-sans-latin-regular.woff2') format('woff2'); 
}
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: url('https://cdn.dehn.cloud/shared/fonts/noto-sans/v36/noto-sans-latin-italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('https://cdn.dehn.cloud/shared/fonts/noto-sans/v36/noto-sans-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  src: url('https://cdn.dehn.cloud/shared/fonts/noto-sans/v36/noto-sans-latin-700italic.woff2') format('woff2');
}

CSS

:root {
    // font stack
    --dehn-fontstack: 'Noto Sans', 'Segoe UI', 'Avenir Next', Roboto, sans-serif;
    --dehn-monofont: Menlo, Curier, monospace;
    // base font size
    font-size: 16px;
}
body {
    font-family: var(--dehn-fontstack);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
}