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.
Our default font styles for text on white (except labels) are:
line-height: 1.6 color: $gray-700
font-family: BerninaSans font-weight: normal font-size: 14px
- Entity header
- Sub headlines and descriptions
- Explanatory text, values in chart labels
- List view content
- Filter bar
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.
font-family: BerninaSans font-weight: 600 1920: 28px 1280: 26.4px (interpolated value; rounded to one decimal position) 360: 24px
- Page headers
- Section headers
font-family: BerninaSans font-weight: 600 font-size: 20px
- Intermediary headlines within sections
- Card headlines
font-family: BerninaSans font-weight: normal font-size: 18px
- List headlines
- Left-side settings menu
font-family: BerninaSans font-weight: normal font-size: 12px
- Tile subheadline
- Table header
font-family: "Bitstream Vera Sans Mono" font-weight: normal font-size: 14px
- 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.
Links on dark backgrounds
Links on dark or colored backgrounds use white as font color and are underlined to distinguish them from other text.
Use the external link whenever it leads somewhere out of the product e.g. the documentation, the blog etc.
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.