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 (42)
Work Sans is a free alternative to the following premium fonts:
Mature editorial sans with comparable weight distribution and versatility
Mature editorial sans with comparable neutral tone and functional clarity
Similar editorial sans-serif character with American gothic warmth
Best overall match for editorial character with clean, functional proportions
Versatile editorial sans with restrained warmth and full weight coverage
Versatile sans with good display weights and balanced proportions
Mature editorial sans with American gothic warmth and comprehensive weight range
American gothic-influenced sans with similar neutral professionalism and a generous x-height. Wider proportions than Concourse, which makes it less space-efficient but equally readable
Industrial-functional variable sans with American gothic lineage
Similar editorial character with more conventional proportions and American gothic influence
Similar editorial character with industrial roots and comparable tightness
Similar American gothic character with modern proportions
Mature editorial sans with comparable clean aesthetic and workmanlike versatility
American gothic heritage with comparable editorial warmth and weight range
Similar editorial versatility and clean proportions with a slightly warmer tone
Industrial-functional variable sans with American gothic lineage
Industrial-functional grotesque with editorial range and variable font support
Mature editorial sans with comparable weight distribution
Mature editorial sans with comparable weight distribution and restrained character
Similar industrial character with modern design sensibilities
Mature editorial sans with comparable restraint and excellent weight distribution
American gothic functionality with variable font support and industrial character
Industrial-functional variable sans with American gothic lineage
Versatile grotesque with similar editorial and UI capabilities
Editorial-ready sans with humanist warmth that parallels GT Walsheim's approachable tone
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.
- Score
- 57 /100 Average
- File Size
- 227.9 KB Medium
- Weights
- 9 (variable) + Italics
- Languages
- 3 groups CDN delivery
Font Metrics
- x-Height Ratio
- 0.5
- Cap Height Ratio
- 0.66
- Ascender
- 930
- Descender
- -243
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>
);
}