The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Typography

Typography is an important part of design. It is used to organise and create clear and efficient hierarchy.


Typeface

Use Lato as the standard typeface.

Possible variations
  • Lato Regular 400

    One design system, endless possibilities

  • Lato Italic 400

    One design system, endless possibilities

  • Lato Bold 700

    One design system, endless possibilities

Standard

content_copy
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">

Import

content_copy
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700');

In CSS

content_copy
font-family: 'Lato', sans-serif;

Type scale

The HTML <small> tag defines smaller text. It is intended to be used to identify items of secondary importance. It is 0.8 em the size of the parent and it applies only to the title sizes H1 to H5.

Heading and body font-sizes are based as follows:

HTML tagSize emSize pxFont weightText example
<h1>2em28pxLato Regular 400

EOS h1 headline this is a small text

<h2>1.75em24.5pxLato Regular 400

EOS h2 headline this is a small text

<h3>1.5em21pxLato Bold 700

EOS h3 headline this is a small text

<h4>1.3em18.2pxLato Bold 700

EOS h4 headline this is a small text

<h5>1.15em16.1pxLato Bold 700
EOS h5 headline this is a small text
<h6>1em14pxLato Bold 700
EOS h6 headline
<body>-14pxLato Regular 400

EOS design system

content_copy
h1,
h2 {
 font-weight: 400;
 margin-bottom: 10px;
 margin-top: 20px;
}

h3 {
 font-weight: 700
 margin-bottom: 10px;
 margin-top: 20px;
}

h4,
h5,
h6 {
 font-weight: 700
 margin-bottom: 10px;
 margin-top: 10px;
}

body {
  font-size: 14px;
}

Headline margins

All headlines have top and bottom margins defined for cross-browser consistency.

h1, h2, h3, use margin-top: 20px, and margin-bottom: 10px.

h4, h5, h6, use margin-top: 10px, and margin-bottom: 10px.

Line-height

The line-height is the vertical distance between lines of text. The line-height is calculated as 1:1,5 of text size, line-height: 1.5em.

EOS writing guides and conventions and rules should be followed when writing titles in order to maintain consistency and clarity.

Text colors

#141823

$eos-bc-gray-1000

Default text color on white

More information related to text and colors can be found in the color usage guide of the design system.