Raleway

Raleway font preview
Replaces: Brandon Grotesque (82%) | OFL-1.1 | Updated: Jan 2026

About Raleway

Classification
sans-serif
Weights
Variable (100-900)
Features
Variable, Italics
SIL Open Font License 1.1
Free to use, modify, and distribute. Can be used commercially without attribution.
Get Raleway Free ↗

Raleway is an elegant geometric sans-serif typeface designed by Matt McInerney, Pablo Impallari, and Rodrigo Fuenzalida. Originally a single thin weight, it has grown into a comprehensive family known for its distinctive character and sophisticated appearance.

History and Design

Matt McInerney designed Raleway as a single thin display font in 2010 for The League of Moveable Type. Its elegant, distinctive style quickly gained popularity, leading Pablo Impallari and Rodrigo Fuenzalida to expand it into a full family with nine weights and matching italics. The 2012 expansion maintained the original's character while making it practical for a wider range of uses.

Raleway's most distinctive feature is its unique letterforms, particularly the characteristic 'W' with its crossed center strokes, which give it immediate recognizability.

Why Raleway is Popular

Raleway occupies a unique space between geometric precision and elegant display character. Its thin weights have become synonymous with modern, minimal design, while heavier weights offer strong impact for headlines. The font communicates sophistication and creativity, making it popular with designers, agencies, and creative brands.

Technical Features

  • Variable font: Complete weight axis from Thin to Black
  • 9 weights: 100-900 with matching italics
  • Extended language support: Latin, Cyrillic, and Vietnamese
  • Distinctive characters: Unique W, M, and numeral designs
  • OpenType features: Stylistic alternates, old-style figures, and contextual alternates

Best Use Cases

Raleway excels in:

  • Creative branding: Distinctive logos and visual identity
  • Editorial design: Elegant magazine and blog typography
  • Portfolio websites: Sophisticated designer aesthetic
  • Fashion and beauty: Refined, stylish applications

Usage Tips

Raleway's thin weights (100-300) create stunning headlines when set large, but they can become difficult to read at small sizes. For body text, use weights 400-500 and consider slightly increased line height for improved readability. The distinctive 'W' and other unique letterforms can be a feature or a distraction depending on context—consider the overall design before committing to Raleway for body text. Pair with neutral serifs like Source Serif Pro to balance its distinctive character.

Alternative For (4)

Raleway is a free alternative to the following premium fonts:

[HVD Fonts] · sans-serif

Comparable elegance with slightly more refined letterforms

View all alternatives →
#2 Gotham 80%
[Hoefler&Co] · sans-serif

Shares geometric foundations with elegant thin weights for display use

View all alternatives →
[Monotype] · sans-serif

Elegant design with comparable letter shapes in lighter weights

View all alternatives →
[ITC] · display

Elegant geometric sans with similar sophisticated proportions

View all alternatives →

How to Use Raleway

Copy these code snippets to quickly add Raleway to your project.

CSS Import

@import url('https://fonts.googleapis.com/css2?family=Raleway: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=Raleway:wght@100..900&display=swap" rel="stylesheet">

Tailwind CSS

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'raleway': ['Raleway', 'sans-serif'],
      },
    },
  },
}

// Usage in HTML:
// <p class="font-raleway">Your text here</p>

React / Next.js

// Using next/font (Next.js 13+)
import { Raleway } from 'next/font/google';

const raleway = Raleway({
  subsets: ['latin'],
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});

export default function Component() {
  return (
    <p className={raleway.className}>
      Your text here
    </p>
  );
}

// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Raleway'" }}>Your text</p>