Install FontSwap
Quicksand
About Quicksand
- 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 →Quicksand is a display sans-serif typeface with rounded terminals, designed by Andrew Paglinawan. Originally created in 2008 and later expanded and refined, it offers a friendly, approachable aesthetic that works well for modern brands.
History and Design
Andrew Paglinawan designed Quicksand as a geometric sans-serif with rounded terminals that give it a soft, friendly character. The design balances geometric precision with warmth, featuring circular bowls, consistent stroke widths, and carefully rounded endpoints. In 2016, Thomas Jockin updated the family to improve quality and add more weights.
Why Quicksand is Popular
Quicksand has become a popular choice for brands seeking a friendly, approachable typeface. It serves as an excellent free alternative to premium rounded sans-serifs like Sofia Pro and Greycliff. Its playful yet professional character makes it versatile for startups, health brands, children's products, and creative agencies.
Technical Features
- Variable font: Weight axis from Light (300) to Bold (700)
- Rounded terminals: Soft, friendly character
- Geometric construction: Consistent, harmonious forms
- No italics: Uses oblique or weight changes for emphasis
- Extended Latin: Good coverage for European languages
Best Use Cases
Quicksand excels in:
- Startup branding: Modern, approachable identity
- Health and wellness: Friendly, positive aesthetic
- Children's products: Playful yet readable
- Mobile apps: Friendly interface typography
- Lifestyle brands: Casual, contemporary feel
Usage Tips
Use Quicksand for headlines and UI elements at weight 500-700. At body text sizes, use weight 400-500 for adequate readability. The lack of italics means emphasis should come from weight changes or color. Pairs well with geometric serif fonts or more serious sans-serifs for body copy. Avoid using for dense body text due to the decorative nature.
Is Quicksand on Google Fonts?
Yes, Quicksand is available for free on Google Fonts. Get Quicksand on Google Fonts ↗
Alternative For (4)
Quicksand is a free alternative to the following premium fonts:
Compare Quicksand
See how Quicksand compares to other fonts side by side.
Variable Font Axes
Quicksand 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 Quicksand based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Quicksand in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Quicksand.
@font-face {
font-family: 'Quicksand Fallback';
src: local('Arial');
ascent-override: 100%;
descent-override: 25%;
line-gap-override: 0%;
size-adjust: 97%;
}How to Use Quicksand
Copy these code snippets to quickly add Quicksand to your project.
CSS code for Quicksand
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@100..900&display=swap');HTML code for Quicksand
<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=Quicksand:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Quicksand
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'quicksand': ['Quicksand', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-quicksand">Your text here</p>Next.js code for Quicksand
// Using next/font (Next.js 13+)
import { Quicksand } from 'next/font/google';
const quicksand = Quicksand({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={quicksand.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Quicksand'" }}>Your text</p>Expo and React Native code for Quicksand
// Install: npx expo install @expo-google-fonts/quicksand expo-font
import { useFonts, Quicksand_400Regular } from '@expo-google-fonts/quicksand';
export default function App() {
const [fontsLoaded] = useFonts({
Quicksand_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Quicksand_400Regular' }}>
Your text here
</Text>
);
}