Typography
Line Height
Size
token-nameline-height / class-nameA 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-tightestA 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-tighterA 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-tightA 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-normalA 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-wideLetter Spacing
Size
token-namespacing / class-nameThe quick brown fox jumps over the lazy dog.
Tighter
letterSpacing.tighter-0.4px / tracking-tighterThe quick brown fox jumps over the lazy dog.
Tight
letterSpacing.tight-0.2px / tracking-tightThe quick brown fox jumps over the lazy dog.
Normal
letterSpacing.normal0px / tracking-normalThe quick brown fox jumps over the lazy dog.
Wide
letterSpacing.wide0.2px / tracking-wideThe quick brown fox jumps over the lazy dog.
Wider
letterSpacing.wider0.4px / tracking-widerThe quick brown fox jumps over the lazy dog.
Widest
letterSpacing.widest0.8px / tracking-widestFont Size
Size
token-name / class-namefont-size / line-heightletter-spacingtn
fontSize.tn / text-tn11px / $lineHeight.snug$letterSpacing.widerxs
fontSize.xs / text-xs12px / $lineHeight.snug$letterSpacing.widesm
fontSize.sm / text-sm14px / $lineHeight.snug$letterSpacing.normalbase
fontSize.base / text-base14px / $lineHeight.snug$letterSpacing.normalxl
fontSize.xl / text-xl20px / $lineHeight.snug$letterSpacing.normal2xl
fontSize.2xl / text-2xl24px / $lineHeight.snug$letterSpacing.normal4xl
fontSize.4xl / text-4xl36px / $lineHeight.snug$letterSpacing.normal5xl
fontSize.5xl / text-5xl48px / $lineHeight.snug$letterSpacing.normal6xl
fontSize.6xl / text-6xl60px / $lineHeight.snug$letterSpacing.tight7xl
fontSize.7xl / text-7xl72px / $lineHeight.snug$letterSpacing.tightElement
DM Sans
FONT SIZE / LINE HEIGHT / LETTER SPACINGTailwind FONT-SIZE • Tailwind LINE-HEIGHT • Tailwind LETTER-SPACINGHeading
Heading 1
DM Sans Regular72px / Auto / -0.2pxtext-7xl • leading-wide • tracking-tightHeading 2
DM Sans Regular72px / Auto / -0.2pxtext-7xl • leading-wide • tracking-tightHeading 3
DM Sans Regular48px / Auto / 0pxtext-5xl • leading-wide • tracking-normalHeading 4
DM Sans Medium36px / Auto / 0pxtext-4xl • leading-wide • tracking-normalHeading 5
DM Sans Medium24px / Auto / 0pxtext-2xl • leading-wide • tracking-normalHeading 6
DM Sans Regular20px / Auto / 0pxtext-xl • leading-wide • tracking-normalSubheading
Sub Heading 1
DM Sans Medium16px / 1.5 / 0.2pxtext-base • leading-normal • tracking-wideSub Heading 2
DM Sans Medium14px / 1.42 / 0.2pxtext-sm • leading-tighter • tracking-wideBody
- Body List 1
- Body List 2