It's a state of mind

It's a state of mind

It's a state of mind

It's a state of mind

It's a state of mind

It's a state of mind

It's a state of mind

It's a state of mind

It's a state of mind

Break 1 —

Break 2 —

Break 3 —

Break 4 —

Hey there!

Resize the browser to change breakpoints

Ok
button
button

Resize the browser window to craft your typography for every break-point. Inputs that are blue are active in this breakpoint.


Break points

phone-icon phone-icon
tablet-icon tablet-icon
laptop-icon laptop-icon
desktop-icon desktop-icon
tv-icon tv-icon

Base type size

small

medium

large

x-large

xx-large


Type scale

info-icon

The Type Scale allows you to control the contrast between the levels in your hierarchy. Larger numbers mean bigger more exaggerated steps.

cross

small

medium

large

x-large

xx-large


Limits

minimum size

body-small max

body-x-small max


Final pixel sizes

hero

h1

h2

h3

h4

body-big

body

body-small

body-x-small