Font Family

The Framework ships two pixel font bundles: Classic (NicoPups, NicoClean, BlockKie) and TRMNL (TRMNL12, TRMNL16, TRMNL21). Low-density displays use the selected bundle; high-density displays use Inter Variable for legibility.

Classic screen--fonts-classic
TRMNL screen--fonts-trmnl

The original pixel set. Three single-weight fonts: NicoPups, NicoClean, BlockKie. Default in Framework 3.0.

The new pixel set. Three font families with Regular and Bold weights: TRMNL12, TRMNL16, TRMNL21. Default in Framework 3.1.

<div class="screen screen--fonts-classic">...</div>
<div class="screen screen--fonts-trmnl">...</div>

Both bundles are available in Framework 3.x. Low-density displays use the selected pixel-font bundle. High-density displays use Inter Variable regardless of bundle or bit depth. Any Scale or Text Scale modifier other than Regular also resolves typography to Inter Variable, because pixel bundles only render correctly at their native sizes. In Framework 3.1, screens without a font-bundle class use TRMNL by default; add screen--fonts-classic to opt into Classic.

#

TRMNL bundle

Three font families, each with Regular and Bold weights. This is the implicit default for Framework 3.1 when no font-bundle class is present. Add screen--fonts-trmnl when you want to pin the bundle explicitly. This controls pixel-font output on low-density displays; high-density displays still resolve to Inter.

#

TRMNL12

Designed at 12px pixel height. The smallest pixel font, used for descriptions, small labels, and metadata.

Regular 400

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

!@#$%^&*()-=+[]{}|;:',./<>?

Bold 700

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

!@#$%^&*()-=+[]{}|;:',./<>?

font-family: "TRMNL12" · font-size: 12px
Designer
Heavyweight Digital Type Foundry
#

TRMNL16

Designed at 16px pixel height. The workhorse font, used for labels, rich text body copy, and title-bar text.

Regular 400

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

!@#$%^&*()-=+[]{}|;:',./<>?

Bold 700

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

!@#$%^&*()-=+[]{}|;:',./<>?

font-family: "TRMNL16" · font-size: 16px
Designer
Heavyweight Digital Type Foundry
#

TRMNL21

Designed at 21px pixel height. The largest pixel font, used for titles, headings, and large rich-text.

Regular 400

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

!@#$%^&*()-=+[]{}|;:',./<>?

Bold 700

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

!@#$%^&*()-=+[]{}|;:',./<>?

font-family: "TRMNL21" · font-size: 21px
Designer
Heavyweight Digital Type Foundry
#

On-device preview

text--small · TRMNL text--base · TRMNL text--large · TRMNL text--base font--bold · TRMNL
TRMNL Logo TRMNL bundle
#

Component-by-component bundle map

Each component picks the appropriate font based on the active bundle. On high-density displays Inter Variable is used for every component regardless of bundle.

Component TRMNL (low-density) High-density
Title Bar TRMNL16 Inter Variable
Title TRMNL21 Inter Variable
Title (small) TRMNL16 Inter Variable
Label TRMNL16 Inter Variable
Label (small) TRMNL12 Inter Variable
Description TRMNL12 Inter Variable
Description (large) TRMNL16 Inter Variable
Value (xxsmall) TRMNL16 Inter Variable
Value (other sizes) Inter Variable Inter Variable
Rich Text TRMNL16 Inter Variable
Rich Text (small) TRMNL12 Inter Variable
Rich Text (large) TRMNL21 Inter Variable
Item Index TRMNL12 Inter Variable
#

High-density: Inter Variable

Used on high-density displays in both bundles for legibility.

Designer
Rasmus Andersson
License
SIL Open Font License v1.1