Skip to main content

beacon

beacon

Heading Font

Exo 2

Body Font

Titillium Web

Mono Font

Source Code Pro

Space-age geometry. Exo 2's futuristic proportions make headlines feel like mission control, while Titillium Web's Italian polytechnic origins keep body text grounded in engineering precision.

Package Manager

Preview

The quick brown fox jumps over the lazy dog

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

Good typography is measured by how well it reinforces the meaning of the text, not by some abstract scale of merit. Typographic subtlety can be just as important as typographic boldness.

A beautiful pairing

When Exo 2 meets Titillium Web, magic happens. This combination creates a perfect balance between impact and readability.

// Install this pairing
npx shadcn add https://www.fonttrio.xyz/r/beacon.json

Type Tester

Size

Custom Text

Exo 2 400 / 64px
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Click to edit text

In Context

March 7, 2026

On the Craft of Typography

Typography is the art of arranging type to make written language legible, readable, and appealing when displayed. It involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

The Details Matter

Good typography is invisible. Bad typography is everywhere. The reader should never have to fight against the presentation to get to the content. Every choice serves the text.

Typography exists to honor content.— Robert Bringhurst
// Typography scale configuration
const scale = {
  h1: { size: "2.5rem", weight: 700 },
  body: { size: "1rem", lineHeight: "1.6" },
};