Typography

Primary

Our primary typeface is a variable font Roboto Flex.

Roboto Flex

Secondary

Our supporting typeface is Roboto. This sans serif style is used in longer blocks of text to provide better readability. The simplicity and spacing between letters reduces visual clutter and provides a clean, modern look. We use Roboto in various font weights.

Roboto Regular
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Roboto Medium
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9
Roboto Bold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0 1 2 3 4 5 6 7 8 9

Typescale

A typescale defines a set of font sizes for different headings and body text. This is key for creating balanced visual rhythm in a user interface.

H1
70px / 72px
Roboto Flex
Transforming Products with Design
H2
48px / 120%
Roboto Flex
Research & Design
H3
40px / 120%
Roboto Flex
Human centered design
H4
32px / 120%
Roboto Regular
Collaborative Culture
Subheading 1
22px / 120%
Roboto Medium
Research, Strategy, Design
Subheading 2
20px / 120%
Roboto Regular
Collaborative working style
Body Large
24px / 135%
Roboto • Regular
Collaborative Culture
Paragraph
18px / 150%
Roboto Regular
Explore our interview series!
Paragraph Small
16px / 150%
Roboto Regular
Redesign of a no-code workflow automation SaaS platform
Button Large
20px / 100%
Roboto Medium
Button Small
16px / 100%
Roboto • Medium
Caption
14px / 100%
Roboto • Regular
our methods

Type Scale

Screenshot of v1 of Fuego type scale
HomeComponents →