Visit live site

Typography

Real size

Variable

Min size @
320px viewport

Max size @
1360px viewport

pp-H1--3

var(--h1)

2.03rem

3.42rem

Here's a H1 * 2

var(--h1)

2.03rem

3.42rem

Here's a H1 * 1.5

var(--h1)

2.03rem

3.42rem

Here's a H1 * 1.25

var(--h1)

2.03rem

3.42rem

Here's a H1 heading

var(--h1)

2.03rem

3.42rem

Here's a h2 heading

var(--h2)

1.80rem

2.85.rem

Here's a H3 heading

var(--h3)

1.60rem

2.38rem

Here's a H4 heading

var(--h4)

1.42rem

1.98rem

Here's a H5 heading

var(--h5)

1.27rem

1.65rem

Here's a H6 heading

var(--h6)

1.13rem

1.38rem

.c-text-xl - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

var(--xl-text)

1.1rem

1.4rem

.c-text-l - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

var(--l-text)

1rem

1.2rem

.c-text-m - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

var(--m-text)

1rem

.c-text-s - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

var(--s-text)

0.85rem

.c-uppercase

.c-lowercase

.c-underline

.c-bold

.c-italic

Aa

calc(var(--h1) * 3)

Aa

calc(var(--h1) * 2)

Aa

calc(var(--h1) * 1.5)