Install FontSwap
Work Sans
About Work Sans
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- Variable (100-900)
- Features
- Variable, 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 →Work Sans is a typeface designed by Wei Huang and released in 2015. Inspired by early American gothic typefaces, it offers a contemporary interpretation of industrial sans-serif design optimized for on-screen use.
History and Design
Wei Huang designed Work Sans as an open-source project, drawing inspiration from the American grotesque tradition exemplified by typefaces like Trade Gothic and Franklin Gothic. The design balances the utilitarian character of industrial gothics with modern refinements for digital environments.
Work Sans features slightly condensed proportions and a large x-height, making it efficient in space while maintaining excellent readability. The lighter weights are designed more for display use, while medium weights work well for body text.
Why Work Sans is Valued
Work Sans has found favor with designers seeking the American gothic aesthetic in a contemporary, variable font format. Its industrial character suits technology companies, startups, and publications looking for a no-nonsense typographic voice.
The typeface's variable font implementation allows for precise weight selection, particularly useful for responsive design where different weights may be optimal at different viewport sizes.
Technical Features
- Variable font: Weight axis from Thin (100) to Black (900)
- Display optimization: Lighter weights designed for large sizes
- Generous x-height: Excellent readability at text sizes
- Extended Latin: Covers Western European and Vietnamese
Best Use Cases
Work Sans excels in:
- Technology and startups: Modern industrial aesthetic
- Headings and display: Strong character in larger sizes
- User interfaces: Efficient and readable
- Editorial design: Contemporary take on journalistic typography
Usage Tips
For body text, use weights 400-500 for optimal readability. Lighter weights (100-300) are best reserved for display sizes 24px and above. The variable font format makes Work Sans ideal for fluid typography in responsive designs. Pairs well with geometric sans-serifs or traditional serifs depending on the desired contrast.
Is Work Sans on Google Fonts?
Yes, Work Sans is available for free on Google Fonts. Get Work Sans on Google Fonts ↗
Alternative For (34)
Work Sans is a free alternative to the following premium fonts:
Similar friendly geometric character with good weight range
Industrial-functional variable sans with American gothic lineage
Similar American gothic character with modern proportions
Industrial-functional variable sans with American gothic lineage
Similar industrial character with modern design sensibilities
American gothic functionality with variable font support and industrial character
Industrial-functional variable sans with American gothic lineage
Compare Work Sans
See how Work Sans compares to other fonts side by side.
Variable Font Axes
Work Sans is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
Font Pairings
Fonts that pair well with Work Sans based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Work Sans in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Work Sans.
@font-face {
font-family: 'Work Sans Fallback';
src: local('Arial');
ascent-override: 93%;
descent-override: 24.3%;
line-gap-override: 0%;
size-adjust: 96.42%;
}How to Use Work Sans
Copy these code snippets to quickly add Work Sans to your project.
CSS code for Work Sans
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100..900&display=swap');HTML code for Work 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=Work+Sans:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Work Sans
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'work-sans': ['"Work Sans"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-work-sans">Your text here</p>Next.js code for Work Sans
// Using next/font (Next.js 13+)
import { Work_Sans } from 'next/font/google';
const work_sans = Work_Sans({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={work_sans.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Work Sans"' }}>Your text</p>Expo and React Native code for Work Sans
// Install: npx expo install @expo-google-fonts/work-sans expo-font
import { useFonts, Work_Sans_400Regular } from '@expo-google-fonts/work-sans';
export default function App() {
const [fontsLoaded] = useFonts({
Work_Sans_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Work_Sans_400Regular' }}>
Your text here
</Text>
);
}