Typography
Outfit is the font on kit UI. IBM Plex Mono is the font on code. Both ship as self-hosted Latin .woff2 files.
Every k- class gets Outfit. code, kbd, samp, and pre inside kit markup get Plex. The rest of your page keeps whatever font you already set. Importing the kit doesn’t rewrite a blog’s type.
Outfit is a variable face from 100 to 900. Plex ships three static weights: 400, 500, and 600. Utilities if you need the faces outside a component: font-k-sans and font-k-mono.
<p class="font-k-sans">Outfit</p><code class="font-k-mono">IBM Plex Mono</code>| Token | Family | Utility |
|---|---|---|
--k-font-sans |
Outfit | font-k-sans |
--k-font-mono |
IBM Plex Mono | font-k-mono |
Outfit
Section titled “Outfit”The pangram below is the same string at each size, regular weight (400).
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Weights
Section titled “Weights”Same size (text-xl), 100 through 900. Thin at the top, black at the bottom.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Size and weight together
Section titled “Size and weight together”A short stack of how UI type usually lands: small captions, body, and a heading.
Caption · text-xs / 500
Body · text-sm / 400. Most kit UI sits around this size.
Emphasis · text-base / 500
Title · text-xl / 600
Display · text-3xl / 700
IBM Plex Mono
Section titled “IBM Plex Mono”Used for code inside kit markup, and for anything you mark font-k-mono. Only 400, 500, and 600 ship.
tabs.options = labels
tabs.options = labels
tabs.options = labels
tabs.options = labels
0123456789 ABCDEF abcdef –k-primary
0123456789 ABCDEF abcdef –k-primary
0123456789 ABCDEF abcdef –k-primary
On kit chrome
Section titled “On kit chrome”The same faces on a field, buttons, a link, and a card.
We’ll never share it.
Deployment
Last run 4 minutes ago
Every check passed on the latest commit. The log is in dist/out.