Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Component type

n/a

Document status

IN REVIEW

Design source (in Figma)

Typography tokens

Author

nathan.mckean@reckitt.com (Unlicensed)

Responsible

Julia Boyarshchikova (Deactivated)

Introduction

Typography helps us create hierarchies, organize information, and guide our users through pages.


Anatomy

Our default text font is Roboto, size varies from 10px to 48px to be easily used on desktop and mobile.


Usage

Do

  • Text usually is left aligned.

  • In some cases you'll have to center or right aligned.

  • When setting left aligned typography it’s important to take care to balance the ragged edge of the text as effectively as possible. This improves legibility and the appearance of text.

  • Use the underline style to link text in the body to show when text is clickable.

Don’t do

  • Right aligned, centered, justified text.

  • Break the words.

  • Leave short words hanging.

  • Include big indents on single lines.

  • Over extended words.

  • All caps are difficult to read, they make the reading speed slower than title or sentence case.

  • No labels