Font

Dynatrace is using Bernina Sans as its main font. Our Bernina license allows us to use the font for every Dynatrace application, both online and offline. However, we are not allowed to give the font away for non-Dynatrace applications.

Use Bitstream Vera, if you have to display code, code snippets or stack traces and therefore need a mono-spaced font.

Font styles

Our default font styles for text on white (except labels) are:

line-height: 1.6
color: $gray-700

Body text

The quick brown fox jumps over the lazy dog.

font-family: BerninaSans
font-weight: normal
font-size: 14px  

Use for:

  • Entity header
  • Sub headlines and descriptions
  • Explanatory text, values in chart labels
  • List view content
  • Filter bar

H1

We use fluid fontsizes for our H1. There should only be ONE H1 on each page. We used Responsive And Fluid Typography With vh And vw Units as a guideline for calculating our font sizes.

Calculation for H1
Calculation example H1

The quick brown fox jumps over the 1920px screen.

The quick brown fox jumps over the 1280px screen.

The quick brown fox jumps over the 360px screen.

font-family: BerninaSans
font-weight: 600
1920: 28px
1280: 26.4px (interpolated value; rounded to one decimal position)
360: 24px

Use for:

  • Page headers
  • Section headers

H2

The quick brown fox jumps over the lazy dog.

font-family: BerninaSans
font-weight: 600
font-size: 20px

Use for:

  • Intermediary headlines within sections
  • Card headlines

H3

The quick brown fox jumps over the lazy dog.

font-family: BerninaSans
font-weight: normal
font-size: 18px

Use for:

  • List headlines
  • Left-side settings menu

Label

The quick brown fox jumps over the lazy dog.

font-family: BerninaSans
font-weight: normal
font-size: 12px

Use for:

  • Labels
  • Tile subheadline
  • Table header

Code

The quick brown fox jumps over the lazy dog.

font-family: "Bitstream Vera Sans Mono"
font-weight: normal
font-size: 14px

Use for:

  • Code snippets
  • Stack traces

A link is used to refer to other pages. While being as short as possible, the text should clearly describe a link's destination.

´ Loading interactive demo...
<a class="dt-link">Sample link</a> export class LinkSimpleExample {} <a class="dt-link">Sample link</a> export class LinkSimpleExample {}

Variants

Links on dark or colored backgrounds use white as font color and are underlined to distinguish them from other text.

´ Loading interactive demo...
<div class="dark" dtTheme=":dark"> <a class="dt-link">Link on a dark background</a> <br /> <a class="dt-link dt-external">External link on a dark background</a> </div> export class LinkDarkExample {} <div class="dark" dtTheme=":dark"> <a class="dt-link">Link on a dark background</a> <br /> <a class="dt-link dt-external">External link on a dark background</a> </div> export class LinkDarkExample {}

Use the external link whenever it leads somewhere out of the product e.g. the documentation, the blog etc.

´ Loading interactive demo...
<a class="dt-link dt-external">External link</a> export class LinkExternalExample {} <a class="dt-link dt-external">External link</a> export class LinkExternalExample {}

Text width

To ensure full readability of long text, we use a maximum text width of 580px at the default body font-size of 14px. For other body font-sizes you can calculate the maximum width using 27.8 x 1.48 x font-size. Beware, this calculation is always based on the base font-size, not on the specific font size of one paragraph. So, don't mix. These calculations are based on Smashing Magazine's Typographic Design Patterns And Best Practices.