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.
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>
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.
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>
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>
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.
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>
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>
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.