Manrope is a semi-rounded sans-serif typeface. Mikhail Sharanda designed it in 2018. In 2019, Mirko Velimirovic worked with Sharanda to convert it into a variable font. Google Fonts added it soon after, and it quickly became a favorite for SaaS products and modern web interfaces.
Manrope sits between a strict geometric sans and a warmer humanist one. Its rounded terminals and slightly condensed letterforms give it a friendly, approachable feel without losing the crisp legibility that UI and product design demand.
Font Family & Weights
Manrope ships in 7 static weights, plus a single variable file covering the full 200-800 range:
- Manrope Extra Light
- Manrope Light
- Manrope Regular
- Manrope Medium
- Manrope Semi Bold
- Manrope Bold
- Manrope Extra Bold
How to Use Manrope on a Website
If you’re adding Manrope to a live site, pull it straight from Google Fonts instead of downloading files:
html
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet">
css
font-family: "Manrope", sans-serif;For design tools (Figma, Adobe XD, Photoshop), use the download button below for the full family as local files.
Font Pairing: What Works With Manrope
Manrope pairs naturally with Inter for body text, since both fonts share similar proportions and spacing rhythm. Designers also pair it with serif fonts like Lora or Source Serif for an editorial contrast. For a fully geometric pairing, try Manrope with Space Grotesk in headlines.
License
The SIL Open Font License v1.1 covers Manrope. You can use it free for personal and commercial projects, including websites, apps, and branded products, with no royalty payments required.
FAQ
Yes, the SIL Open Font License covers it, so you can use it commercially at no cost.
Inter leans more neutral and UI-focused. Manrope has slightly rounder terminals and more character, which makes it a popular heading partner for Inter’s plainer body text.
Yes, it covers Cyrillic, Greek, Latin, and Vietnamese.
Yes, a single file covers the full 200-800 weight range, so you can set any weight in CSS without loading separate files.