Font Size

Use text-{size} utilities to control the font size and default line-height of text.

---

Basic example

Use utilities like text-sm and text-lg to set the font size of an element:

Style('text-sm ...', child: Text('The quick brown fox ...'))
Style('text-base ...', child: Text('The quick brown fox ...'))
Style('text-lg ...', child: Text('The quick brown fox ...'))
Style('text-xl ...', child: Text('The quick brown fox ...'))
Style('text-2xl ...', child: Text('The quick brown fox ...'))

Setting the line-height

Use text-{size}/{N} to set the font size and line-height at the same time. The /N suffix multiplies the spacing scale (/6 → 24px, /7 → 28px, /8 → 32px):

Style('text-sm/6 ...', child: Text('So I started to walk into the water...'))
Style('text-sm/7 ...', child: Text('So I started to walk into the water...'))
Style('text-sm/8 ...', child: Text('So I started to walk into the water...'))

Class reference

Class	Font Size	Line Height
text-xs	12px	16px
text-sm	14px	20px
text-base	16px	24px
text-lg	18px	28px
text-xl	20px	28px
text-2xl	24px	32px
text-3xl	30px	36px
text-4xl	36px	40px
text-5xl	48px	48px
text-6xl	60px	60px
text-7xl	72px	72px
text-8xl	96px	96px
text-9xl	128px	128px
text-{size}/{N}	size scale	N * 4px override
text-[<value>]	arbitrary numeric font-size	inherited line-height
text-(length:--var)	Resolved against theme-defined StyleThemeData.customProperties (the length: hint is ignored); behaves like text-[<value>]. Cascade-inherited or JS-set CSS variables remain out of scope.