Carbon Type Pairings
How much does a portfolio's voice change when only its typefaces do?
What you're looking at
Six ways to pair the IBM Plex typefaces that come with the Carbon Design System, and a test page set in real content from this site. Each pairing changes only the type: sizes, spacing and color stay exactly the same. Nothing outside the test page changes.
How to try it
- Pick a pairing. Each one lists the typeface and weight it uses for headings, body text and labels.
- Click Apply to test page. The test page below switches to that pairing, and the numbers show how much wider or narrower the type runs than the current site.
- Scroll through the test page. Watch where the headline breaks, how the stats read, and whether the 12px labels hold up.
- At the bottom, pick a line for my calling card. It's set in the applied pairing, ready to save or share from your phone.
Font pairings
The test page shows Editorial, the current site.
- Headline width vs. current site
- Same
- Body width vs. current site
- Same
- Characters per body line
- --
Case study / OpSec Security
Smart Tagging: Making an AI's Decisions Visible to the Analysts Who Check Them
Analysts protecting brands from counterfeiters were handed machine learning that tagged listings for them. The tags were often right, but nobody could see why, so analysts rechecked everything.
Up to 62%
Efficiency gain, Smart Tagging
180+
Data-grid column types addressed
2018-2021
Enterprise web platform
The problem
Analysts fought 180+ column data grids, horizontal scrolling and inconsistent interfaces, while customers lost trust over latency and the inability to see predictive patterns. When the machine learning arrived, it saved time only on paper, because every tag still had to be checked by hand.
The approach
- Show the evidence, ranked. Each signal and how much it pushed the decision, in plain language.
- Make overruling easy. One click, no justification required.
- Be honest about confidence. A middle band for "needs review" instead of forcing a yes or no.
"Usability is about people and how they understand and use things, not about technology."
Steve Krug
More work
Lab / Live coded
Live Cluster Browser: Watch an Algorithm Find a Counterfeit Ring
Voice Ops
The Science of Smarter Call-Center Training
Adaptive Biotechnologies
Understand, Explore, Bridge, Build, Refine: A Design Process for Scaling Teams
Type ramp
Send a calling card
Pick a line and it's set in the pairing on the test page, with my name and site. Save the card, or share it from your phone with someone who's hiring.
How the card was designed: Experiment 10, Calling Card.
The card is drawn in your browser and nothing is sent to this site. Share uses your phone's own share sheet.
Michael Clingerman, M.Sc.
Great solutions start with a process.
UX design and research leader
Hypothesis
Changing only the typefaces, with the same sizes, spacing and color, changes how a portfolio reads more than most layout changes would. A designer should be able to judge that on real content, side by side with the current site, before committing every page to it.
Why a test page
Fonts touch everything, so trying them on the live site is risky: a narrower or wider face moves every line break, and a headline that fit on a phone can overflow. Here the pairings are scoped to one framed test page. Apply changes that frame and nothing else, so the rest of the site can't break while you compare.
The pairings
Carbon ships one superfamily, IBM Plex, with sans, serif and mono stacks, and suggests Light, Regular and SemiBold for digital work. SemiBold suits section headers but not long text. Carbon also splits its type into two sets: a productive set for products, with a 14px base and fixed headings, and an expressive set for editorial pages, with a 16px base and headings that grow with the screen.
- Editorial is this site today: Plex Serif gives the headlines a voice, while Plex Sans and Plex Mono keep the rest clear.
- Carbon productive is the all-sans look of IBM's own software.
- Carbon expressive uses Plex Sans Light for big headlines, the way Carbon's marketing pages do.
- Condensed trades some warmth for more words per headline line.
- Long read sets the body in Plex Serif for long case studies.
- Technical leans on Plex Mono for a spec-sheet feel.
What to look for
- Headline breaks. The width number tells you how much shorter or longer each headline line runs than today.
- Numbers. Stats like "Up to 62%" carry a lot of the story, and some faces set figures better than others.
- Small labels. Labels sit at Carbon's 12px minimum, where weight and letter spacing matter most.
- Line length. Body text is most comfortable at roughly 45 to 75 characters per line.
How it works
The test page reads its fonts from CSS custom properties set on its own frame, so Apply swaps three families and their weights in one step without touching the site's own type tokens. The width numbers come from measuring the same text in each pairing with the browser's canvas. The calling card is drawn on a canvas too, then saved as a PNG or handed to your phone's share sheet. There is no server involved.