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 (100)
Inter is a free alternative to the following premium fonts:
Closest match in functional grotesque territory with exceptional screen rendering
Closest structural match with exceptional screen rendering and variable font support
Closest overall match with exceptional screen rendering, variable font support, and broader language coverage
Modern interpretation capturing the neutral essence with digital optimization
Closest functional match with better screen optimization and broader language support
Similar accessible design with broader ecosystem
Comparable grotesque structure with superior screen optimization
Closest overall match with comprehensive variable font support and similar screen-first optimization
Similar modern aesthetic with excellent screen optimization and extensive features
Modern humanist sans built for screens with an even larger weight range (100-900 variable). Inter matches Concourse's readability-first philosophy but was designed for UI, not documents — slightly tighter spacing
Screen-optimized variable sans with optical sizing and extensive language support
Clean grotesque that matches Favorit's structural proportions while losing the quirky details
Strong overall match for UI and product contexts with exceptional screen rendering
Closest overall match with excellent screen rendering and comprehensive variable font support
Closest overall match with screen-optimized proportions and comprehensive weight range
Modern grotesque with Inter Display variant optimized for large sizes
Closest structural match with better variable font support and screen optimization
Similar modern variable sans with broader language support
Screen-optimized variable sans with optical sizing and extensive language support
Similar humanist qualities optimized for screens
Closest modern match with screen-first optimization and comprehensive variable font support
Modern interpretation with excellent screen optimization
Closest structural match for UI and product work
Similar modern variable sans with broader language support
Excellent system font alternative with similar proportions
Excellent screen optimization with similar neutral character
Closest open-source match with variable font support and similar screen-optimized proportions
Strong UI grotesque with excellent screen optimization and broad language support
Closest overall match with exceptional screen rendering and variable font support
Closest overall match with exceptional screen rendering and full variable font support
Superior screen optimization and variable font support compensate for slight stylistic differences
Modern interpretation with excellent screen optimization and similar neutrality
Closest overall match with exceptional screen optimization and full variable font support
Modern UI sans-serif with exceptional screen rendering and variable font support
Screen-optimized variable sans with optical sizing and comprehensive language support
Modern neo-grotesque with similar clean proportions and versatility
Modern neo-grotesque with similar neutral character and extensive weight range
Modern sans-serif designed for screens with similar clarity and versatility
Modern sans-serif with similar clean proportions and professional character
Superior screen optimization trades GT Walsheim's warmth for functional precision
Screen-optimized precision that parallels Replica's rational approach with broader utility
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.
- Score
- 59 /100 Average
- File Size
- 525.2 KB Heavy
- Weights
- 9 (variable) + Italics
- Languages
- 7 groups CDN delivery
Font Metrics
- x-Height Ratio
- 0.546
- Cap Height Ratio
- 0.728
- Ascender
- 1984
- Descender
- -494
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>
);
}