Typography
A harmonious type scale based on the minor third ratio (1.2) for readable, balanced text.
Font Families
Sans (Default)
The quick brown fox jumps over the lazy dog.
--font-sansSerif
The quick brown fox jumps over the lazy dog.
--font-serifMono
const greeting = "Hello, World!";
--font-monoFont Sizes
Aa
--text-xs 12pxAa
--text-sm 14pxAa
--text-base 16pxAa
--text-lg 18pxAa
--text-xl 20pxAa
--text-2xl 24pxAa
--text-3xl 30pxAa
--text-4xl 36pxAa
--text-5xl 48pxUsage
Font Weights
Light
--font-lightNormal
--font-normalMedium
--font-mediumSemibold
--font-semiboldBold
--font-boldLine Heights
--leading-tight 1.25 Headings--leading-snug 1.375 Subheadings--leading-normal 1.5 Body text--leading-relaxed 1.625 Long-form--leading-loose 2 SpaciousLetter Spacing
Recommended Pairings
Page Title
--text-4xl + --font-bold + --leading-tightSection Heading
--text-2xl + --font-semibold + --leading-snugBody Text
--text-base + --font-normal + --leading-normalCaption
--text-sm + --font-normal + --leading-normalCode
--text-sm + --font-mono