Text Size

Utility classes for controlling text size. Each class sets the correct font family, size, line-height, and smoothing for the active density tier: pixel bundle on low-density displays, Inter Variable on high-density displays.

Text Size Utilities

Use text--{size} utility classes to set font family, size, line-height, and smoothing in one declaration. Density decides which font family the utility resolves to. On low-density displays, the three smallest sizes use the active pixel-font bundle (Classic NicoPups/NicoClean/BlockKie or TRMNL TRMNL12/16/21). On high-density displays, every text size uses Inter Variable regardless of bundle. Sizes from xlarge onward use Inter Variable on every display.

Class Size Line-height Classic (low-density) TRMNL (low-density) High-density
text--small 12px 1 NicoPups @ 16px TRMNL12 Inter Variable
text--base 16px 1.25 NicoClean TRMNL16 Inter Variable
text--large 21px 1 BlockKie @ 26px TRMNL21 Inter Variable
text--xlarge 26px 29px Inter Variable Inter Variable Inter Variable
text--xxlarge 38px 42px Inter Variable Inter Variable Inter Variable
text--xxxlarge 58px 70px Inter Variable Inter Variable Inter Variable
text--mega 74px 86px Inter Variable Inter Variable Inter Variable
text--giga 96px 108px Inter Variable Inter Variable Inter Variable
text--tera 128px 128px Inter Variable Inter Variable Inter Variable
text--peta 170px 180px Inter Variable Inter Variable Inter Variable

Small

The text--small class. Low-density previews show the active pixel-font bundle where that size supports it; high-density previews show Inter.

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
TRMNL Logo Text Size Small 
<span class="text--small">Regular text</span>
<span class="text--small font--bold">Bold text</span>

Base

The text--base class. Low-density previews show the active pixel-font bundle where that size supports it; high-density previews show Inter.

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
TRMNL Logo Text Size Base 
<span class="text--base">Regular text</span>
<span class="text--base font--bold">Bold text</span>

Large

The text--large class. Low-density previews show the active pixel-font bundle where that size supports it; high-density previews show Inter.

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
TRMNL Logo Text Size Large 
<span class="text--large">Regular text</span>
<span class="text--large font--bold">Bold text</span>

XLarge

The text--xlarge class. Low-density previews show the active pixel-font bundle where that size supports it; high-density previews show Inter.

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
TRMNL Logo Text Size XLarge 
<span class="text--xlarge">Regular text</span>
<span class="text--xlarge font--bold">Bold text</span>

XXLarge

The text--xxlarge class. Low-density previews show the active pixel-font bundle where that size supports it; high-density previews show Inter.

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
TRMNL Logo Text Size XXLarge 
<span class="text--xxlarge">Regular text</span>
<span class="text--xxlarge font--bold">Bold text</span>

XXXLarge

The text--xxxlarge class. Low-density previews show the active pixel-font bundle where that size supports it; high-density previews show Inter.

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
TRMNL Logo Text Size XXXLarge 
<span class="text--xxxlarge">Regular text</span>
<span class="text--xxxlarge font--bold">Bold text</span>

Responsive & bit-depth variants

All text size utilities support responsive, orientation, and bit-depth prefixes. Combine them to fine-tune typography across screen sizes and display types.

Variant Example Description
Responsive md:text--large Apply at medium breakpoint and up
Orientation portrait:text--small Apply in portrait orientation
Bit-depth 4bit:text--xlarge Apply on 4-bit displays only
Combined md:4bit:text--xxlarge Apply at medium breakpoint on 4-bit displays 
<span class="text--base md:text--large portrait:text--small">
  Responsive text sizing
</span>
<span class="text--base 4bit:text--xlarge">
  Larger on 4-bit displays
</span>