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-lg16px · 1.15
The quick brown fox jumps over the lazy dog
text-xl17px · 1.15
The quick brown fox jumps over the lazy dog
text-2xl18px · 1.15
The quick brown fox jumps over the lazy dog
text-3xl20px · 1.15
The quick brown fox jumps over the lazy dog
Display sizes
Larger sizes for marketing, landing pages, and headings.
text-4xl24px · 1.15
Build something great
text-5xl26px · 1.6
Build something great
text-6xl28px · 1.6
Build something great
text-7xl32px · 1.6
Build something great
text-8xl40px · 1.4
Build something great
text-9xl44px · 1.4
Build something great
text-10xl48px · 1.4
Build something great
text-11xl52px · 1.4
Build something great
text-12xl56px · 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-lg16px · 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-xl17px · 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.