Install FontSwap
Saira
About Saira
- 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 →Saira is a sans-serif typeface designed by Héctor Gatti at Omnibus-Type and released through Google Fonts. The family includes multiple widths from condensed to expanded, making it exceptionally versatile for industrial, technical, and contemporary design applications where DIN-style aesthetics are desired.
History and Design
Héctor Gatti designed Saira as a comprehensive family addressing the need for a free industrial sans-serif with multiple width variations. The typeface draws inspiration from mid-20th-century industrial lettering and signage, featuring consistent stroke widths, geometric foundations, and excellent legibility at all sizes.
Saira's notable feature is its width variations, including Saira Extra Condensed, Saira Condensed, and Saira Semi Condensed, alongside the standard width. This makes it particularly useful for situations requiring space efficiency, similar to DIN's traditional applications.
Why Saira is Popular
Saira fills an important gap in free typography as a comprehensive industrial sans-serif with condensed widths. Its clean geometric forms and technical aesthetic make it popular for automotive, racing, technology, and industrial applications. The variable font version adds modern flexibility for responsive design.
Technical Features
- Variable font: Continuous weight and width axes for precise control
- Multiple widths: Extra Condensed, Condensed, Semi Condensed, and Regular
- Complete italic family: All weights and widths include italics
- OpenType features: Tabular figures, case-sensitive forms
Best Use Cases
Saira excels in:
- Automotive industry: Racing and performance vehicle branding
- Technical documentation: Clear, efficient text in manuals
- Signage: Condensed widths ideal for space-limited applications
- Industrial branding: Projects precision and engineering focus
Usage Tips
For narrow spaces, use Saira Condensed or Extra Condensed variants. The condensed widths work especially well for data tables and technical specifications where space is premium. Pair with neutral body fonts for contrast in complex layouts.
Is Saira on Google Fonts?
Yes, Saira is available for free on Google Fonts. Get Saira on Google Fonts ↗
Alternative For (3)
Saira is a free alternative to the following premium fonts:
Squared geometric forms suitable for tech applications
Compare Saira
See how Saira compares to other fonts side by side.
Variable Font Axes
Saira is a variable font with 2 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 900 |
| wdth | 50 | 100 | 125 |
Font Pairings
Fonts that pair well with Saira based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Saira in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Saira.
@font-face {
font-family: 'Saira Fallback';
src: local('Arial');
ascent-override: 113.5%;
descent-override: 43.9%;
line-gap-override: 0%;
size-adjust: 98.35%;
}How to Use Saira
Copy these code snippets to quickly add Saira to your project.
CSS code for Saira
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@100..900&display=swap');HTML code for Saira
<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=Saira:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Saira
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'saira': ['Saira', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-saira">Your text here</p>Next.js code for Saira
// Using next/font (Next.js 13+)
import { Saira } from 'next/font/google';
const saira = Saira({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={saira.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Saira'" }}>Your text</p>Expo and React Native code for Saira
// Install: npx expo install @expo-google-fonts/saira expo-font
import { useFonts, Saira_400Regular } from '@expo-google-fonts/saira';
export default function App() {
const [fontsLoaded] = useFonts({
Saira_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Saira_400Regular' }}>
Your text here
</Text>
);
}