Install FontSwap
Barlow
About Barlow
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- Features
- 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 →Barlow is a grotesk sans-serif typeface designed by Jeremy Tribby and released in 2017. Inspired by the visual style of California's public infrastructure and signage, it captures the utilitarian beauty of highway signs and industrial design.
History and Design
Jeremy Tribby designed Barlow as a tribute to the visual language of California—specifically the signage of the state's highway system and the functional aesthetics of its infrastructure. The typeface takes its name from Barlow Road, part of the original Oregon Trail.
Barlow's design features condensed proportions, a slightly high waist, and the squared-off curves typical of signage typefaces. The family includes regular, semi-condensed, and condensed widths, making it exceptionally versatile for space-constrained applications.
Why Barlow Works
Barlow succeeds because it combines the efficiency of a condensed gothic with warmth and personality. Unlike purely mechanical grotesques, Barlow has subtle humanist touches that prevent it from feeling cold. Its California-inspired design gives it an optimistic, forward-looking character.
The typeface has been adopted by technology companies, transportation systems, and brands seeking an industrial aesthetic without sacrificing approachability.
Technical Features
- Multiple widths: Regular, Semi-Condensed, and Condensed variants
- Complete weight range: Thin (100) through Black (900)
- Full italic family: All weights available in italic
- Extended Latin support: Western European and Vietnamese
Best Use Cases
Barlow excels in:
- Wayfinding and signage: Designed with signage DNA
- Data visualization: Condensed widths save space in charts and tables
- Technology products: Modern industrial aesthetic
- Packaging: Efficient use of limited label space
Usage Tips
Use Barlow Condensed when space is at a premium—it maintains readability while fitting more content. For body text, the regular width at weight 400-500 provides comfortable reading. Barlow pairs well with geometric serifs or other sans-serifs with contrasting proportions. Consider using different widths for hierarchy: condensed for navigation, regular for content.
Is Barlow on Google Fonts?
Yes, Barlow is available for free on Google Fonts. Get Barlow on Google Fonts ↗
Alternative For (22)
Barlow is a free alternative to the following premium fonts:
Contemporary grotesque with strong proportions and industrial character
Slightly condensed grotesque with utilitarian character that echoes Calibre's space efficiency
Industrial grotesque with condensed variants — different DNA but practical overlap
Slightly condensed grotesque with utilitarian character and comprehensive weight range
Slightly condensed grotesque with utilitarian character and comprehensive weight range
Versatile sans-serif family with condensed variant matching Knockout's narrower widths
Industrial grotesque with clean proportions and condensed/standard width variants
Condensed sans with industrial feel and multiple widths
Utilitarian grotesque with slightly condensed proportions and California-influenced design
Closest structural match with similarly rational, grid-influenced construction and comprehensive weights
Best overall match with similar geometric structure and multiple width variants
Condensed proportions with comparable utilitarian aesthetic
DIN-adjacent signage aesthetic with California infrastructure DNA
DIN-adjacent signage aesthetic with California infrastructure DNA and variable support
Grotesk family with condensed widths offering comparable editorial utility
Versatile grotesk with condensed variants and comparable editorial utility
Grotesk family with condensed variants offering comparable space efficiency
Compare Barlow
See how Barlow compares to other fonts side by side.
Font Pairings
Fonts that pair well with Barlow based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Barlow in production.
- Score
- 63 /100 Good
- File Size
- 133.8 KB Light
- Weights
- 9 static + Italics
- Languages
- 3 groups CDN delivery
Font Metrics
- x-Height Ratio
- 0.506
- Cap Height Ratio
- 0.7
- Ascender
- 1000
- Descender
- -200
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Barlow.
@font-face {
font-family: 'Barlow Fallback';
src: local('Arial');
ascent-override: 100%;
descent-override: 20%;
line-gap-override: 0%;
size-adjust: 97.58%;
}How to Use Barlow
Copy these code snippets to quickly add Barlow to your project.
CSS code for Barlow
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500;600;700;800;900&display=swap');HTML code for Barlow
<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=Barlow:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">Tailwind code for Barlow
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'barlow': ['Barlow', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-barlow">Your text here</p>Next.js code for Barlow
// Using next/font (Next.js 13+)
import { Barlow } from 'next/font/google';
const barlow = Barlow({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={barlow.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Barlow'" }}>Your text</p>Expo and React Native code for Barlow
// Install: npx expo install @expo-google-fonts/barlow expo-font
import { useFonts, Barlow_400Regular } from '@expo-google-fonts/barlow';
export default function App() {
const [fontsLoaded] = useFonts({
Barlow_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Barlow_400Regular' }}>
Your text here
</Text>
);
}