Install FontSwap
Hanken Grotesk
About Hanken Grotesk
- 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 →Hanken Grotesk is a geometric sans by Alfredo Marco Pradil of Hanken Design Co., published through Google Fonts under the SIL Open Font License. The current release is a variable font with a full 100–900 weight axis and matching italics.
Design
Despite the name, Hanken Grotesk sits closer to the geometric tradition than the grotesque one. The round letters are near-circular, the terminals are cut horizontally, and the overall rhythm is even and open — the same territory as Poppins or Brandon Grotesque rather than Helvetica.
What separates it from the crowded geometric-sans field is the weight range. Nine weights on a continuous axis is more than most free geometrics offer, and the extremes are usable: the 100 holds together at large sizes where many Thin cuts disintegrate, and the 900 has enough weight to anchor a headline without becoming a slab.
Technical features
- Variable weight axis,
wght100–900, with true italics across the range - Nine named instances from Thin to Black
- Script coverage: Latin, Latin Extended, Cyrillic Extended and Vietnamese
- Geometric construction with horizontal terminals and near-circular bowls
Best use cases
- Branding and marketing sites: the weight range supports strong hierarchy from one family
- Presentations: the heavier cuts read well at deck sizes
- Product UI: 400 and 500 are clean at interface sizes
- Editorial headlines: where a geometric feel is wanted without licensing a commercial face
Where it struggles
Geometric sans-serifs are a poor choice for long-form body text, and Hanken Grotesk is no exception — the near-circular bowls and even rhythm that make it attractive in headlines become monotonous over several paragraphs. Its lowercase l is also a plain vertical stroke, so l/I/1 disambiguation is weak; avoid it for interfaces displaying codes, serial numbers or credentials. For those, Public Sans or Inter are better choices.
Is Hanken Grotesk on Google Fonts?
Yes, Hanken Grotesk is available for free on Google Fonts. Get Hanken Grotesk on Google Fonts ↗
Alternative For (2)
Hanken Grotesk is a free alternative to the following premium fonts:
Geometric sans with a full 100-900 variable weight axis.
Near-circular geometric bowls with a wider weight range than most free geometrics.
Compare Hanken Grotesk
See how Hanken Grotesk compares to other fonts side by side.
Variable Font Axes
Hanken Grotesk is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
How to Use Hanken Grotesk
Copy these code snippets to quickly add Hanken Grotesk to your project.
CSS code for Hanken Grotesk
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@100..900&display=swap');HTML code for Hanken Grotesk
<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=Hanken+Grotesk:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Hanken Grotesk
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'hanken-grotesk': ['"Hanken Grotesk"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-hanken-grotesk">Your text here</p>Next.js code for Hanken Grotesk
// Using next/font (Next.js 13+)
import { Hanken_Grotesk } from 'next/font/google';
const hanken_grotesk = Hanken_Grotesk({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={hanken_grotesk.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Hanken Grotesk"' }}>Your text</p>Expo and React Native code for Hanken Grotesk
// Install: npx expo install @expo-google-fonts/hanken-grotesk expo-font
import { useFonts, Hanken_Grotesk_400Regular } from '@expo-google-fonts/hanken-grotesk';
export default function App() {
const [fontsLoaded] = useFonts({
Hanken_Grotesk_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Hanken_Grotesk_400Regular' }}>
Your text here
</Text>
);
}