Typography

Overview

Typography is used to create organization and visual hierarchy that assists in guiding the user through the product and experience.

Typeface

  • Roboto Regular

  • Roboto Condensed

The IAA Design System uses the Roboto typeface. It was selected for its dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. Roboto also has a "Condensed" variation that provides the ability to maximize the number of characters in a single line when real estate is crucial.

Type Sizing

Type sizing is based on a typescale spencermortensen.com/articles/typographic-scale/ Type basis defines 14px as 1em. Type sizing is based on a 1.25 (4:5 Major-Third) scale. This ratio balances vertical density with an expression of clear hierarchy. The root base (default text size) is 1.4rem.

Installing Roboto

Include the code below before the end of your head tag.