Design | Code

Important note: The following content is a work in progress draft of guidance around how to use IBM Plex, IBM’s new corporate typeface. This typeface is open sourced. It can be used by IBM employees and by the public.

We welcome all feedback and improvements through our GitHub issues. All written copy and examples are subject to change. Anyone who uses the font files and code may experience breaking changes at this time.

The code of IBM’s new typeface, IBM Plex, and accompanying styles was built to shorten the bridge from design to implementation. Find installation instructions on the GitHub repo.

Characters

To ensure that correct characters load in HTML, add the meta tag for UTF-8.

A common example of why this is necessary is when correcting a straight single quote (') for an actual apostrophe (’).

<head> <meta charset="utf-8"> </head>

Files

Three font families (mono, sans, and serif) and three weights (light, regular, and semibold) are available for web use. We split all web font files into four unicode ranges. This performant improvement allows the user to only download the glyphs needed for the page they are experiencing.

Recommended

There are three font weights of IBM Plex Sans loaded by our type styles:

Light

Regular

SemiBold

<p class="ibm-type-light">Light</p> <p class="ibm-type">Regular</p> <p class="ibm-type-semibold">SemiBold</p>

Extra

Ten additional font weights are available to use sparingly. Keep in mind that each weight added to a web experience will increase load time:

Italic

Light Italic

Mono

Mono Italic

SemiBold Italic

Serif Light

Serif Light Italic

Serif Regular

Serif Regular Italic

Serif SemiBold

Serif SemiBold Italic

<!-- .ibm is not needed if using type scale classes --> <div class="ibm"> <p class="ibm-type-italic">Italic</p> <p class="ibm-type-light ibm-type-italic">Light Italic</p> <p class="ibm-type-mono">Mono</p> <p class="ibm-type-mono ibm-type-italic">Mono Italic</p> <p class="ibm-type-italic ibm-type-semibold">SemiBold Italic</p> <p class="ibm-type-serif ibm-type-light">Serif Light</p> <p class="ibm-type-serif ibm-type-light ibm-type-italic">Serif Light Italic</p> <p class="ibm-type-serif">Serif Regular</p> <p class="ibm-type-serif ibm-type-italic">Serif Regular Italic</p> <p class="ibm-type-serif ibm-type-semibold">Serif SemiBold</p> <p class="ibm-type-serif ibm-type-semibold ibm-type-italic">Serif SemiBold Italic</p> </div>

Sets

The type styles will apply font sizing, weight, line height, line length, character spacing, and bottom margin for you. Please add a negative left and top margin when the text starts away from container padding.

The type scale variations are fluid. This means that there are fixed sizes at the small, medium, and large breakpoints. However, the text sizes will increase and decrease between those screen width breakpoints for perfect sizing with the user’s device.

When applying a type style to the serif family, the size will always be 1px smaller than sans-serif and mono. This is due to an optical test revealing that the serif files appear larger than the other families.

Editorial

Type A

Type B

Type B Mono

Type C

Type C Serif

Type D

Type F

Type I

Type I Serif

Type J

Type K

<p class="ibm-type-a">Type A</p> <p class="ibm-type-b">Type B</p> <p class="ibm-type-b ibm-type-mono">Type B Mono</p> <p class="ibm-type-c">Type C</p> <p class="ibm-type-c ibm-type-serif">Type C Serif</p> <p class="ibm-type-d">Type D</p> <p class="ibm-type-f">Type F</p> <p class="ibm-type-i">Type I</p> <p class="ibm-type-i ibm-type-serif">Type I Serif</p> <p class="ibm-type-j">Type J</p> <p class="ibm-type-k">Type K</p>

Product

Type A

Type B

Type B Mono

Type C

Type D

Type E

Type G

Type H

<p class="ibm-type-a">Type A</p> <p class="ibm-type-b">Type B</p> <p class="ibm-type-b ibm-type-mono">Type B Mono</p> <p class="ibm-type-c">Type C</p> <p class="ibm-type-d">Type D</p> <p class="ibm-type-e">Type E</p> <p class="ibm-type-g">Type G</p> <p class="ibm-type-h">Type H</p>

Line Length

Max-widths are applied to the type sets to help maintain readable line lengths. Type set items A-E should maintain a character count ~75 (with the exception of Type E from 1056px to 1650px screen size). All larger type set items will maintain a line length of ~50 characters.

The sentence is now exactly fifty characters long. This end makes it at 75. Here is an extra sentence to prove line length is enforced.

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.