Install FontSwap
Familjen Grotesk
About Familjen 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 →Familjen Grotesk is a variable neo-grotesque sans-serif typeface available on Google Fonts. Designed with Swedish typographic sensibility, the typeface combines the neutrality of classic grotesque designs with contemporary refinements for digital use. Its clean proportions and variable weight axis make it a versatile choice for interfaces, editorial design, and branding.
History and Design
Familjen Grotesk draws from the neo-grotesque tradition established by typefaces like Akzidenz-Grotesk and Helvetica, but approaches the style with a lighter, more contemporary touch. The design features open apertures that improve readability at small sizes, a moderate x-height for balanced proportions, and carefully tuned spacing for comfortable text setting. The name "Familjen" (Swedish for "the family") reflects its Swedish design origins.
Technical Features
- Variable font: Continuous weight axis from Regular (400) to Bold (700)
- True italics: Carefully drawn italic forms, not obliques
- Extended Latin: Latin, Latin Extended, and Vietnamese support
- Screen optimized: Clean rendering across modern browsers
- OpenType features: Standard ligatures and contextual alternates
Best Use Cases
Familjen Grotesk excels in:
- User interfaces: Clean, readable UI typography
- Editorial design: Professional, neutral text setting
- Branding: Contemporary identity systems
- Web applications: Efficient variable font loading
Usage Tips
Use the variable weight axis to fine-tune typographic hierarchy without loading multiple font files. Regular (400) works well for body text, while semibold (600) and bold (700) provide clear emphasis for headlines and UI elements. The true italics add distinction to references and emphasis without disrupting text flow. Pair with a serif like EB Garamond or Literata for editorial contrast.
Is Familjen Grotesk on Google Fonts?
Yes, Familjen Grotesk is available for free on Google Fonts. Get Familjen Grotesk on Google Fonts ↗
Alternative For (3)
Familjen Grotesk is a free alternative to the following premium fonts:
Variable neo-grotesque with contemporary refinements and Swedish design sensibility
Variable neo-grotesque with clean contemporary character
Variable neo-grotesque with contemporary refinements
Compare Familjen Grotesk
See how Familjen Grotesk compares to other fonts side by side.
Variable Font Axes
Familjen Grotesk is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 400 | 400 | 700 |
How to Use Familjen Grotesk
Copy these code snippets to quickly add Familjen Grotesk to your project.
CSS code for Familjen Grotesk
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@100..900&display=swap');HTML code for Familjen 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=Familjen+Grotesk:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Familjen Grotesk
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'familjen-grotesk': ['"Familjen Grotesk"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-familjen-grotesk">Your text here</p>Next.js code for Familjen Grotesk
// Using next/font (Next.js 13+)
import { Familjen_Grotesk } from 'next/font/google';
const familjen_grotesk = Familjen_Grotesk({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={familjen_grotesk.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Familjen Grotesk"' }}>Your text</p>Expo and React Native code for Familjen Grotesk
// Install: npx expo install @expo-google-fonts/familjen-grotesk expo-font
import { useFonts, Familjen_Grotesk_400Regular } from '@expo-google-fonts/familjen-grotesk';
export default function App() {
const [fontsLoaded] = useFonts({
Familjen_Grotesk_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Familjen_Grotesk_400Regular' }}>
Your text here
</Text>
);
}