Install FontSwap
Inter
About Inter
- 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 →Inter is a variable font family designed by Rasmus Andersson, specifically crafted for computer screens. Originally released in 2017 as Interface, it was later renamed and has become one of the most widely adopted free fonts for digital product design.
History and Design
Rasmus Andersson, a designer at Figma, created Inter to address the specific challenges of on-screen typography. The typeface features a tall x-height to improve readability at small sizes, carefully designed letter spacing, and OpenType features that enhance its utility in user interfaces. The design draws inspiration from Helvetica and other neo-grotesque typefaces while optimizing for digital environments.
Why Inter is Popular
Inter has been embraced by the design community for its exceptional screen rendering and comprehensive feature set. It serves as an excellent free alternative to system fonts like San Francisco and premium typefaces like Helvetica. Companies like GitHub, Mozilla, and numerous startups have adopted Inter for their products and branding.
Technical Features
- Variable font: Continuous weight axis from Thin (100) to Black (900)
- Optical sizing: Automatic adjustments for different sizes
- Extensive OpenType features: Tabular figures, contextual alternates, case-sensitive forms
- Superior language support: Latin, Cyrillic, Greek, and Vietnamese
- Display variant: Inter Display optimized for large sizes
Best Use Cases
Inter excels in:
- User interfaces: Designed specifically for UI elements and controls
- Web applications: Excellent rendering across browsers and devices
- Documentation: Highly readable for technical content
- Corporate branding: Clean, professional aesthetic
Usage Tips
For UI text, use weight 400 for body and 500-600 for emphasis. Enable OpenType features like tabular numbers for data-heavy interfaces. At display sizes (24px+), consider using Inter Display for optimal character shaping. Pair with monospace fonts like JetBrains Mono or Fira Code for developer-focused interfaces.
Is Inter on Google Fonts?
Yes, Inter is available for free on Google Fonts. Get Inter on Google Fonts ↗
Alternative For (93)
Inter is a free alternative to the following premium fonts:
Modern interpretation capturing the neutral essence with digital optimization
Similar modern aesthetic with excellent screen optimization and extensive features
Screen-optimized variable sans with optical sizing and extensive language support
Similar contemporary grotesque with excellent versatility
Modern grotesque with Inter Display variant optimized for large sizes
Clean proportions suitable for fashion and editorial
Screen-optimized variable sans with optical sizing and extensive language support
Similar humanist qualities optimized for screens
Nearly identical neutral grotesque with excellent screen optimization
Modern interpretation with excellent screen optimization
Excellent system font alternative with similar proportions
Excellent screen optimization with similar neutral character
Modern interpretation with excellent screen optimization and similar neutrality
Modern UI sans-serif with exceptional screen rendering and variable font support
Screen-optimized variable sans with optical sizing and comprehensive language support
Compare Inter
See how Inter compares to other fonts side by side.
Variable Font Axes
Inter is a variable font with 2 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
| opsz | 14 | 14 | 32 |
Font Pairings
Fonts that pair well with Inter based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Inter in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Inter.
@font-face {
font-family: 'Inter Fallback';
src: local('Arial');
ascent-override: 96.88%;
descent-override: 24.12%;
line-gap-override: 0%;
size-adjust: 105.27%;
}How to Use Inter
Copy these code snippets to quickly add Inter to your project.
CSS code for Inter
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');HTML code for Inter
<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=Inter:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Inter
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'inter': ['Inter', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-inter">Your text here</p>Next.js code for Inter
// Using next/font (Next.js 13+)
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={inter.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Inter'" }}>Your text</p>Expo and React Native code for Inter
// Install: npx expo install @expo-google-fonts/inter expo-font
import { useFonts, Inter_400Regular } from '@expo-google-fonts/inter';
export default function App() {
const [fontsLoaded] = useFonts({
Inter_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Inter_400Regular' }}>
Your text here
</Text>
);
}