Typeset

Inter · Inter · IBM Plex Mono

Quietly gliding
Över fjords

Measuring the two lines

Inter body, Inter headings, IBM Plex Mono code. Inter is a sans, so it gets the docs rhythm: compact size, steady leading, and a 66ch measure.

Measuring the proof strings on canvas…

You answer messages for a neighborhood bike shop. Read the note, then reply in two plain sentences.

  • Flat tyre or a slow puncture
  • Brakes that rub or squeal
  • Gears that skip under load

Docs rhythm, this preset · 15px / 1.75

Inter is a sans, so it gets the docs rhythm: compact size, steady leading, and a 66ch measure.

Scenarios

The measure of a good page

Set the body first. Open the leading until the lines stop touching.

Article

Northwind

Type that reads before it shows

One preset carries body, headings, and code.

Landing

Quiet

A reading room, open late on Thursdays.

Poster

1,284 ms

Median time to first byte, last 30 days.

Impact

Setting type for small screens

A narrow column forgives a lot, except leading tuned for a desk.

Card

Form

Launch day 🚀

Ship it ✨, then coffee ☕. The 🐛 list can wait.

Emoji

Preset CSS

.typeset-inter {
  --typeset-font-body: var(--font-inter), sans-serif;
  --typeset-font-heading: var(--font-inter), sans-serif;
  --typeset-font-mono: var(--font-ibm-plex-mono), ui-monospace, monospace;
  --typeset-size: 15px;
  --typeset-leading: 1.75;
  --typeset-flow: 1.25em;
}

next/font setup

// app/fonts.ts
import { IBM_Plex_Mono, Inter } from "next/font/google";

export const inter = Inter({
  subsets: ["latin"],
  style: ["normal", "italic"],
  variable: "--font-inter",
});

export const ibmPlexMono = IBM_Plex_Mono({
  subsets: ["latin"],
  weight: ["400", "500", "600"],
  style: ["normal", "italic"],
  variable: "--font-ibm-plex-mono",
});

Wrapper

<article className={`${inter.variable} ${ibmPlexMono.variable} typeset typeset-inter`} style={{ maxWidth: "66ch" }}>
  {content}
</article>