Typography reference and guidelines
Font Families
Outfit Variable
Body text font
Aa
font-family: 'Outfit Variable', sans-serif;
Outfit Variable
Headings font
Aa
font-family: 'Open Sans Variable', sans-serif;
Font Sizes
Compare font sizes side by side
Outfit Variable
text-xs 0.75rem / 1rem The quick brown fox jumps over the lazy dog.
text-sm 0.875rem / 1.25rem The quick brown fox jumps over the lazy dog.
text-base 1rem / 1.5rem The quick brown fox jumps over the lazy dog.
text-lg 1.125rem / 1.75rem The quick brown fox jumps over the lazy dog.
text-xl 1.25rem / 1.75rem The quick brown fox jumps over the lazy dog.
text-2xl 1.5rem / 2rem The quick brown fox jumps over the lazy dog.
text-3xl 1.875rem / 2.25rem The quick brown fox jumps over the lazy dog.
text-4xl 2.25rem / 2.5rem The quick brown fox jumps over the lazy dog.
text-5xl 3rem / 1 The quick brown fox jumps over the lazy dog.
text-6xl 3.75rem / 1 The quick brown fox jumps over the lazy dog.
text-7xl 4.5rem / 1 The quick brown fox jumps over the lazy dog.
text-8xl 6rem / 1 The quick brown fox jumps over the lazy dog.
text-9xl 8rem / 1 The quick brown fox jumps over the lazy dog.
Open Sans Variable
text-xs 0.75rem / 1rem The quick brown fox jumps over the lazy dog.
text-sm 0.875rem / 1.25rem The quick brown fox jumps over the lazy dog.
text-base 1rem / 1.5rem The quick brown fox jumps over the lazy dog.
text-lg 1.125rem / 1.75rem The quick brown fox jumps over the lazy dog.
text-xl 1.25rem / 1.75rem The quick brown fox jumps over the lazy dog.
text-2xl 1.5rem / 2rem The quick brown fox jumps over the lazy dog.
text-3xl 1.875rem / 2.25rem The quick brown fox jumps over the lazy dog.
text-4xl 2.25rem / 2.5rem The quick brown fox jumps over the lazy dog.
text-5xl 3rem / 1 The quick brown fox jumps over the lazy dog.
text-6xl 3.75rem / 1 The quick brown fox jumps over the lazy dog.
text-7xl 4.5rem / 1 The quick brown fox jumps over the lazy dog.
text-8xl 6rem / 1 The quick brown fox jumps over the lazy dog.
text-9xl 8rem / 1 The quick brown fox jumps over the lazy dog.
Usage Examples
Tailwind Classes
CSS Custom Properties
Theme Configuration
@theme {
--font-sans: "Open Sans Variable";
--font-headings: "Outfit Variable";
}