# IBM Type

Design | Code

Typography relies on our grid system to create harmonious relationships, clear organizations, useful hierarchies, and purposeful alignments that guide people through our content, stories, environments or user interactions.

With our new corporate typeface, IBM Plex™, comes a new set of guidance and best practices. IBM typography is international and modern to reflect our brand and our design principles.

You can start with

Download
IBM Plex Family

Download
IBM Type Sketch File

Go to Code for guidance of IBM Type’s developer offerings.

## Typeface

IBM Plex™ is designed to express the relationship between man and machine, natural and engineered, timeless and distinct. It comes with a new set of guidance and best practices. IBM typography is international and modern to reflect our brand and design principles.

The IBM Plex family comes in sans, serif, and monospace versions to serve a variety of needs across all experiences.

IBM Plex Mono

IBM Plex Sans

IBM Plex Serif

## Scale

We consider what works for our corporate typeface, IBM Plex, and effectively deliver and organize the content for our users. These sizes are determined to have layout hierarchy and reading rhythm under typical usage conditions.

### All font sizes

We determined our type scales by a single equation.

rem

px

0.75

Plex 12

0.875

Plex 14

1

Plex 16

1.125

Plex 18

1.25

Plex 20

1.5

Plex 24

1.75

Plex 28

2

Plex 32

2.25

Plex 36

2.625

Plex 42

3

Plex 48

3.375

Plex 54

3.75

Plex 60

4.25

Plex 68

4.75

Plex 76

5.25

Plex 84

...

...

The formula for our scale was created to provide hierarchy for all types of experiences. The formula assumes y0 is 12px.

yn = yn-1 + ⌊(n-2) ÷ 4⌋ · 2

Note: When using IBM Plex Serif, you always subtract the expected font size by 1px.

## Style

Typography creates texture into our design. It guides viewers to read and understand the hierarchy of content. We need to manage what we are delivering through typographic treatment with controlled usage of type styles and weights.

### Weights

We suggest to use IBM Plex Light, Regular, SemiBold, and Italic for digital experiences. Note that IBM Plex Sans Bold, ExtraLight, Text, and Thin are not for digital experiences.

Oops!

Bold, Text, ExtraLight, and Thin are not supposed to be used in digital.

Here are the suggested weights for specific type scales:

Font Size (px)

12 — 28

32 —

Suggested weights

Regular

Light

### Line-height

Line heights have been determined based on type sizes, styles, and weights. We’ve built in line-height into our type scale.

Oops!

The line-height is too open.

### Line-length

We set up max-widths for text length based on the column width of IBM Grid, type scales and the limit of characters.

Note: According to The Elements of Typographc Style, 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size.

### Letter-spacing

Most of the time, we keep the type tracking 0. We put specific letter-spacing based on the type size. This setting is determined by the software and is different in these applications.

Suggested tracking (letter-spacing) based on the various of software usages:

Font Size (px)

12

14

16 — 84

92 — 132

144 — 168

Sketch

+1.0

+1.0

0

-0.05

-0.1

Font Size (px)

12

14

16 — 84

92 — 132

144 — 168

Adobe

xx

xx

16 — 84

xx

xx

Font Size (px)

12

14

16 — 84

92 — 132

144 — 168

rem

0.02

0.01

0

-0.04

-0.06

## Selected Type Sets

We have a wide range of type scales to choose and work from. However, in order to maintain and curate the IBM Type experience, we have type sets for specific usages and purpoes based on our type scale. We consider how our type works across various screen sizes.

### Type sets for context

We suggest to use controlled type sizes and styles for design layouts. In Editorial and Product, we provide ranges of type styles and sizes in order to deal with dense content to dynamic layout.

Note: There are four different breakpoints (sm, md, lg, and max).

|

Now viewing type at sm breakpoint.

Now viewing type at md breakpoint.

Now viewing type at lg breakpoint.

Now viewing type at max breakpoint.

Purpose

Specs

Small copy style is mainly for legal copy usage.

Type A

Regular

sm: 12px/16px (0.75rem/1rem)

max: 16px/22px (1rem/1.375rem)

Letter-spacing: +0.1 (Sketch)

.ibm-type-a

Main body copy style is for dense content or table body.

Type B

Regular

sm: 14px/20px (0.857rem/1.25rem)

max: 18px/24px (1.125rem/1.5rem)

Letter-spacing: +0.1 (Sketch)

.ibm-type-b

Body copy style alt is for main paragraph style, primary button, links, etc.

Type C

Regular

sm: 16px/22px (1rem/1.375rem)

max: 20px/26px (1.25rem/1.625rem)

.ibm-type-c

This heading style is for short section headline.

Type D

SemiBold

sm: 16px/22px (1rem/1.375rem)

max: 20px/26px (1.25rem/1.625rem)

.ibm-type-d

This heading is for section headline style or high level paragraph.

Type E

Regular

sm: 18px/24px (1.125rem/1.5rem)

md: 20px/26px (1.25rem/1.625rem)

max: 24px/30px (1.5rem/1.875rem)

.ibm-type-e

This style is for section heading style or high level paragraph.

Type F

Regular

sm: 20px/26px (1.25rem/1.625rem)

md: 24px/30px (1.5rem/1.875rem)

max: 32px/40px (2rem/2.5rem)

.ibm-type-f

This style is for section heading style.

Type G

Regular

sm: 24px/30px (1.5rem/1.875rem)

lg: 28px/36px (1.75rem/2.25rem)

max: 36px/44px (2.25rem/2.75rem)

.ibm-type-g

Heading style

Type H

Regular

sm: 28px/36px (1.75rem/2.25rem)

md: 32px/40px (2rem/2.5rem)

lg: 36px/44px (2.25rem/2.75rem)

max: 42px/50px (2.625rem/3.125rem)

.ibm-type-h

Heading style

Type I

Regular

sm: 28px/36px (1.75rem/2.25rem)

md: 36px/44px (2.25rem/2.75rem)

lg: 42px/50px (2.625rem/3.125rem)

max: 60px/70px (3.75rem/4.375rem)

.ibm-type-i

Display

Type J

Light

sm: 42px/50px (2.625rem/3.125rem)

md: 68px/78px (4.25rem/4.875rem)

lg: 156px/164px (9.75rem/10.25rem)

max: 168px/174px (10.5rem/10.875rem)

Letter-spacing: -0.1 (Sketch)

Note: This style is mainly for decorative layouts. It should always be short and considerable.

.ibm-type-j

Display

Type K

SemiBold

sm: 42px/50px (2.625rem/3.125rem)

md: 68px/78px (4.25rem/4.875rem)

lg: 156px/164px (9.75rem/10.25rem)

max: 168px/174px (10.5rem/10.875rem)

Letter-spacing: -0.1 (Sketch)

Note: This style is mainly for decorative layouts. It should always be short and considerable.

.ibm-type-K

## Alignment

Elements of good typography include consistency, hierarchy  and alignment. Flush left creates strong alignments for the eye to follow, aiding readability. It is our standard for text layout.

### Flush left

Oops!

Flush right is reserved for languages that read right to left.

Oops!

Justified copy can fit into IBM typography, but we recommend not using this approach as it is difficult to do well and requires strong typographic expertise.

### Bottom Margin

We set up bottom margin based on the type scales and weights. Use the increments of 2px (0.125rem) to define the bottom-margin for text pairings.

## Fluid Type

To create a better experience along with our fluid grid, fluid type is the way to go. We set up our fix type scales for the breakpoints and have them being fluid in between. This helps us to maintain the quality of typography.

Why do we like fluid type?

It potentially creates better rags when you scale up the screen. It also provides a better line-length for reading.

## Type Color

To maintain the quality and recognition of our work, we always consider how to use our color in design. Legibility and accessiblity are two keys. Keep our type color neutral when it shows in paragraphs. We never use pure black (#000) for text, instead, we use a range of grays.

We work hard to make our typography useful and beautiful. Give us feedback to make an improvement or just say hi.

Leave us a GitHub issue.

IBMers, join the Slack conversation.