Search documentation...
K

Typography

Using text in your app

natmfat provides you with components to manage text. Pre-set configurations including font-size, weight, or leading (line height) are all calibrated to use natmfat in product. Selecting the appropriate type style is determined by layout or template structure.

Typeface: IBM Plex

natmfat uses the open-source typeface IBM Plex.

IBM Plex Sans

IBM Plex Mono

Sans-serif font stack

font-family: "IBM Plex Sans", sans-serif;

Mono font stack

font-family: "IBM Plex Mono", sans-serif;

Scale

The natmfat type scale is built on a single equation, based on IBM Carbon Typography. The formula for our scale was created to provide hierarchy for all types of experiences.
pxvariant
plex 12Small
plex 14Default
plex 16Subhead Default
plex 20Subhead Big
plex 24Header Default
plex 32Header Big

Style

Typography creates purposeful texture, guiding users to read and understand the hierarchy of information. The right typographic treatment and the controlled usage of type styles helps manage the display of content, keeping it useful, simple, and effective.

Weights

Font weight is an important typographic variable that can add emphasis and differentiate content hierarchy. Font weight and size pairings must be carefully balanced. A bold weight will always have more emphasis than a lighter weight font of the same size. However, a lighter weight font can rank hierarchically higher than a bold font if the lighter weight type size is significantly larger than the bold one. We suggest using IBM Plex Regular, Medium, and Semibold for digital experiences. The semibold weight is ideal for section headers, but should not be used for long text.

Semibold (600)

Medium (500)

Regular (400)

Italic

Each weight has an italic style, which should only be used when you need to emphasize certain words in a sentence (i.e., titles of works, technical terms, names of devices, and captions).

Semibold Italic (600)

Medium (500)

Regular (400)

Type color

Type color should be carefully considered, with legibility and accessibility as paramount concerns. Keep type color neutral in running text. Use primary blue for primary actions.
Neutral color for text
I'm a magenta sentence for no reason
Link
Core blue colors are used for text links and primary actions. You should probably use Anchor or Button instead.
Oops!
Something went wrong.
Other use cases for colored type are code snippets, warnings, alerts, etc.