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 the design process. It plays a vital role in the process of communicating with the user.


Typeface

Use Lato as the standard typeface and Work Sans for headlines and subheadline.

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

  • Work Sans Regular 400

    One design system, endless possibilities

  • Work Sans Light 300

    One design system, endless possibilities

  • Work Sans Bold 600

    One design system, endless possibilities

Imports

Standard

content_copy
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,600" rel="stylesheet">

Import

content_copy
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,400,600');

In CSS

content_copy
font-family: 'Lato', arial, helvetica, sans-serif;
// font-family for h1-h6 and subheadline class:
font-family: 'Work Sans', arial, helvetica, 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>2em28pxWork Sans Regular 400

EOS h1 headline this is a small text

<h2>1.75em24.5pxWork Sans Regular 400

EOS h2 headline this is a small text

<h3>1.5em21pxWork Sans Semi Bold 600

EOS h3 headline this is a small text

<h4>1.3em18.2pxWork Sans Semi Bold 600

EOS h4 headline this is a small text

<h5>1.15em16.1pxWork Sans Semi Bold 600
EOS h5 headline this is a small text
<h6>1em14pxWork Sans Semi Bold 600
EOS h6 headline
.subheadline1.3em18.2pxWork Sans Light 300

EOS subheadline

<body>-14pxLato Regular 400

EOS design system

content_copy
body {
  font-family: 'Lato', arial, helvetica, sans-serif;
  font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.subheadline {
  font-family: 'Work Sans', arial, helvetica, sans-serif;
}

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

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

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

.subheadline {
 font-size: 1.3em;
 font-weight: 300;
 line-height: 1.5em;
}

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.