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.
Alternative For (87)
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
Similar contemporary grotesque with excellent versatility
Clean proportions suitable for fashion and editorial
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
How to Use Inter
Copy these code snippets to quickly add Inter to your project.
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');HTML Link Tags
<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 CSS
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'inter': ['Inter', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-inter">Your text here</p>React / Next.js
// 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>