Typography

Arial is a system font that can be used without any risk of failure.

Typefaces#

  • All types of headings should primarily be used in single line scenarios.
  • Use any base color of brand-primary, danger, success, info or warning as text color as long as it has a high contrast ratio in interaction with backgrounds.

Arial#

"Arial is an extremely versatile family of typefaces which can be used with equal success for text setting in reports, presentations, magazines etc, and for display use in newspapers, advertising and promotions."
Quote: Microsoft Typography Font Arial

RegularRegular
BoldBold
DesignersMonotype Type Drawing Office - Robin Nicholas, Patricia Saunders 1982

Small#

  • The typeface is always regular.
  • The line-height always is 140%.
  • It is mainly used, i. e. for labels, highlights.
Text styleFont sizePreview
Small12pxsmall

Small bold#

  • The typeface is always bold.
  • The line-height always is 140%.
  • It is mainly used, i. e. for labels, highlights.
Text styleFont sizePreview
Small bold12pxsmall bold

Basic#

  • The typeface is always regular.
  • The line-height always is 140%.
  • It is mainly used, i. e. for body text, tables, lists, etc.
Text styleFont sizePreview
Basic14pxbasic

Basic bold#

  • The typeface is always bold.
  • The line-height always is 140%.
  • It is mainly used, i. e. to highlight single words, paragraphs.
Text styleFont sizePreview
Basic bold14pxbasic bold

Large#

  • The typeface is always regular.
  • The line-height always is 140%.
  • It is mainly used, i. e. for headlines, highlights.
Text styleFont sizePreview
Large16pxlarge

Large bold#

  • The typeface is always regular.
  • The line-height always is 140%.
  • It is mainly used, i. e. for headlines, highlights.
Text styleFont sizePreview
Large bold16pxlarge bold

Button text#

  • The typeface is always bold.
  • The line-height is 120%.
  • The text style is only used in our button component.
Text styleFont size Preview
Button text16pxButton text

Label text#

  • The typeface is always regular.
  • The line-height is 120%.
  • The text style is only used in our label component.
Text styleFont size Preview
Label text14pxLabel text

Page headlines#

  • The typeface is always bold.
  • The line-height always is 120%.
  • The page headlines are displayed in 5 levels.
  • All levels have different font sizes.
  • There are fixed font sizes from level 5 to level 1.
Text styleFont sizePreview
Page headline (Level 1)28pxpage headline 1
Page headline (Level 2)24pxpage headline 2
Page headline (Level 3)20pxpage headline 3
Page headline (Level 4)16pxpage headline 4
Page headline (Level 5)14pxpage headline 5

Section head#

  • The typeface is always bold.
  • The line-height always is 120%.
  • Section head has only one size and font.
  • The text of a section headline is always centered on the screen.
  • It is always bold and uppercase.
Text styleFont sizePreview
Section head16pxsection headline

Pricebox#

  • The typeface is always bold.
  • The line-height is 100%.

Addon#

  • These font sizes are only used for additional text of our pricebox, i.e. prefix, currency, recommended retail price (rrp).
BreakpointFont size Preview
SM-XS12pxPricebox - addon (SM-XS)

Basic quantity#

  • These font sizes are only used for the basic quantity text of our pricebox.
  • The line-height is 120%.
BreakpointFont size Preview
SM-XS10pxBasic quanitity (SM-XS)

Price#

BreakpointFont size Preview
SM28pxPricebox - small (SM)
XS20pxPricebox - small (XS)

Label#

BreakpointFont size Preview
SM16pxPricebox - label (SM)
XS14pxPricebox - label (XS)

Lists#

  • Lists are used for text structuring.
TypeAttributesPreview
BulletsBulletpoints are special text characters whose form depends on the system.
Size and color depend on the font style of the copy text.		List bullet
NumberedNumbers are text characters of the font.
Size and color depend on the font style of the copy text.		List bullet

Spacing & measurements#

TypeAttributesPreview
Vertical spacing 32px between headline (Level 1) and other headlines or body text.

16px between headline (Level 2) and other headlines or body text.

8px between headline (Level 3) and other headlines or body text.

32px between body text and body text or headlines.

8px between headline (Level 4) and other headlines or body text.

8px between headline (Level 5) and other headlines or body text.		spacing: forms
Vertical spacing 16px between section headline (Level 1) and body text.

32px between body text and body text or headlines.		spacing: forms

Our workflow in Sketch#

  • All text styles are included in our CAKE UI Mail library.
  • Use only these styles!

Change log#

1.1.0 Mail - 2021-07-22#

Changed#

  • Doc: "Typography" | Clean up the documentation for the right structure and sentence case

1.0.0 Mail - 2021-06-24#

Highlights#

  • Sketch, Doc: "Typography" | New Arial font has replaced Trebuchet MS and pricebox text styles have been introduced

Added#

  • Doc: "Typography" | Lists, spacings and measurements have been described

Removed#

  • Sketch, Doc: "Energy label" | Removed energy label as a text-style, symbol in Sketch and documentation.