Typography
Typography sets the tone and flow of an interface's content. Looker's design system has built-in typography aims to create a harmonious hierarchy, maximize legibility, and present the content as clearly as possible.
Family
Roboto
The body font is Roboto, a sans serif typeface. It was chosen for its open and friendly appearance as well as having excellent legibility for digital applications.
The brand font defaults to Roboto a sans serif typeface. It is used for headings, buttons and tabs, this can be set independently of the body font in the theme.
Roboto Mono
The code font is Roboto Mono, a fixed-width typeface. It is used for code and structured data display.
| Reference | Weight | Specimen |
|---|---|---|
normal | 400 | Roboto is the typographic base for the tone and content of Looker's design system |
medium | 500 | Roboto is the typographic base for the tone and content of Looker's design system |
semiBold | 600 | Roboto is the typographic base for the tone and content of Looker's design system |
bold | 700 | Roboto is the typographic base for the tone and content of Looker's design system |
Type scale
The type scale is designed to provide consistent and harmonious typographic styles.
| Specimen | Font Size | Line Height | Reference |
|---|---|---|---|
| Looker Components are great | 44px | 52px | xxxxxlarge |
| Looker Components are great | 36px | 44px | xxxxlarge |
| Looker Components are great | 28px | 36px | xxxlarge |
| Looker Components are great | 24px | 36px | xxlarge |
| Looker Components are great | 22px | 28px | xlarge |
| Looker Components are great | 18px | 24px | large |
| Looker Components are great | 16px | 24px | medium |
| Looker Components are great | 14px | 20px | small |
| Looker Components are great | 12px | 16px | xsmall |
| Looker Components are great | 11px | 16px | xxsmall |