On this page

Typography

Persona's typeface is using DM Sans. This typeface is available on google fonts.

Line Height

Size

token-nameline-height / class-name

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.

Tightest

lineHeight.tightest-1.33 / leading-tightest

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.

Tighter

lineHeight.tighter1.42 / leading-tighter

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.

Tight

lineHeight.tight1.45 / leading-tight

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.

Normal

lineHeight.normal1.5 / leading-normal

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.

Wide

lineHeight.wideAuto / leading-wide

Letter Spacing

Size

token-namespacing / class-name

The quick brown fox jumps over the lazy dog.

Tighter

letterSpacing.tighter-0.4px / tracking-tighter

The quick brown fox jumps over the lazy dog.

Tight

letterSpacing.tight-0.2px / tracking-tight

The quick brown fox jumps over the lazy dog.

Normal

letterSpacing.normal0px / tracking-normal

The quick brown fox jumps over the lazy dog.

Wide

letterSpacing.wide0.2px / tracking-wide

The quick brown fox jumps over the lazy dog.

Wider

letterSpacing.wider0.4px / tracking-wider

The quick brown fox jumps over the lazy dog.

Widest

letterSpacing.widest0.8px / tracking-widest

Font Size

Size

token-name / class-namefont-size / line-heightletter-spacing

The quick brown fox jumps over the lazy dog.

tn

fontSize.tn / text-tn11px / $lineHeight.snug$letterSpacing.wider

The quick brown fox jumps over the lazy dog.

xs

fontSize.xs / text-xs12px / $lineHeight.snug$letterSpacing.wide

The quick brown fox jumps over the lazy dog.

sm

fontSize.sm / text-sm14px / $lineHeight.snug$letterSpacing.normal

The quick brown fox jumps over the lazy dog.

base

fontSize.base / text-base14px / $lineHeight.snug$letterSpacing.normal

The quick brown fox jumps over the lazy dog.

xl

fontSize.xl / text-xl20px / $lineHeight.snug$letterSpacing.normal

The quick brown fox jumps over the lazy dog.

2xl

fontSize.2xl / text-2xl24px / $lineHeight.snug$letterSpacing.normal

The quick brown fox jumps over.

4xl

fontSize.4xl / text-4xl36px / $lineHeight.snug$letterSpacing.normal

The quick brown fox jumps.

5xl

fontSize.5xl / text-5xl48px / $lineHeight.snug$letterSpacing.normal

The quick brown fox.

6xl

fontSize.6xl / text-6xl60px / $lineHeight.snug$letterSpacing.tight

The quick brown.

7xl

fontSize.7xl / text-7xl72px / $lineHeight.snug$letterSpacing.tight

Element

DM Sans

FONT SIZE / LINE HEIGHT / LETTER SPACINGTailwind FONT-SIZE • Tailwind LINE-HEIGHT • Tailwind LETTER-SPACING

Heading

Heading 1

DM Sans Regular72px / Auto / -0.2pxtext-7xl • leading-wide • tracking-tight

Heading 2

DM Sans Regular72px / Auto / -0.2pxtext-7xl • leading-wide • tracking-tight

Heading 3

DM Sans Regular48px / Auto / 0pxtext-5xl • leading-wide • tracking-normal

Heading 4

DM Sans Medium36px / Auto / 0pxtext-4xl • leading-wide • tracking-normal

Heading 5

DM Sans Medium24px / Auto / 0pxtext-2xl • leading-wide • tracking-normal

Heading 6

DM Sans Regular20px / Auto / 0pxtext-xl • leading-wide • tracking-normal

Subheading

Sub Heading 1

DM Sans Medium16px / 1.5 / 0.2pxtext-base • leading-normal • tracking-wide

Sub Heading 2

DM Sans Medium14px / 1.42 / 0.2pxtext-sm • leading-tighter • tracking-wide

Body

Body 1DM Sans Regular16px / 1.5 / 0.2pxtext-base • leading-normal • tracking-wide

Body 2DM Sans Regular14px / 1.42 / 0.2pxtext-sm • leading-tighter • tracking-wide

Body List 1

DM Sans Regular16px / 1.5 / 0.2pxtext-base • leading-normal • tracking-wide

Body List 2

DM Sans Regular14px / 1.42 / 0.2pxtext-sm • leading-tighter • tracking-wide

Hyperlink (text)DM Sans Regular16px / 1.5 / 0.2pxtext-base • leading-normal • tracking-wide

Hyperlink (subtext)DM Sans Regular14px / 1.42 / 0.2pxtext-sm • leading-tighter • tracking-wide

Button

button 1DM Sans Medium16px / 1.5 / 0.4pxtext-base • leading-normal • tracking-wider

button 2DM Sans Medium14px / 1.42 / 0.4pxtext-sm • leading-tighter • tracking-wider

button Link 1DM Sans Medium16px / 1.5 / 0.4pxtext-base • leading-normal • tracking-wider

button Link 2DM Sans Medium14px / 1.42 / 0.4pxtext-sm • leading-tighter • tracking-wider

Caption

CaptionDM Sans Regular12px / 1.33 / 0.2pxtext-xs • leading-tightest • tracking-wide

Caption 2 (known as small text)DM Sans Regular11px / 1.45 / 0.4pxtext-tn • leading-tight • tracking-wider

Hyperlink (caption)DM Sans Medium12px / 1.33 / 0.2pxtext-xs • leading-tightest • tracking-wide

Hyperlink (caption 2)DM Sans Medium11px / 1.45 / 0.4pxtext-tn • leading-tight • tracking-wider

Overline

OverlineDM Sans Regular11px / 1.45 / 0.8pxtext-tn • leading-tight • tracking-widest