Typography
One typeface across a single size ramp, with paragraph and weight variants.
Inter Variable
AaBbCcDdEe 0123456789
Text sizes
Sizes for UI text like labels, controls, table cells, and body copy.
text-2xs11px · 1.15
The quick brown fox jumps over the lazy dog
text-xs12px · 1.15
The quick brown fox jumps over the lazy dog
text-sm13px · 1.15
The quick brown fox jumps over the lazy dog
text-base14px · 1.15
The quick brown fox jumps over the lazy dog
text-lg15px · 1.15
The quick brown fox jumps over the lazy dog
text-xl16px · 1.15
The quick brown fox jumps over the lazy dog
text-2xl17px · 1.15
The quick brown fox jumps over the lazy dog
text-3xl18px · 1.15
The quick brown fox jumps over the lazy dog
Display sizes
Larger sizes for marketing, landing pages, and headings.
text-4xl20px · 1.15
Build something great
text-5xl24px · 1.15
Build something great
text-6xl26px · 1.6
Build something great
text-7xl28px · 1.6
Build something great
text-8xl32px · 1.6
Build something great
text-9xl40px · 1.4
Build something great
text-10xl44px · 1.4
Build something great
text-11xl48px · 1.4
Build something great
text-12xl52px · 1.4
Build something great
Paragraph
The text-p-* variants use looser line-height and tracking for multi-line text.
text-p-xs12px · 1.6
Frappe UI uses one type scale across every screen, so the same sizes work in dense tables and on a marketing page without extra CSS.
text-p-sm13px · 1.5
Frappe UI uses one type scale across every screen, so the same sizes work in dense tables and on a marketing page without extra CSS.
text-p-base14px · 1.5
Frappe UI uses one type scale across every screen, so the same sizes work in dense tables and on a marketing page without extra CSS.
text-p-lg15px · 1.5
Frappe UI uses one type scale across every screen, so the same sizes work in dense tables and on a marketing page without extra CSS.
text-p-xl16px · 1.5
Frappe UI uses one type scale across every screen, so the same sizes work in dense tables and on a marketing page without extra CSS.