Skip to content
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

Released under the MIT License.