Skip to main content
Three fonts

Ready-made font combinations for shadcn/ui projects. Each includes heading, body, and mono fonts with a complete scale.

3 Fonts

Heading, body, mono

Typography Scale

h1 through body

CSS Variables

Ready to use

Package Manager
49 pairings

Heading

Schibsted Grotesk

Body

Nordic minimalism meets grotesque warmth. Schibsted Grotesk's Scandinavian clarity in headlines paired with Karla's quirky grotesque personality for body text that feels human.

agency

Schibsted Grotesk + Karla + Fira Code

Heading

Outfit

Body

Structured meets refined. Outfit's geometric precision in headings contrasts beautifully with Libre Baskerville's warm readability, like blueprints meeting handwritten notes.

architect

Outfit + Libre Baskerville + IBM Plex Mono

Heading

Exo 2

Body

Space-age geometry. Exo 2's futuristic proportions make headlines feel like mission control, while Titillium Web's Italian polytechnic origins keep body text grounded in engineering precision.

beacon

Exo 2 + Titillium Web + Source Code Pro

Heading

PT Serif

Body

Russia's gift to web typography. ParaType's public text fonts — commissioned for pan-Russian readability — pair beautifully: serif headlines carry authority, sans body text ensures clarity across Cyrillic and Latin.

broadsheet

PT Serif + PT Sans + Inconsolata

Heading

Archivo Black

Body

Raw typographic power. Archivo Black's heavy weight fills every pixel of the headline, while regular Archivo maintains the same DNA in a readable body weight. No decoration, pure function.

brutalist

Archivo Black + Archivo + Source Code Pro

Heading

Montserrat

Body

Buenos Aires modernism. Montserrat channels the urban signage of its namesake neighborhood — bold, geometric, unmistakable. Karla's grotesque quirks keep body text from feeling clinical.

capsule

Montserrat + Karla + JetBrains Mono

Heading

DM Serif Display

Body

Literary and warm serif pairing. Elegant display headings with classic body text for publishing.

classic

DM Serif Display + Libre Baskerville + JetBrains Mono

Heading

Cabin

Body

Humanist warmth across scripts. Cabin's slightly condensed forms give headings a distinct character, while Mukta — designed for both Devanagari and Latin — brings inclusive readability to body text.

commons

Cabin + Mukta + Fira Code

Heading

Roboto

Body

Google's type system. Roboto's dual nature — mechanical skeleton with friendly curves — creates a cohesive experience from headlines to fine print. The de facto standard for Material Design.

corporate

Roboto + Roboto + Roboto Mono

Heading

Space Grotesk

Body

Playful geometric pairing. Bold headings with friendly body text for startups and portfolios.

creative

Space Grotesk + DM Sans + Fira Code

Heading

Plus Jakarta Sans

Body

Contemporary curation. Plus Jakarta Sans brings Indonesian design heritage to bold headings, while PT Serif delivers ParaType's exceptional Cyrillic and Latin body text.

curator

Plus Jakarta Sans + PT Serif + Source Code Pro

Heading

Manrope

Body

Data-driven clarity. Manrope's optical corrections make dense dashboards legible, while DM Sans handles labels and descriptions with compact efficiency.

dashboard

Manrope + DM Sans + Fira Code

Heading

Red Hat Display

Body

Open-source identity. Red Hat Display balances geometric precision with humanist warmth, creating a type system that feels both technical and approachable — exactly what developer tools need.

devtool

Red Hat Display + Red Hat Display + Fira Code

Heading

Bitter

Body

Slab-serif substance. Bitter's sturdy slab serifs were designed specifically for screen reading, making headlines feel anchored and authoritative. Open Sans handles the body with effortless neutrality.

digest

Bitter + Open Sans + Source Code Pro

Heading

Heebo

Body

Hebrew-Latin harmony. Heebo's geometric forms designed for both scripts create inclusive headlines, while Assistant — with similar dual-script DNA — maintains that consistency through body text.

dispatch

Heebo + Assistant + Source Code Pro

Heading

Source Sans 3

Body

Adobe's open-source superfamily. Source Sans 3's humanist proportions excel in UI and documents alike, with Source Code Pro maintaining the same vertical metrics for seamless mixed content.

document

Source Sans 3 + Source Sans 3 + Source Code Pro

Heading

Barlow Condensed

Body

California grotesk in two widths. Barlow Condensed packs maximum information into headlines, while regular Barlow breathes in body text. A superfamily designed for screen-first interfaces.

dossier

Barlow Condensed + Barlow + IBM Plex Mono

Heading

Playfair Display

Body

Classic editorial pairing. High-contrast serif headings with readable serif body text.

editorial

Playfair Display + Source Serif 4 + JetBrains Mono

Heading

Outfit

Body

Trust through typography. Outfit's geometric clarity inspires confidence in headings, while IBM Plex's rigorous design system ensures readability in data-heavy financial interfaces.

fintech

Outfit + IBM Plex Sans + IBM Plex Mono

Heading

Josefin Sans

Body

Vintage geometry meets modern elegance. Josefin Sans's 1920s-inspired letterforms create distinctive headlines, while Raleway's refined thin weights bring fashion-forward sophistication to body text.

folio

Josefin Sans + Raleway + Roboto Mono

Heading

Cormorant Garamond

Body

Old-world elegance meets contemporary grace. Cormorant Garamond's delicate high-contrast strokes create dramatic headlines, balanced by Raleway's geometric sophistication.

gazette

Cormorant Garamond + Raleway + Roboto Mono

Heading

Public Sans

Body

Government-grade clarity. Public Sans was designed for the US Web Design System — strong, neutral, and accessible. Paired with Lato's warm humanist body text for approachable civic interfaces.

govtech

Public Sans + Lato + Source Code Pro

Heading

Lexend

Body

Designed for readability research. Lexend's variable font axes were fine-tuned through scientific studies to reduce visual noise and increase reading proficiency.

handbook

Lexend + Lexend + Inconsolata

Heading

Anton

Body

Bold and unapologetic. Anton's narrow, impactful letterforms dominate the viewport, while Work Sans's humanist warmth grounds the reading experience in comfortable body text.

headline

Anton + Work Sans + Roboto Mono

Heading

Figtree

Body

Calm and clear. Figtree's friendly geometry in headings paired with Overpass's Highway Gothic roots — designed to be read at speed. Perfect for interfaces where clarity saves lives.

health

Figtree + Overpass + Inconsolata

Heading

Fjalla One

Body

Condensed power meets art deco elegance. Fjalla One's Nordic condensed forms dominate the headline, while Josefin Sans's vintage geometric proportions add character to every paragraph.

impact

Fjalla One + Josefin Sans + Fira Code

Heading

Merriweather

Body

Purpose-built for reading. Merriweather's sturdy serifs hold up at any size, paired with Mulish's neutral warmth for body text that keeps readers engaged paragraph after paragraph.

journal

Merriweather + Mulish + Source Code Pro

Heading

Sora

Body

Launch-ready confidence. Sora's geometric precision with optical adjustments makes bold headlines pop, while Public Sans — born from US government accessibility standards — ensures every word lands clearly.

launch

Sora + Public Sans + Fira Code

Heading

EB Garamond

Body

Pure literary elegance. Two old-style serifs in conversation — Garamond's refined Renaissance forms meet Crimson's contemporary interpretation, creating a scholarly harmony.

literary

EB Garamond + Crimson Text + Inconsolata

Heading

Roboto Slab

Body

The complete Roboto system. Slab headlines bring gravitas to Google's most versatile typeface family. A three-weight system that works everywhere, from Android to enterprise dashboards.

manifesto

Roboto Slab + Roboto + Roboto Mono

Heading

Bitter

Body

Two screen-first serifs in harmony. Bitter's sturdy slab headlines ground the page, while Lora's calligraphic curves make every paragraph feel like turning a page in a favorite book.

memoir

Bitter + Lora + Inconsolata

Heading

Geist

Body

Ultra-minimal Vercel-style pairing. One font family for everything, clean and modern.

minimal

Geist + Geist + Geist Mono

Heading

Inter

Body

Clean and neutral sans-serif pairing. Perfect for SaaS dashboards and web applications.

modern-clean

Inter + Inter + Geist Mono

Heading

Playfair Display

Body

High-contrast editorial with a modern twist. Playfair's sharp serifs cut through DM Sans's soft geometry, creating a sophisticated tension between tradition and modernity.

newspaper

Playfair Display + DM Sans + JetBrains Mono

Heading

Cormorant Garamond

Body

For stories worth telling. Cormorant's dramatic display weight arrests attention at the chapter level, while Lora's brush-inspired curves make each paragraph a pleasure to read.

novel

Cormorant Garamond + Lora + JetBrains Mono

Heading

Quicksand

Body

Rounded and inviting. Quicksand's perfectly circular counters give headings a toy-like friendliness, while Cabin's humanist proportions keep body text grounded and professional.

playful

Quicksand + Cabin + Inconsolata

Heading

Oswald

Body

Condensed impact. Oswald's tall proportions make every headline a statement, balanced by Barlow's slightly rounded sans-serif that adds approachability to the mechanical strength.

poster

Oswald + Barlow + Inconsolata

Heading

Plus Jakarta Sans

Body

Product-focused clarity. Jakarta's slightly warmer geometry gives headings personality without the noise, while Inter handles the fine print with surgical precision.

product

Plus Jakarta Sans + Inter + JetBrains Mono

Heading

Saira

Body

Racing DNA meets open-source philosophy. Saira's motorsport-inspired geometry powers through headlines, while Ubuntu's distinctive humanist forms — Canonical's signature typeface — make body text unmistakably modern.

protocol

Saira + Ubuntu + IBM Plex Mono

Heading

Urbanist

Body

SaaS-native typography. Urbanist's low-contrast geometric forms feel at home in navigation and pricing, while Libre Franklin's newsprint heritage makes feature descriptions feel trustworthy.

saas

Urbanist + Libre Franklin + JetBrains Mono

Heading

EB Garamond

Body

Academic precision meets digital clarity. EB Garamond's renaissance roots lend authority to headings, while Inter ensures perfect screen readability for long-form content.

scholar

EB Garamond + Inter + Source Code Pro

Heading

Poppins

Body

Global-ready friendliness. Poppins brings Indian Type Foundry's geometric warmth to headlines, while Hind's Devanagari-first design ensures beautiful rendering across Latin and Indic scripts.

social

Poppins + Hind + Roboto Mono

Heading

Nunito

Body

Friendly and approachable. Nunito's rounded terminals give headings warmth, while Nunito Sans straightens out for professional body text. The family that grows with your product.

startup

Nunito + Nunito Sans + Fira Code

Heading

Lora

Body

Warm and inviting. Lora's brushed curves bring narrative warmth to headlines, while Nunito Sans's rounded terminals keep body text approachable and easy to scan.

storyteller

Lora + Nunito Sans + Inconsolata

Heading

Bricolage Grotesque

Body

Design-forward pairing. Bricolage Grotesque's distinctive ink traps and angular terminals command attention, softened by Figtree's friendly geometric body text.

studio

Bricolage Grotesque + Figtree + Fira Code

Heading

Inter Tight

Body

Neo-grotesque precision. Inter Tight's condensed proportions pack more information into headlines without sacrificing legibility, while Open Sans provides the reliable body text that 40% of the web already trusts.

swiss

Inter Tight + Open Sans + IBM Plex Mono

Heading

IBM Plex Sans

Body

Professional IBM Plex family pairing. Designed for documentation and enterprise applications.

technical

IBM Plex Sans + IBM Plex Sans + IBM Plex Mono

Heading

Noto Serif

Body

The universal pairing. Noto's unified design system ensures consistent rendering across every language and script. Truly global typography with no tofu.

thesis

Noto Serif + Noto Sans + Inconsolata

Heading

Jost

Body

Futura-inspired ambition. Jost channels Paul Renner's geometric ideals for commanding headlines, softened by Rubik's slightly rounded sans-serif that adds just enough warmth for comfortable reading.

venture

Jost + Rubik + Roboto Mono