Looker

Components

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.

ReferenceWeightSpecimen
normal400Roboto is the typographic base for the tone and content of Looker's design system
medium500Roboto is the typographic base for the tone and content of Looker's design system
semiBold600Roboto is the typographic base for the tone and content of Looker's design system
bold700Roboto 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.

SpecimenFont SizeLine HeightReference
Looker Components are great44px52pxxxxxxlarge
Looker Components are great36px44pxxxxxlarge
Looker Components are great28px36pxxxxlarge
Looker Components are great24px36pxxxlarge
Looker Components are great22px28pxxlarge
Looker Components are great18px24pxlarge
Looker Components are great16px24pxmedium
Looker Components are great14px20pxsmall
Looker Components are great12px16pxxsmall
Looker Components are great11px16pxxxsmall