34 Best Font Pairings for Figma
Figma has made font pairing a live, interactive decision rather than a guess: you can drop a heading style and a body style into the same frame, toggle between Google Fonts instantly, and see how the contrast actually reads in a real component. The combinations below are chosen for that workflow specifically, covering dashboards, marketing sites, mobile apps, editorial layouts, and developer tools, so you can pick a pairing that matches the product you’re actually shipping.
-
Space Grotesk + Inter
Design systems that scale
Space Grotesk
Inter's neutral, screen-optimized letterforms keep dense UI copy legible at small sizes.
Inter
Space Grotesk’s slightly quirky geometry gives headlines personality without sacrificing the technical feel that product teams want, while Inter was built for exactly this job as body text. Both share tall x-heights suited to screens, which is why this pairing shows up constantly in SaaS dashboards and design system documentation.
-
Sora + Work Sans
Launch your product today
Sora
A landing page needs body copy that reads fast without competing with the headline above it.
Work Sans
Sora’s rounded terminals and even rhythm make for confident marketing headlines, and Work Sans steps back into a more restrained grotesque that lets those headlines carry the visual weight. This is a dependable landing page combination when you want approachable but still credible.
-
Manrope + Mulish
Track everything in one place
Manrope
Mobile interfaces need body text that stays crisp even in compact cards and list rows.
Mulish
Manrope and Mulish share a similar low-contrast, humanist structure, so switching between them feels like a change in emphasis rather than a change in voice. That consistency is valuable in mobile app UI where headings and body text often sit only a few pixels apart.
-
Archivo + Source Sans 3
Component library documentation
Archivo
Documentation benefits from a body font that has been tested at length for extended reading.
Source Sans 3
Archivo’s grotesque sturdiness reads well in bold section headers, and Source Sans 3 was designed from the start as a workhorse text face, which makes this pair a natural fit for internal tools and design system sites where clarity matters more than flair.
-
Poppins + Noto Sans
Grow your audience faster
Poppins
Noto Sans covers an enormous range of languages, useful for products shipping internationally.
Noto Sans
Poppins brings a geometric, friendly energy that suits consumer marketing pages, and Noto Sans grounds that energy with a more neutral, highly legible body style. If your Figma file needs to support multilingual content, this combination scales without redesigning type choices per locale.
-
Fraunces + Karla
Stories worth telling well
Fraunces
Karla's understated grotesque shapes let a serif headline do the emotional work above it.
Karla
Fraunces has enough personality in its wonky serifs to anchor an editorial portfolio, and Karla’s calm geometry keeps captions and body paragraphs from fighting for attention. This pairing suits Figma portfolio templates and case study pages where storytelling matters as much as the work itself.
-
Plus Jakarta Sans + Inter
Built for modern teams
Plus Jakarta Sans
Consistent spacing between these two fonts keeps multi-column layouts feeling aligned.
Inter
Plus Jakarta Sans has just enough warmth in its curves to differentiate it from purely mechanical grotesques, and Inter’s exhaustive weight range means you can match tone precisely as hierarchy deepens. It’s a safe, versatile default for product marketing sites built in Figma’s auto layout.
-
DM Sans + Public Sans
Shop the new collection
DM Sans
Public Sans was built for government and civic services, so it reads clearly at any size.
Public Sans
DM Sans has a lightly rounded, approachable geometry that works well for product names and promotional headlines, while Public Sans supplies a plain, trustworthy body voice for product descriptions and checkout flows. Together they suit e-commerce interfaces that need to feel both inviting and reliable.
-
JetBrains Mono + Inter
API reference and endpoints
JetBrains Mono
Body copy in a humanist sans keeps explanatory text easy to scan between code blocks.
Inter
Using a monospaced face for headings signals a developer-facing product immediately, and JetBrains Mono was specifically designed to stay legible at small sizes, unlike many display monospace fonts. Pair it with Inter for prose so the interface doesn’t feel like an unbroken wall of code.
-
Bricolage Grotesque + Karla
A studio for bold ideas
Bricolage Grotesque
Simple, well-spaced body text lets an expressive display face stay the focal point.
Karla
Bricolage Grotesque has irregular, hand-finished details that suit creative agency sites and portfolio covers, and it needs a body font that stays firmly in the background. Karla’s even proportions do exactly that, making this a good choice when the heading font is meant to carry the brand’s personality.
-
Instrument Sans + IBM Plex Sans
Design tools for everyone
Instrument Sans
A slightly technical body face balances a friendlier, rounder heading style above it.
IBM Plex Sans
Instrument Sans has a soft, contemporary character that reads well in product headlines, and IBM Plex Sans brings a touch of engineering precision to supporting text. This contrast suits startup landing pages that want to feel approachable but still technically credible.
-
Outfit + Nunito Sans
Feel better every day
Outfit
Rounded, gentle letterforms in the body copy keep the overall mood calm and reassuring.
Nunito Sans
Outfit’s clean geometric shapes and Nunito Sans’s soft curves share an unhurried mood, which is exactly right for wellness and lifestyle apps built in Figma where the whole interface should feel low-pressure. Both fonts render smoothly at the small sizes common in mobile navigation.
-
Lexend + Rubik
Designed for readability
Lexend
Rubik's slightly rounded corners keep body text friendly without losing structure.
Rubik
Lexend was engineered specifically to improve reading performance, which makes it a strong choice for accessibility-focused products, and Rubik’s rounded grotesque forms complement that intent without feeling clinical. This pairing works well in education and healthcare interfaces.
-
Epilogue + Barlow
Manage your money smarter
Epilogue
Barlow's condensed-adjacent proportions fit compact financial data tables neatly.
Barlow
Epilogue’s confident, slightly squared letterforms suit fintech branding, and Barlow’s efficient width helps dense numeric interfaces stay tidy. Both fonts share a similar visual weight, so headings and labels feel like they belong to the same system.
-
Hanken Grotesk + Figtree
Simple pricing, no surprises
Hanken Grotesk
Figtree's neutral grotesque shapes keep supporting copy from competing with the headline.
Figtree
Hanken Grotesk and Figtree both sit comfortably in the understated end of the grotesque spectrum, which is useful when a SaaS product wants type that feels current without drawing attention to itself. This is a good default pairing for pricing pages and onboarding screens.
-
Schibsted Grotesk + Source Sans 3
Nordic design, made simple
Schibsted Grotesk
Straightforward body text keeps the layout feeling ordered and unhurried.
Source Sans 3
Schibsted Grotesk’s clean, slightly condensed forms echo Scandinavian editorial design, and Source Sans 3 gives it a dependable, well-tested partner for longer passages. The result suits minimal portfolio sites and architecture or furniture brand pages.
-
Red Hat Display + Red Hat Text
Infrastructure you can trust
Red Hat Display
Sharing a type family across heading and body keeps enterprise interfaces feeling unified.
Red Hat Text
Red Hat Display and Red Hat Text were designed together as a superfamily, so proportions, spacing, and mood match exactly while still offering enough contrast in weight and structure to separate hierarchy. This is a strong option for enterprise dashboards where consistency matters more than variety.
-
Urbanist + Nunito
Book your next stay
Urbanist
Soft, rounded body text keeps a travel or hospitality interface feeling welcoming.
Nunito
Urbanist’s light, geometric headlines feel current and airy, and Nunito’s gentle curves in the body copy keep the tone friendly rather than corporate. This combination fits travel, hospitality, and consumer lifestyle apps well.
-
Syne + Work Sans
Unconventional by design
Syne
A restrained grotesque in the body text keeps a bold display face from overwhelming the page.
Work Sans
Syne’s asymmetric, experimental letterforms make a strong statement in large headlines, so it needs a body partner that disappears into the background. Work Sans does that job reliably, which is why this pairing turns up often in bold creative studio sites.
-
Playfair Display + Lato
Timeless craftsmanship, reimagined
Playfair Display
Lato's warm, humanist body text softens the formality of a high-contrast serif headline.
Lato
Playfair Display’s dramatic thick-and-thin contrast signals luxury and heritage, while Lato keeps supporting copy warm and approachable rather than stiff. Designers use this pairing in Figma for premium brand sites, hospitality, and editorial-style product launches.
-
Libre Caslon Display + Karla
Read the full story here
Libre Caslon Display
Clean sans-serif body text keeps a classic display serif feeling current, not dated.
Karla
Libre Caslon Display brings old-style serif character into a distinctly modern display cut, and pairing it with a plain grotesque like Karla keeps the overall composition from feeling like a period piece. It’s an effective choice for editorial landing pages and long-form content sites.
-
Newsreader + Inter
Notes from the founders
Newsreader
A neutral sans-serif body keeps a serif headline from feeling overly formal on screen.
Inter
Newsreader was designed specifically for on-screen reading, so it holds up in blog headers and article intros, and Inter provides a familiar, screen-tested body voice underneath it. This pairing works well for content platforms and founder-letter style pages.
-
Spectral + Mulish
Research, published clearly
Spectral
Simple body text keeps academic or research content approachable rather than dense.
Mulish
Spectral’s understated serif detailing suits research and publishing interfaces that need to feel credible, and Mulish’s plain grotesque shapes keep supporting text light on the page. Together they work well in Figma templates for journals, whitepapers, and knowledge bases.
-
Bitter + Open Sans
Deep dives, done right
Bitter
Open Sans remains one of the most road-tested body fonts for long-form reading online.
Open Sans
Bitter’s slab serif structure gives headlines a sturdy, grounded feel, and Open Sans has been refined over years of real-world use as a body face. This is a reliable pairing for content-heavy dashboards, blogs, and internal documentation sites.
-
Cormorant + Jost
Elegance in every detail
Cormorant
A geometric sans-serif body keeps a delicate serif headline from feeling too precious.
Jost
Cormorant’s high contrast and narrow proportions suit fashion and beauty branding, and Jost’s geometric simplicity balances that delicacy with something more structural underneath. This combination fits editorial-leaning e-commerce sites built in Figma.
-
DM Serif Display + DM Sans
Introducing something new
DM Serif Display
Sharing a family name keeps proportions and spacing coordinated across the page.
DM Sans
DM Serif Display and DM Sans were designed as companion faces, so their x-heights and overall rhythm line up naturally even though one is a serif and the other a grotesque. This makes the pairing a low-risk choice for product launch pages that want a touch of elegance without redesigning the whole type system.
-
Petrona + Karla
Craft, considered slowly
Petrona
Plain, well-balanced body text keeps a soft serif headline from feeling too decorative.
Karla
Petrona has a gentle, slightly old-fashioned warmth that works well for artisanal and craft-focused brands, and Karla’s neutrality keeps the rest of the page from competing with it. This pairing suits small business and portfolio sites where the product itself should stay the focus.
-
Albert Sans + Inter
Minimal by choice, not chance
Albert Sans
Two closely related grotesques keep a minimal interface feeling coherent throughout.
Inter
Albert Sans and Inter share a similarly restrained, low-contrast structure, so switching between them for headings and body reads as a change in scale rather than a change in voice. This is a dependable pairing for minimalist app UI and personal portfolio sites.
-
Figtree + Source Sans 3
Components, ready to ship
Figtree
A tested workhorse body font keeps component documentation easy to scan quickly.
Source Sans 3
Figtree’s friendly, rounded grotesque works well for section headers in a component library, and Source Sans 3 provides dependable body text for usage notes and specs. Both fonts were built with UI legibility in mind, which matters when a design system file gets used daily.
-
Fira Sans + Fira Code
Ship faster, break less
Fira Sans
Fira Code's ligatures make inline code references easier to read in mixed content.
Fira Code
Fira Sans and Fira Code were designed as a coordinated family for developer tools, so pairing them keeps a technical product feeling consistent whether the copy is prose or a snippet of code. This combination fits developer portals and internal engineering dashboards well.
-
Space Mono + Work Sans
Data, visualized honestly
Space Mono
A neutral grotesque in the body keeps a quirky monospace headline from feeling gimmicky.
Work Sans
Space Mono’s retro, typewriter-inspired character makes an unexpected but effective headline choice for technical or data-focused products, and Work Sans keeps the surrounding interface calm and legible. Use this pairing sparingly, since a monospace display face carries a strong personality of its own.
-
Rubik + Mulish
Onboarding made playful
Rubik
Soft, unobtrusive body text keeps a rounded headline font from feeling childish.
Mulish
Rubik’s rounded corners bring warmth to onboarding flows and empty states, and Mulish balances that playfulness with a more neutral, grown-up body voice. This pairing is common in consumer apps that want to feel friendly without losing credibility.
-
Jost + Karla
Geometry, kept honest
Jost
Plain body text lets a geometric display font's circular forms stay the visual highlight.
Karla
Jost’s Futura-inspired geometry gives headlines a confident, architectural feel, and Karla’s understated grotesque keeps supporting text from distracting from that shape language. This pairing suits minimal product sites and architecture or design studio portfolios.
-
Sora + Albert Sans
A single source of truth
Sora
Two low-contrast grotesques keep a data-dense interface visually calm throughout.
Albert Sans
Pairing Sora with Albert Sans instead of a more common body font gives a product a slightly more distinctive voice while keeping the same technical, screen-native feel. It works particularly well in internal tools and analytics dashboards where consistency across many small components matters more than personality.
Tips for pairing fonts in Figma
Test pairings inside real components, not just on a title slide; a headline and body font can look great side by side but clash once they’re inside a card, table, or navigation bar.
Match x-height and stroke contrast between your two fonts so the body text doesn’t feel thin or heavy relative to the heading above it.
Limit yourself to two font families per project whenever possible, and lean on weight and size variation within each family to build hierarchy instead of introducing a third typeface.
If your product needs to support many languages, confirm both fonts in the pairing have full character coverage for the scripts you plan to ship.