Quicksand

Quicksand font preview
Replaces: Greycliff (82%) | OFL-1.1 | Updated: Jan 2026

About Quicksand

Classification
sans-serif
Weights
Variable (100-900)
Features
Variable
SIL Open Font License 1.1

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 →
Get Quicksand Free ↗

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.

Alternative For (3)

Quicksand is a free alternative to the following premium fonts:

#1 Agrandir 78%
[Pangram Pangram] · sans-serif

Similar rounded geometric character

View all alternatives →
#2 Greycliff 82%
[Connary Fagen] · sans-serif

Comparable friendly roundness

View all alternatives →
#3 Proxima Soft 82%
[Mark Simonson Studio] · sans-serif

Comparable friendly roundness

View all alternatives →

How to Use Quicksand

Copy these code snippets to quickly add Quicksand to your project.

CSS Import

@import url('https://fonts.googleapis.com/css2?family=Quicksand: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=Quicksand:wght@100..900&display=swap" rel="stylesheet">

Tailwind CSS

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'quicksand': ['Quicksand', 'sans-serif'],
      },
    },
  },
}

// Usage in HTML:
// <p class="font-quicksand">Your text here</p>

React / Next.js

// 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>