Install FontSwap
Mulish
About Mulish
- 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 →Mulish (formerly Muli) is a minimalist geometric sans-serif typeface designed by Vernon Adams. With its clean lines and wide character set, it provides a modern alternative to classic geometric fonts while offering excellent screen rendering and variable font technology.
History and Design
Vernon Adams originally designed Muli as a minimalist display font. The typeface was later renamed to Mulish when it was expanded to include Cyrillic support and updated with variable font capabilities. The redesign maintained the original's clean geometric character while improving its versatility for both display and text use.
Mulish features a tall x-height and open apertures, optimizing it for screen readability without sacrificing the geometric precision that defines its character.
Why Mulish Stands Out
Mulish combines the clean aesthetic of Century Gothic with modern technical features. Its variable font format allows precise weight control, making it adaptable to responsive design needs. The extended language support and comprehensive weight range make it practical for international projects requiring typographic flexibility.
Technical Features
- Variable font: Weight axis from 200 to 900
- 9 static weights: ExtraLight to Black with italics
- Cyrillic support: Full Russian and related alphabets
- Vietnamese: Extended Latin for Southeast Asian languages
- OpenType features: Stylistic alternates, fractions, and case-sensitive punctuation
Best Use Cases
Mulish excels in:
- Modern web design: Clean interface typography
- Multilingual websites: Latin, Cyrillic, and Vietnamese support
- Startup branding: Contemporary geometric aesthetic
- Document design: Professional presentations and reports
Usage Tips
The variable font version of Mulish enables fine-tuned weight adjustments—try 350 for slightly emphasized body text or 650 for subheadings that need extra presence. At large display sizes, the lighter weights (200-300) create elegant, sophisticated headlines. For body text, stick to 400-500 at 16px or larger. Mulish pairs well with more expressive display fonts or can serve as a complete typographic system on its own.
Is Mulish on Google Fonts?
Yes, Mulish is available for free on Google Fonts. Get Mulish on Google Fonts ↗
Alternative For (2)
Mulish is a free alternative to the following premium fonts:
Minimalist sans-serif with variable weight axis and geometric underpinnings
Compare Mulish
See how Mulish compares to other fonts side by side.
Variable Font Axes
Mulish is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 900 |
Font Pairings
Fonts that pair well with Mulish based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Mulish in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Mulish.
@font-face {
font-family: 'Mulish Fallback';
src: local('Arial');
ascent-override: 100.5%;
descent-override: 25%;
line-gap-override: 0%;
size-adjust: 96.42%;
}How to Use Mulish
Copy these code snippets to quickly add Mulish to your project.
CSS code for Mulish
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@100..900&display=swap');HTML code for Mulish
<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=Mulish:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Mulish
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'mulish': ['Mulish', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-mulish">Your text here</p>Next.js code for Mulish
// Using next/font (Next.js 13+)
import { Mulish } from 'next/font/google';
const mulish = Mulish({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={mulish.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Mulish'" }}>Your text</p>Expo and React Native code for Mulish
// Install: npx expo install @expo-google-fonts/mulish expo-font
import { useFonts, Mulish_400Regular } from '@expo-google-fonts/mulish';
export default function App() {
const [fontsLoaded] = useFonts({
Mulish_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Mulish_400Regular' }}>
Your text here
</Text>
);
}