About PickFont

We kept wasting time scrolling through Google Fonts, picking something that looked great in isolation, only to watch it fall apart in an actual UI. Over and over.

PickFont is a fun side project to kill that decision loop. Browse curated font pairs, see them in real UI context, and move on with your day.

Why Google Fonts?

Free, easy to use, and works everywhere — including Expo apps.

Built with

ReactTanStackTailwind CSSPhosphor IconsCloudflareClaude Code

Made by the team behind animata.design

Favorites

No favorites yet

Click the heart on any pair to save it here.

Dense + Airy

Inter Tight+Inter

Make your app feel premium.

Inter Tight is just Inter but narrower. Same design DNA, tighter proportions. The width difference between heading and body is subtle but it's enough to create hierarchy. Probably the most harmonious pairing here since they're literally siblings.

In Context

Dense + Airy
Dashboard
Weekly Growth

Confident headings, readable numbers — clarity without compromise.

Editorial

Architecture of Silence

Where light meets form, space becomes experience.

Checkout
Upgrade to Pro

Everything you need, nothing you don't.

$19
/ month
⚡ Instant export🔒 Private pairs✨ Templates
Code
JetBrains Mono
// typography config
const fonts = {
heading: "Inter Tight",
body: "Inter",
mono: "JetBrains Mono",
}
Form
Use 8+ characters
Controls
NewBetaInvite-only
Typography
Type scale

Every scale, one cohesive system.

OVERLINE
Caption / helper
Section heading

Body text stays readable at every size — from dashboards to long-form.

console.log("mono")
JetBrains Mono — code
Content
Release notes

Body at 400–500, headings at 600–800. Tighten heading spacing for polish.

Return to the full canvas anytime.

Blog Article
Design systems don't kill creativity — they channel it

When constraints are intentional, teams move faster. Typography tokens create rhythm without rigidity — every page feels cohesive while each section keeps its own voice.

The best systems are invisible. Users never think about the grid or the typeface — they just read, and it works.

Terminal
$ npm create pickfont@latest
✔ Project created successfully
$ cd my-app
$ npm run dev
➤ Ready on http://localhost:3000
Heading Weights
Inter Tight
The quick brown foxRegular 400
The quick brown foxMedium 500
The quick brown foxSemibold 600
The quick brown foxBold 700
The quick brown foxExtraBold 800
The quick brown foxBlack 900
Body Weights
Inter
The quick brown foxLight 300
The quick brown foxRegular 400
The quick brown foxMedium 500
The quick brown foxSemibold 600
The quick brown foxBold 700
Letter Spacing
Typography is invisible when done right
Tight -0.03em
Typography is invisible when done right
Snug -0.01em
Typography is invisible when done right
Normal 0em
Typography is invisible when done right
Wide 0.025em
Typography is invisible when done right
Spacious 0.1em
Line Height
Tight 1.3

Good typography is measured in comfort, not pixels. When line height is right, readers stay longer — paragraphs breathe.

Normal 1.5

Good typography is measured in comfort, not pixels. When line height is right, readers stay longer — paragraphs breathe.

Relaxed 1.75

Good typography is measured in comfort, not pixels. When line height is right, readers stay longer — paragraphs breathe.

Landing Hero
Ship faster with the right typeface

Stop second-guessing your font choices. PickFont gives you battle-tested pairings that look great everywhere — from hero banners to footnotes.

Docs
Getting started

Install the package with npm i pickfont then import useFonts() in your root layout. That's it — three lines to premium typography.

Email Preview
Your weekly design digest

Hi there — here's what's new this week. We've added 12 new pairings, improved dark mode contrast, and shipped a faster font loader. Check them out before they trend.

Unsubscribe · View in browser
Complete Font Set
Inter TightHeading
InterBody
JetBrains MonoCode
9:41
Explore new places
Curated destinations for you
Weekend vibes in Tokyo
Neon lights, quiet temples, and ramen at midnight.
12 min read2.4k saves
Design tokens explained
How to build a scalable color system from scratch.
8 min read1.1k saves
Home
Search
Saved
Profile
Cover

Quiet Bloom

Spring issue — Vol. 12

9:41
← BackShare
Design5 min
The quiet power of restraint
Sarah Chen
Mar 2, 2026

Great design whispers. It doesn't shout for attention or clutter the page with decoration. The best interfaces feel obvious in hindsight.

Typography is the backbone. When the typeface is right, everything else falls into place — hierarchy, rhythm, breathing room.

font: var(--w-body) 1rem/1.75 Inter
♡ 248💬 32
•••