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 to craft typography thats perfect at every break-point. Inputs that are black are affecting the in current break point.


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

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