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 open_in_new Opens in a new tab Lato as the standard typeface, open_in_new Opens in a new tab Poppins for headlines and subheadline, and open_in_new Opens in a new tabRoboto Mono for code snippets.

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

  • Poppins Light 300

    One design system, endless possibilities

  • Poppins Medium 500

    One design system, endless possibilities

  • Roboto Mono Regular 400

    One design system, endless possibilities

Imports

From CDN

Standard

Import

From local files

You need to download Lato and Poppins and then, place the files under your project fonts assets folder.

Now you can import the font-files in your CSS file (make sure you add your correct fonts folder path):

In CSS

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>2em28pxPoppins Medium 500

EOS h1 headline this is a small text

<h2>1.75em24.5pxPoppins Medium 500

EOS h2 headline this is a small text

<h3>1.5em21pxPoppins Medium 500

EOS h3 headline this is a small text

<h4>1.3em18.2pxPoppins Medium 500

EOS h4 headline this is a small text

<h5>1.15em16.1pxPoppins Medium 500
EOS h5 headline this is a small text
<h6>1em14pxPoppins Medium 500
EOS h6 headline
.subheadline1.3em18.2pxPoppins Light 300

EOS subheadline

<body>-14pxLato Regular 400

EOS design system

<code>-14pxRoboto Mono Regular 400

EOS design system

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.