Skip to main contentIBM Developer Experience Guide

Typography

The IBM Plex® Mono Light typeface is the primary typeface used within the IBM Developer brand system. It’s the visual “voice” of IBM Developer.

Typefaces

Expressive typeface

The IBM Developer brand uses IBM Plex Mono Light as our primary typeface because it’s familiar to developers—being the style used in coding environments. It plays a major role in both the verbal and visual style of the Developer system, delivering the most expressive moments, such as headlines, supergraphics, code or data points and the like.

IBM Plex Mono Light
IBM Plex Mono Light Italic

Productive typeface

IBM Plex Sans is used alongside Mono for harder-working, informative and supportive text. Please keep in mind that IBM continues to roll out IBM Plex in many international languages. Where possible, please use the local language if available. If not, English is the primary IBM language.

IBM Plex Sans Regular
IBM Plex Sans Regular Italic
IBM Plex Sans Bold
IBM Plex Sans Bold Italic

Type scales

The IBM type scale includes a carefully considered hierarchy for all types of experiences. Consistent use of the prescribed type scale helps create smooth user interactions across multiple formats. Learn more about IBM Design Language type scales here.

Glyphs

Typography plays a significant role in the IBM Developer brand system. We use punctuation marks, math symbols and arrows in our expression because they are specific to the language of code and help us to deliver our messaging in a distinct way. It’s not recommended to use these glyphs to build pseudo-coded messaging, for example, preceding a headline with “<div>” or “<span>”.

< > ( ) [ ] { } | /
* # = + – , ; : @ !
↰ ↱ ↲ ↳ → ↓ ↑ ←
⇆ ⇄ ↔ ↕
< > ( ) [ ] { }
| / * # = + – ,
; : @ ! ↰ ↱ ↲ ↳
→ ↓ ↑ ← ⇆ ⇄ ↔ ↕

Undertyping

Given the typographic nature of our visual identity, our approach to animation mimics and reinforces the act of coding. We call this technique undertyping. Working left to right, characters appear as if being typed, with colored glyphs appearing just ahead of letterforms.

B*    S+
Bu#   Sm/
Bui:  Sma{
Buil) Smar=
Build Smart.
Build Secure
B*
Bu#
Bui:
Buil)
Build
Build
S+
Sm/
Sma{
Smar=
Smart.
Secure

Type and the 2x Grid

Every IBM experience, be it digital or physical, is built upon a specific underlaying grid approach we call 2x. It’s designed to bind experiences together. The 2x Grid is based on equal units being evenly added or subtracted from any experience as needed.

Event poster grid wireframe and finished layout

Type and the color block

How we compose and construct experiences with our IBM Developer brand elements is as important as the elements themselves. The exact ways in which type, color, imagery, messaging, materials and interactions come together is an expression in itself.

IBM Plex Mono Light allows for playful typographic expressions, but in a coherent and considered manner. They give form to the content they are conveying. Here it’s combined with our color block system.

Poster grid wireframe and finished color layout