Install FontSwap
IBM Plex Sans
About IBM Plex Sans
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- 100, 200, 300, 400, 500, 600, 700
- Features
- Italics
Free to use, modify, and distribute. Can be used commercially without attribution.
What's allowed?
- ✓ Client work
- ✓ SaaS / Web apps
- ✓ YouTube / Video
- ✓ Sell products
- ✓ Print materials
Note: Derivative fonts must use the same license.
Full license guide →IBM Plex Sans is the sans-serif member of IBM's open-source Plex type family, designed by Mike Abbink at IBM in collaboration with Bold Monday. Released in 2017, it serves as IBM's corporate typeface and is freely available for public use.
Design Characteristics
IBM Plex Sans combines neutrality with distinctive character. The design features a rational, grid-based structure with subtle humanist touches. Notable characteristics include the distinctive lowercase 'a' and 'g' letterforms and carefully considered spacing for optimal readability.
Technical Features
- Complete weight range: Seven weights from Thin to Bold
- True italics: Cursive-influenced italic designs
- Multi-script support: Latin, Cyrillic, Greek, and more
- Part of a superfamily: Pairs with Plex Mono and Plex Serif
Best Use Cases
IBM Plex Sans excels in:
- Enterprise software: Professional UI typography
- Technical documentation: Clear, readable content
- Corporate branding: Neutral yet distinctive identity
- Code-adjacent content: Pairs perfectly with IBM Plex Mono
Is IBM Plex Sans on Google Fonts?
Yes, IBM Plex Sans is available for free on Google Fonts. Get IBM Plex Sans on Google Fonts ↗
Alternative For (4)
IBM Plex Sans is a free alternative to the following premium fonts:
Rational, grid-based structure with professional neutrality
Engineered for UI clarity with strong glyph differentiation and corporate tone
Engineered for UI clarity with strong corporate identity and glyph differentiation
Compare IBM Plex Sans
See how IBM Plex Sans compares to other fonts side by side.
Font Pairings
Fonts that pair well with IBM Plex Sans based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating IBM Plex Sans in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading IBM Plex Sans.
@font-face {
font-family: 'IBM Plex Sans Fallback';
src: local('Arial');
ascent-override: 102.5%;
descent-override: 27.5%;
line-gap-override: 0%;
size-adjust: 99.51%;
}How to Use IBM Plex Sans
Copy these code snippets to quickly add IBM Plex Sans to your project.
CSS code for IBM Plex Sans
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');HTML code for IBM Plex Sans
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">Tailwind code for IBM Plex Sans
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'ibm-plex-sans': ['"IBM Plex Sans"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-ibm-plex-sans">Your text here</p>Next.js code for IBM Plex Sans
// Using next/font (Next.js 13+)
import { IBM_Plex_Sans } from 'next/font/google';
const ibm_plex_sans = IBM_Plex_Sans({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700'],
});
export default function Component() {
return (
<p className={ibm_plex_sans.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"IBM Plex Sans"' }}>Your text</p>Expo and React Native code for IBM Plex Sans
// Install: npx expo install @expo-google-fonts/ibm-plex-sans expo-font
import { useFonts, IBM_Plex_Sans_400Regular } from '@expo-google-fonts/ibm-plex-sans';
export default function App() {
const [fontsLoaded] = useFonts({
IBM_Plex_Sans_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'IBM_Plex_Sans_400Regular' }}>
Your text here
</Text>
);
}