Typography ​

One typeface and one size scale, with a weight and a paragraph version of each size.

Inter Variable
AaBbCcDdEe 0123456789
Text sizes

For labels, controls, table cells and body text.

text-2xs11px · 1.35
The quick brown fox jumps over the lazy dog
text-xs12px · 1.35
The quick brown fox jumps over the lazy dog
text-sm13px · 1.35
The quick brown fox jumps over the lazy dog
text-base14px · 1.35
The quick brown fox jumps over the lazy dog
text-lg16px · 1.35
The quick brown fox jumps over the lazy dog
text-xl17px · 1.35
The quick brown fox jumps over the lazy dog
text-2xl18px · 1.35
The quick brown fox jumps over the lazy dog
text-3xl20px · 1.35
The quick brown fox jumps over the lazy dog
Display sizes

For headings and landing pages.

text-4xl24px · 1.35
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
Paragraphs

For text that runs over several lines.

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.

Usage ​

Sizes ​

text-sm, text-base and the other sizes set the font size, line height and letter spacing together. Most frappe-ui controls use text-base (14px), and smaller text uses text-sm (13px).

Weights ​

Add the weight to the size, as in text-sm-medium or text-lg-semibold. It also adjusts the letter spacing for that weight, which font-medium alone does not. The regular weight is 420, a little heavier than Tailwind's 400.

Paragraphs ​

For text that runs over several lines, use text-p-*, as in text-p-base. It has a taller line height, about 1.5.

Line height ​

Sizes up to text-4xl have a line height of 1.35, so text that wraps stays readable. For single-line text in a box of fixed height, such as a toolbar label, add leading-tighter (1.15). frappe-ui components already do this.

ColorsRadius