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.

cap heightx-heightbaselinedescenderAgpaired

The wrong fonts make
everything feel slightly off.

You open Google Fonts. 1,500 options. You try a heading, pair it with a body font, squint at the screen. Something’s wrong but you can’t name it. You try another combination. Then another. An hour disappears. The project ships with system fonts.

“I’ll just try one more font.”

Three hours later, everything looks wrong. The heading’s too heavy. The body’s too thin. The x-heights don’t match and the whole layout feels like two strangers forced into conversation.

You go back to your safe list.

Inter. Roboto. System UI. The design works but it doesn’t feel like anything. Your side project deserved a voice, but the deadline won and the fonts lost.

“Can you make it pop?”

The client wants personality. They reject anything that isn’t a safe sans-serif. You need a pairing that’s interesting and professional, but Google Fonts gives you 1,500 options and zero guidance.

We picked 54 pairs.
Each one tested.

PickFont isn’t a font directory. It’s a curated set of heading + body combinations from Google Fonts, each one tested across real UI components—cards, forms, dashboards, navigation—in both light and dark mode, across weights and sizes.

Real UI preview

See how fonts actually look on cards, forms, and dashboards. Not just specimen text.

One-click export

Copy the CSS, the HTML link tags, or the Tailwind config. No friction.

Mood filters

12 moods—startup, editorial, fintech, luxury—to narrow 54 pairs to the ones that fit your project.

Monospace included

Every pair comes with a monospace recommendation. Because developers need that too.

Fewer options,
better decisions.

We believe curation beats algorithms. An AI can suggest thousands of combinations, but it can’t tell you which one feels right for a fintech dashboard versus a poetry magazine. That takes a human eye, real layouts, and the willingness to throw away the pairings that almost work.