Skip to content

Glide

Variable font family crafted for UI.

Free under the SIL Open Font License. Variable 100–950, roman, italic, and mono.

Download

Specimen

Regular · 400

Type your own headline.

Handgloves

Glide is drawn for interfaces: the places where type has to survive small sizes, tight rows, and a reader who is not reading for pleasure. The brief was legibility under pressure, so the apertures are open, the letterforms are unambiguous, and the rhythm holds even when a label runs long.

Three masters are drawn by hand: Thin, Regular, and Extra Black. Everything between them is interpolated, which is what lets a single variable file cover the whole 100–950 range without shipping ten static files to the browser.

The optical size axis adapts the letterforms to the size they are set at. Below about sixteen pixels the shapes open up and the spacing loosens; above it the joins tighten and the counters close, so a headline keeps its colour instead of falling apart.

The family covers roman, italic, and a monospaced companion for code, tabular data, and anywhere a column of characters has to line up. All of it is free under the SIL Open Font License.

14 styles

  • Thin100
  • Thin Italic100
  • Light300
  • Light Italic300
  • Regular400
  • Regular Italic400
  • Medium500
  • Medium Italic500
  • Semibold600
  • Semibold Italic600
  • Bold700
  • Bold Italic700
  • Extra Black950
  • Extra Black Italic950
ThinRoman100

Afstandstabel

LightRoman300

Microphonics

RegularRoman400

Nudicaudate

MediumRoman500

Quicksilver

SemiboldRoman600

Blackletter

BoldRoman700

Typefounder

Extra BlackRoman950

Letterpress

Only three of these are drawn: Thin, Regular, and Extra Black. The rest are interpolated.

Characters

400
A
U+0041

Install

Glide is free under the SIL Open Font License 1.1. For Figma and Font Book, download Glide for desktop (TTF). On macOS open Font Book and choose File → Add Fonts. On Windows, select the files, right-click, and install for all users.

1

Download the font files

Download glide-variable.woff2 and glide-variable-italic.woff2 and glide-mono.woff2 and put them in app/fonts/ next to your root layout.

2

Configure the fonts in your root layout

In app/layout.tsx, import localFont and configure the Glide variable and Glide Mono fonts:

app/layout.tsx
import localFont from "next/font/local";
import "./globals.css";

const glide = localFont({
  src: [
    { path: "./fonts/glide-variable.woff2", style: "normal" },
    { path: "./fonts/glide-variable-italic.woff2", style: "italic" },
  ],
  variable: "--font-glide",
  weight: "100 950",
  display: "swap",
});

const glideMono = localFont({
  src: "./fonts/glide-mono.woff2",
  variable: "--font-glide-mono",
  weight: "400",
  display: "swap",
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${glide.variable} ${glideMono.variable}`}>
      <body>{children}</body>
    </html>
  );
}
3

Map the CSS variables in Tailwind

In your global CSS file, map --font-glide to Tailwind's --font-sans and --font-glide-mono to --font-mono:

app/globals.css
@theme inline {
  --font-sans: var(--font-glide);
  --font-mono: var(--font-glide-mono);
}

html {
  font-optical-sizing: auto;
  font-kerning: normal;
}
4

Use it

Glide is now your default sans-serif font, and Glide Mono is your monospace font. Use font-sans with any weight from 100 to 950, and font-mono for code:

<p className="font-sans font-normal">Regular (400)</p>
<p className="font-sans font-bold">Bold (700)</p>
<p className="font-sans font-black">Black (900)</p>
<p className="font-sans font-bold italic">Bold italic (700)</p>
<p className="tabular-nums">11:45 0123456789</p>
<p className="slashed-zero">0</p>
<code className="font-mono">const glide = "mono";</code>