Font Resources for UI Designers

Typography decisions have a disproportionate impact on how polished a UI feels. These resources cover where to get fonts, which ones are worth using, and when not to use custom fonts at all.

Google Fonts (fonts.google.com)

What it is: Free, open-source font library with 1,500+ font families.

The reputation problem: Google Fonts was considered low-quality for years — the library was full of novelty fonts and poor web-optimized choices. That's no longer accurate. The quality has improved significantly, and the library now includes several excellent choices for UI: Inter, Roboto Flex, DM Sans, Plus Jakarta Sans, Nunito Sans, IBM Plex Sans.

The fonts.google.com/knowledge section is an underused resource. It covers type fundamentals, pairing guidelines, choosing type for specific use cases, and variable font features. Worth reading if typography decisions are part of your work.

Figma integration: Any Google Font is available in Figma's font picker if you have the Figma desktop app installed. No setup needed.

Inter (rsms.me/inter)

What it is: A typeface designed specifically for screen interfaces.

Inter is the default UI font for a substantial portion of modern software products. Figma uses it for its own UI. Linear uses it. Most developer tools use it. The reason: it was designed from the ground up for digital display — optimized for readability at small sizes, with a tall x-height and open letterforms that stay distinct at 12-14px.

If you're uncertain what font to use for a product UI, Inter is a defensible, clean default. It's free (SIL Open Font License).

In Figma: Select "Inter" in the font picker. It's available without any additional setup.

Geist (vercel.com/font)

What it is: Vercel's open-source typeface, released 2023.

Geist is a newer alternative to Inter with a slightly more distinctive character. It comes in two variants: Geist (proportional, for UI) and Geist Mono (monospace, for code). The visual personality is clean and slightly more modern than Inter — a good choice for developer tools, SaaS products, and products that want to feel up-to-date.

Free and open source. Available on Google Fonts and as a direct download from vercel.com/font.

FontSource (fontsource.org)

What it is: Self-hostable versions of Google Fonts and other open-source fonts as npm packages.

If your engineering team is building a web product and doesn't want to load fonts from Google's CDN (for performance, privacy, or compliance reasons), FontSource packages each font as an npm module that self-hosts the font files.

For designers: FontSource is the reason you can tell your engineering team "use Inter from FontSource" rather than referencing a Google CDN URL. The fonts are the same; the hosting is different.

The Figma font picker tip

Figma's font picker doesn't have a favorites system by default, but you can pin fonts used in your current file to the top of the list. The trick: fonts that appear in your styles or in your current layers show up at the top of the picker under "Document fonts." If your team has agreed on a type system, defining those fonts as text styles keeps them consistently at the top of everyone's picker.

The keyboard shortcut to open the font picker: select a text layer and press T then start typing the font name. Faster than clicking through the panel.

Variable fonts

Many modern web fonts are variable fonts — they contain the full range of weights in a single font file rather than separate files for each weight. Inter, Roboto Flex, and many Google Fonts are available as variable fonts.

For UI design: variable fonts give you fine-grained weight control. Instead of choosing between 400 (Regular) and 700 (Bold), you can use 450 or 520 for subtle emphasis. In Figma, variable fonts expose a slider in the text panel for weight and other axes.

For engineering: variable fonts reduce HTTP requests and file size when using multiple weights of the same family.

Set up typography in Figma

When to use system fonts instead

For products where performance is critical, or for internal tools and developer-facing products, system font stacks are worth considering:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

This renders San Francisco on Mac/iOS, Segoe UI on Windows, and Roboto on Android — all excellent UI fonts. Zero font loading overhead, consistent platform feel.

The tradeoff: you lose brand distinctiveness and cross-platform consistency. For a consumer product where brand matters, load a custom font. For an internal dashboard where performance matters more than brand, system fonts are a legitimate choice.