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

Open Sans

The primary font is Open Sans, a humanist sans serif typeface. It was chosen for its open and friendly appearance as well as having excellent legibility for digital applications.

ReferenceWeightSpecimen
light300Open Sans is the typographic base for the tone and content of Looker's design system
normal400Open Sans is the typographic base for the tone and content of Looker's design system
semiBold600Open Sans is the typographic base for the tone and content of Looker's design system
bold700Open Sans 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 great46px64pxxxxxlarge
Looker Components are great36px52pxxxxlarge
Looker Components are great25px40pxxxlarge
Looker Components are great22px32pxxlarge
Looker Components are great18px28pxlarge
Looker Components are great16px24pxmedium
Looker Components are great14px20pxsmall
Looker Components are great12px16pxxsmall
Looker Components are great11px16pxxxsmall