Install FontSwap
Vend Sans
About Vend 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 →Vend Sans is a bespoke variable sans-serif typeface designed by Baptiste Guesnon of Bloom Type for Vend, a point-of-sale software company originally part of the Schibsted Marketplaces group and now part of Lightspeed Commerce. The rebrand that introduced Vend Sans was led by Bold Scandinavia, reflecting the company's Nordic design heritage. The typeface is built around a graphic system of three alternative character shapes that reflect diversity within the Vend brand.
Design and Character
Vend Sans features clean, contemporary proportions optimized for digital commerce contexts. What makes it distinctive is its alternate character system — rather than a single set of letterforms, the typeface includes three alternate styles: one optimized for longer texts, one with rounded terminals for display use, and one for brand-specific applications. This system reflects the modern understanding that brand typography needs flexibility across diverse touchpoints.
Best For
- Commerce and POS interfaces
- SaaS product design
- Retail and merchant dashboards
- Brand systems requiring alternate characters
- Technology company branding
Technical Features
- Variable font: Continuous weight axis from Light (300) to Bold (700)
- Three alternate styles: Text, rounded display, and brand character variants
- True italics: Available in all weights
- Commerce-optimized: Designed for point-of-sale and merchant interface contexts
Usage Tips
Use Regular weight for body text in commerce interfaces and dashboards. Semi Bold works well for navigation and action buttons. Experiment with the alternate character styles for display and branding contexts. Pair with Source Serif Pro for editorial commerce content.
FAQ
What are the alternate character styles?
Vend Sans includes three alternate styles: one optimized for longer text (more conventional proportions), one with rounded details for display use, and one for brand-specific applications. These alternates enable visual variety while maintaining family consistency.
Can Vend Sans be used for branding?
Yes. The OFL license permits use in any context, including branding. The alternate character system makes it particularly versatile for brand applications. However, the typeface is associated with Vend/Lightspeed, so consider whether that association aligns with your brand.
Is Vend Sans on Google Fonts?
Yes, Vend Sans is available for free on Google Fonts. Get Vend Sans on Google Fonts ↗
Compare Vend Sans
See how Vend Sans compares to other fonts side by side.
Variable Font Axes
Vend Sans 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 Vend Sans based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Vend Sans in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Vend Sans.
@font-face {
font-family: 'Vend Sans Fallback';
src: local('Arial');
ascent-override: 109%;
descent-override: 39%;
line-gap-override: 0%;
size-adjust: 106.06%;
}How to Use Vend Sans
Copy these code snippets to quickly add Vend Sans to your project.
CSS code for Vend Sans
@import url('https://fonts.googleapis.com/css2?family=Vend+Sans:wght@100..900&display=swap');HTML code for Vend 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=Vend+Sans:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Vend Sans
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'vend-sans': ['"Vend Sans"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-vend-sans">Your text here</p>Next.js code for Vend Sans
// Using next/font (Next.js 13+)
import { Vend_Sans } from 'next/font/google';
const vend_sans = Vend_Sans({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={vend_sans.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Vend Sans"' }}>Your text</p>Expo and React Native code for Vend Sans
// Install: npx expo install @expo-google-fonts/vend-sans expo-font
import { useFonts, Vend_Sans_400Regular } from '@expo-google-fonts/vend-sans';
export default function App() {
const [fontsLoaded] = useFonts({
Vend_Sans_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Vend_Sans_400Regular' }}>
Your text here
</Text>
);
}