Typography

Styles

A collection of typographic styles that make it possible to create text hierarchy in Teamleader.

Heading 1

Title for a screen or modal.

Heading 2

Title for main sections.

Heading 3

Title for subsections. This header can’t be the first element of a main section.

Heading 4

For places where there is limited space and short titles. E.g. Table headers, tabs or sidebars

Text Display

Intro text or editorial body content.

Text Body

Default font-style for text in the app.

Text Small

Only for captions, tertiary content or fine print.

Emphasis

To highlight a part of the text, The <strong> class can be used. Available for all three text styles.

Spacing

Default spacing settings help to maintian a consistent hierarchy in between text elements. If needed, these can be overriden with a custom spacing.

Text & Color

Color is mainly used to provide additional meaning.

Available for light and dark backgrounds, these colors give extra meaning to the text.

Default vs monospaced numbers

For placing numbers in text, the default setting is used. This makes them blend more with the rest of the characters.

If numbers are meant to be read in columns, the monospaced font-feature is used. This makes them easier to compare to each other.

Line length

There is a classic typographic rule that recommends 45 to 75 characters (including spaces) on 1 line. Howewever, there is some debate going on whether this rule still stands for responsive web layouts. We aim to follow that guideline but make exceptions if the context demands it.

When a line is too short, it will break the readers rhythm. A smaller text style or a wider container is recommended.

When a line is too wide, it is harder follow a line trough the end. Apply a max-width to the text container to prevent this from happening