Typography
The Typography section of the Finder Builder lets you pick a body font and a heading font, and adjust the base text size for your finder. These choices flow through every element visitors see — search bar, results list, location cards, tags, and filter chips.
Where to find it
- Open your finder in the Finder Builder.
- Select the Design tab in the left sidebar.
- Scroll to the Typography section.
- Choose a Body font, a Heading font, and drag the Base size slider.
Changes appear instantly in the live preview.
🟡 [SCREENSHOT: The Typography section showing the Body font and Heading font dropdowns and the Base size slider]
Available fonts
Seven fonts are available for both body and heading:
| Font | Feel |
|---|---|
| DM Sans | Geometric, friendly, neutral — the default |
| Inter | Humanist, highly legible at small sizes |
| Space Grotesk | Geometric, distinctive — good for modern brands |
| Plus Jakarta Sans | Warm and corporate-friendly |
| IBM Plex Sans | Structured and professional |
| Source Sans 3 | Open and highly readable |
| System font | Uses the visitor’s device font — no external font request |
Body font and heading font are independent — you can use the same font for both, or intentionally mix them (for example, Space Grotesk for headings and Inter for body).
DM Sans is the safest choice
DM Sans is the only font the widget always fetches from Google Fonts, regardless of what other fonts are selected. If you choose a different font and the visitor’s browser doesn’t already have it, the browser falls back gracefully — but the rendering may differ from what you see in the preview. All built-in color themes are tested against DM Sans.
The System font option never makes an external font request and is the most performant choice. It blends the widget into native OS UI, which works well when you want the finder to feel invisible.
Base size
The base size slider sets the root font size for the entire widget in pixels (12–20 px). All text in the finder — headings, body copy, labels, tags — scales proportionally with this value.
| Value | When to use it |
|---|---|
| 12–13 px | Dense layouts or small embed containers |
| 15 px | Factory default — works well for most embeds |
| 16 px | Matches standard web body size; good for larger embeds |
| 18–20 px | Accessibility-first or large-format designs |
💡 Tip: If the finder looks “too small” or “too big” relative to your surrounding page content, adjust Base size first before changing fonts. Matching your host page’s body font size creates the most seamless embed.
Practical pairings
| Body | Heading | Vibe |
|---|---|---|
| DM Sans | DM Sans | Clean and neutral — works with any brand |
| Inter | Inter | Data-heavy or compact layouts |
| Source Sans 3 | Space Grotesk | Open body, distinctive headlines |
| IBM Plex Sans | IBM Plex Sans | Structured, enterprise |
| System font | System font | Invisible — blends into native UI |
For the full font list, exact CSS variable names, and advanced per-element overrides, see Typography customization.