Install FontSwap
Zalando Sans
About Zalando 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 →Zalando Sans is a bespoke variable sans-serif typeface designed by Jakob Ekelund of KH Type (the type design arm of Kurppa Hosk studio, Stockholm) for Zalando, Europe's leading online fashion platform. The typeface was central to Zalando's 2024 brand identity refresh led by Kurppa Hosk, replacing Helvetica and Tiempos as the cornerstone of the brand system. It was developed in collaboration with Zalando's brand and product design teams in Berlin, ensuring it works across the platform's diverse touchpoints.
Design and Character
Rooted in the grotesque tradition, Zalando Sans balances clean simplicity with fashion-forward attitude. Where Helvetica (Zalando's previous typeface) is systematically neutral, Zalando Sans introduces subtle personality through proportional choices and curve quality that give it a fashion-forward edge without sacrificing commercial clarity. The typeface is available in multiple widths (Regular, Semi-Expanded, and Expanded), each with a full weight range from Extra Light to Black.
Best For
- Fashion and lifestyle branding
- E-commerce interfaces and product catalogs
- Consumer-facing digital products
- Marketing and campaign materials
- Bold display typography
Technical Features
- Variable font: Continuous weight axis from Extra Light (200) to Black (900)
- Multiple widths: Regular, Semi-Expanded, and Expanded variants available as separate families
- True italics: Available in all weights
- Fashion-forward proportions: Designed for contemporary fashion and lifestyle contexts
Usage Tips
Use Regular weight for body text and Semi Bold or Bold for navigation and CTAs. The Expanded variant works well for headlines and brand lockups. Pair with serifs like Lora or Source Serif Pro for editorial fashion content.
FAQ
Why did Zalando make their brand font public?
Zalando released Zalando Sans on Google Fonts to contribute to the design community and extend their brand's typographic influence. This follows a trend of technology and lifestyle companies making custom typefaces publicly available.
How does Zalando Sans compare to Helvetica?
Zalando Sans replaces Helvetica in Zalando's brand system with more personality and contemporary proportions. Where Helvetica is systematically neutral, Zalando Sans introduces subtle attitude through its grotesque construction and fashion-forward spacing.
Can Zalando Sans be used for branding?
Yes. The OFL license permits use in any context, including branding and logos. However, the typeface is visually associated with Zalando, so consider whether that association helps or hinders your brand identity.
Is Zalando Sans on Google Fonts?
Yes, Zalando Sans is available for free on Google Fonts. Get Zalando Sans on Google Fonts ↗
Compare Zalando Sans
See how Zalando Sans compares to other fonts side by side.
Variable Font Axes
Zalando Sans is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 900 |
Font Pairings
Fonts that pair well with Zalando Sans based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Zalando Sans in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Zalando Sans.
@font-face {
font-family: 'Zalando Sans Fallback';
src: local('Arial');
ascent-override: 96.4%;
descent-override: 25%;
line-gap-override: 0%;
size-adjust: 99.12%;
}How to Use Zalando Sans
Copy these code snippets to quickly add Zalando Sans to your project.
CSS code for Zalando Sans
@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans:wght@100..900&display=swap');HTML code for Zalando 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=Zalando+Sans:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Zalando Sans
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'zalando-sans': ['"Zalando Sans"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-zalando-sans">Your text here</p>Next.js code for Zalando Sans
// Using next/font (Next.js 13+)
import { Zalando_Sans } from 'next/font/google';
const zalando_sans = Zalando_Sans({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={zalando_sans.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Zalando Sans"' }}>Your text</p>Expo and React Native code for Zalando Sans
// Install: npx expo install @expo-google-fonts/zalando-sans expo-font
import { useFonts, Zalando_Sans_400Regular } from '@expo-google-fonts/zalando-sans';
export default function App() {
const [fontsLoaded] = useFonts({
Zalando_Sans_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Zalando_Sans_400Regular' }}>
Your text here
</Text>
);
}