Typography

It helps you to present your design and content as clearly and effectively as possible according to the SCHWARZ standard.

Helvetica Neue LT Pro#

  • The Helvetica Neue displays the functional and objective style that was characteristic of fonts in the 1950s and 60s.
  • The defined base color for all text-styles is basic-black.
  • Use any color of brand-primary, brand-secondary, brand-info, brand-attention, gray, danger or success as text color as long as it has a high contrast ratio in interaction with backgrounds.
  • All types of headings should primarily be used in single line scenarios.
  • All text-styles are set to a letter-spacing of 0.2px.
  • Capital letters are not allowed!

Light Condensed
Medium Condensed

 TypefaceText-styleUsage
Light CondensedSmall, Basic, Large, Button textfor body text, links, tables, lists, input-fields, etc.
Medium CondensedSmall Bold, Basic Bold, Large Bold, Headlines, Displaysfor headlines, labels, highlights, etc.

Small#

  • The typeface is always light condensed.
  • The line height is always 140%.
  • Left, center, and right alignment are available for this font style.
BreakpointFont sizePreview
LG14pxsmall condensed (LG)
MD-XS12pxsmall condensed (MD-XS)

Small bold#

  • The typeface is always medium condensed.
  • The line height is always 140%.
  • Left, center, and right alignment are available for this font style.
BreakpointFont sizePreview
LG14pxsmall medium-condensed (LG)
MD-XS12pxsmall medium-condensed (MD-XS)

Basic#

  • The typeface is always light condensed.
  • The line height is always 140%.
  • Left, center, and right alignment are available for this font style.
BreakpointFont sizePreview
LG18pxbasic condensed (LG)
MD-XS16pxbasic condensed (MD-XS)

Basic bold#

  • The typeface is always medium condensed.
  • The line height is always 140%.
  • Left, center, and right alignment are available for this font style.
BreakpointFont sizePreview
LG18pxbasic medium-condensed (LG)
MD-XS16pxbasic medium-condensed (MD-XS)

Large#

  • The typeface is always light condensed.
  • The line height is always 140%.
  • Left, center, and right alignment are available for this font style.
BreakpointFont sizePreview
LG22pxlarge condensed (LG)
MD-XS20pxlarge condensed (MD-XS)

Large bold#

  • The typeface is always medium condensed.
  • The line height is always 140%.
  • Left, center, and right alignment are available for this font style.
BreakpointFont sizePreview
LG22pxlarge medium-condensed (LG)
MD-XS20pxlarge medium-condensed (MD-XS)

Button text#

  • The text-style is only used in the button component.
  • The typeface is always light condensed.
  • The line height is always 120%.
BreakpointFont size Preview
LG18pxButton text
MD-XS16pxButton text

Headlines#

  • 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.
  • The typeface is always medium condensed.
  • The line height is always 120%.
  • Left, center, and right alignment are available for all headline levels.

Headline (Level 1)#

BreakpointFont sizePreview
LG34pxheadline 1 (LG)
MD-XS32pxheadline 1 (MD-XS)

Headline (Level 2)#

BreakpointFont sizePreview
LG30pxheadline 2 (LG)
MD-XS28pxheadline 2 (MD-XS)

Headline (Level 3)#

BreakpointFont sizePreview
LG26pxheadline 3 (LG)
MD-XS24pxheadline 3 (MD-XS)

Headline (Level 4)#

BreakpointFont sizePreview
LG22pxheadline 4 (LG)
MD-XS20pxheadline 4 (MD-XS)

Headline (Level 5)#

BreakpointFont sizePreview
LG18pxheadline 5 (LG)
MD-XS16pxheadline 5 (MD-XS)

Displays#

  • The display text-style is defined in 5 levels.
  • All levels have different font sizes.
  • There are fixed font sizes from level 5 to level 1.
  • The typeface is always medium condensed.
  • The line height is always 120%.
  • Left, center, and right alignment are available for all display levels.

Display (Level 1)#

BreakpointFont sizePreview
LG56pxdisplay 1 (LG)
MD-XS32pxdisplay 1 (MD-XS)

Display (Level 2)#

BreakpointFont sizePreview
LG52pxdisplay 2 (LG)
MD-XS28pxdisplay 2 (MD-XS)

Display (Level 3)#

BreakpointFont sizePreview
LG48pxdisplay 3 (LG)
MD-XS24pxdisplay 3 (MD-XS)

Display (Level 4)#

BreakpointFont sizePreview
LG44pxdisplay 4 (LG)
MD-XS20pxdisplay 4 (MD-XS)

Display (Level 5)#

BreakpointFont sizePreview
LG40pxdisplay 5 (LG)
MD-XS16pxdisplay 5 (MD-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.		 lists: bullet
NumberedNumbers are text characters of the font.
Size and color depend on the font style of the copy text.		lists: numbered

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

Our workflow#

  • All text styles are included in our CAKE UI Fundamental file.
  • With Sketch v51.2 text styles can always be linked to this document – Use only these styles!

  • The desired line-height can be calculated in your preferred tool in the line-height input field by using multiplication:

    • Font size * line height decimal number and then press enter. For example 120% line height for 18px text is calculated this way:
      18 * 1,2 = 21,6
      Line height calculation

Change log#

5.3.0 Fundamental & 5.3.0 Web - 2021-11-29#

Added#

  • Doc: "Typography" | Line height calculation is added to our workflow section

5.2.0 Fundamental & 5.2.0 Web - 2021-07-22#

Changed#

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

4.1.0 Fundamental & 4.1.0 Web - 2021-02-18#

Added#

  • "Typography" | Added text-alignment left, center, right: Small, Basic, Large, Display, Headline (LG & MD-XS)
  • "Typography" | Added text-style: display 4-5 (LG & MD-XS)
  • "Typography" | Added description: display 4-5 (LG & MD-XS)

Changed#

  • "Typography" | Changed text-styles: set letter-spacing to 0.2px (LG & MD-XS)