Headings
The quick brown fox jumps over the lazy dog

.if.typography.heading.xx-large font size: 56 font-variation-settings: 'wght' 36 line height: 64

The quick brown fox jumps over the lazy dog

.if.typography.heading.x-large font size: 42 font-variation-settings: 'wght' 36 line height: 56

The quick brown fox jumps over the lazy dog

.if.typography.heading.large font size: 32 font-variation-settings: 'wght' 60 line height: 48

The quick brown fox jumps over the lazy dog

.if.typography.heading.medium font size: 28 font-variation-settings: 'wght' 60 line height: 40

The quick brown fox jumps over the lazy dog

.if.typography.heading.small font size: 24 font-variation-settings: 'wght' 60 line height: 32

The quick brown fox jumps over the lazy dog

.if.typography.heading.x-small font size: 18 font-variation-settings: 'wght' 132 line height: 28

The quick brown fox jumps over the lazy dog

.if.typography.heading.xx-small font size: 16 font-variation-settings: 'wght' 132 line height: 20

Paragraphs

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

.if.typography.paragraph.x-large font size: 22 font-variation-settings: 'wght' 60 line height: 32 margin :not(first-of-type): 2rem 0 0

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

.if.typography.paragraph.large font size: 18 font-variation-settings: 'wght' 78 line height: 28 margin :not(first-of-type): 1.5rem 0 0

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

.if.typography.paragraph.medium font size: 16 font-variation-settings: 'wght' 78 line height: 24 margin :not(first-of-type): 1.5rem 0 0

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

.if.typography.paragraph.small font size: 14 font-variation-settings: 'wght' 78 line height: 18 margin :not(first-of-type): 1.125rem 0 0

UI
Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

.if.typography.ui.large font size: 18 line height: 24 font-variation-settings: 'wght' 78

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

.if.typography.ui.medium font size: 16 line height: 20 font-variation-settings: 'wght' 78

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

.if.typography.ui.small font size: 14 line height: 16 font-variation-settings: 'wght' 78

Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Do you have any idea how long it takes those cups to decompose. God help us, we're in the hands of engineers.

.if.typography.ui.x-small font size: 12 line height: 14 font-variation-settings: 'wght' 78

Optionally set weight on UI font with .weight-medium

.if.typography.ui.medium.weight-medium font size: 16 line height: 20 font-variation-settings: 'wght' 106

Optionally set weight on UI font with .weight-bold

.if.typography.ui.medium.weight-bold font size: 16 line height: 20 font-variation-settings: 'wght' 132

Optionally set text decoration on any .if.typography font with .underline

.if.typography.ui.medium.underline font size: 16 line height: 20 font-variation-settings: 'wght' 78 text-decoration: underline