Work Sans
About Work Sans
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- Variable (100-900)
- Features
- Variable, Italics
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.
Alternative For (2)
Work Sans is a free alternative to the following premium fonts:
Similar industrial character with modern design sensibilities
Similar American gothic character with modern proportions
How to Use Work Sans
Copy these code snippets to quickly add Work Sans to your project.
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100..900&display=swap');HTML Link Tags
<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 CSS
// 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>React / Next.js
// 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>