Install FontSwap
Stack Sans Text
About Stack Sans Text
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- Variable (100-900)
- Features
- Variable
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 →Stack Sans Text is a sans-serif typeface designed by Dylan Young at Koto (a global brand agency with studios in Berlin, London, LA, New York, and Sydney), created specifically for Stack Overflow, the world's largest developer Q&A platform. Part of the broader Stack Sans family (which includes Headline and Notch variants), the Text variant is optimized for body copy and sustained reading of the technical content that defines Stack Overflow's platform. It includes 520 glyphs with support for 286 languages, and features subtle notched detailing that connects it to the coding and building process central to Stack Overflow's identity.
Design and Character
Rooted in modernist sans-serif principles, Stack Sans Text features clean, functional letterforms with comfortable spacing and even text color for extended reading. The typeface was refined through the requirements of one of the internet's most text-heavy platforms, where millions of developers daily read dense technical Q&A answers for comprehension rather than scanning.
Best For
- Developer documentation and Q&A platforms
- Technical content interfaces
- Code-adjacent prose and articles
- Knowledge base and wiki systems
- Technology company branding
Technical Features
- Variable font: Continuous weight axis from Light (300) to Bold (700)
- Body text optimization: Tuned for sustained reading at 14-18px with comfortable spacing
- Developer-friendly glyphs: Clear differentiation between l/1/I and O/0
- Stack Sans family: Companion Headline and Notch variants available
Usage Tips
Use Regular weight for body text in Q&A and documentation contexts. Medium works well for subheadings and emphasis. Pair with a monospace font like JetBrains Mono or Source Code Pro for code blocks adjacent to prose.
FAQ
What is the difference between Stack Sans Text, Headline, and Notch?
Stack Sans Text is optimized for body copy and sustained reading. Stack Sans Headline is designed for display sizes with proportions suited for headlines and large text. Stack Sans Notch features distinctive notched detailing inspired by the building and coding process, giving it a more expressive character for branding and display use.
Who designed Stack Sans Text?
Stack Sans was designed by Dylan Young at Koto, a global brand agency with studios in Berlin, London, LA, New York, and Sydney. Koto created the Stack Sans family as part of Stack Overflow's brand identity refresh.
Is Stack Sans Text on Google Fonts?
Yes, Stack Sans Text is available for free on Google Fonts. Get Stack Sans Text on Google Fonts ↗
Compare Stack Sans Text
See how Stack Sans Text compares to other fonts side by side.
Variable Font Axes
Stack Sans Text is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 300 | 400 | 700 |
Font Pairings
Fonts that pair well with Stack Sans Text based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Stack Sans Text in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Stack Sans Text.
@font-face {
font-family: 'Stack Sans Text Fallback';
src: local('Arial');
ascent-override: 100%;
descent-override: 30%;
line-gap-override: 0%;
size-adjust: 107.99%;
}How to Use Stack Sans Text
Copy these code snippets to quickly add Stack Sans Text to your project.
CSS code for Stack Sans Text
@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Text:wght@100..900&display=swap');HTML code for Stack Sans Text
<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=Stack+Sans+Text:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Stack Sans Text
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'stack-sans-text': ['"Stack Sans Text"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-stack-sans-text">Your text here</p>Next.js code for Stack Sans Text
// Using next/font (Next.js 13+)
import { Stack_Sans_Text } from 'next/font/google';
const stack_sans_text = Stack_Sans_Text({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={stack_sans_text.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Stack Sans Text"' }}>Your text</p>Expo and React Native code for Stack Sans Text
// Install: npx expo install @expo-google-fonts/stack-sans-text expo-font
import { useFonts, Stack_Sans_Text_400Regular } from '@expo-google-fonts/stack-sans-text';
export default function App() {
const [fontsLoaded] = useFonts({
Stack_Sans_Text_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Stack_Sans_Text_400Regular' }}>
Your text here
</Text>
);
}