Design & Styling
Font pairing guide
A great font pairing is like a great double act — each font does something the other can't. Scroll through 12 curated real-world pairings, see them rendered live, and grab a ready-to-use prompt for each one.
How font pairing works
The simplest rule: contrast creates hierarchy, harmony creates cohesion. A good pair uses two fonts that are different enough to create visual distinction between heading and body — but similar enough in proportion and mood that they feel like they belong on the same page.
The classic approaches:
- Serif + Sans-serif — the most versatile combination; one carries warmth and authority, the other carries clarity
- Display serif + text serif — both serif, but the display font is expressive and the body font is calm and readable
- Geometric sans + humanist sans — both modern, but different enough in character to create hierarchy
- Any pair + monospace accent — the third font as a signal: labels, dates, categories
All of these are free — and so is every Google Font
Google Fonts is the world's largest library of free, open-source web fonts. Every font in this guide is on Google Fonts — and so is every other font in the library. Ullbek supports all of them.
That means if you find a pairing you love on another site, in a design blog, or in the Google Fonts catalog itself, you can ask Ullbek to use it by name and it will be applied exactly, with the correct weights loaded for your site. You're never limited to a preset list.
Browse all 1,500+ fonts on Google FontsThe pairings
Twelve curated combinations — each with a live preview rendered in the actual fonts, a character profile, and a prompt you can copy straight into Ullbek.
The craft of the
written word.
A publication for readers who think slowly and read deeply.
Good writing rewards patience. Good typography rewards the writing — spacing the words so the eye can rest, scaling the letters so the mind can follow, choosing shapes that disappear into meaning.
CATEGORY · 8 MIN READOpinionated serif. Cinematic. Maximum presence.
Workhorse reading serif. Warm, effortless on screen.
Technical, systematic. Perfect for labels and metadata.
Use Fraunces at weight 900 for all headings and pull quotes, Source Serif 4 at weight 400 for body text, and IBM Plex Mono for labels, dates, and categories. This is an editorial combination — warm, literary, and sophisticated.
Beauty,
redefined.
Skincare crafted from the rarest botanicals, for skin that deserves nothing less.
Each formulation is tested across twelve months, refined through seventeen iterations, and approved only when it exceeds every benchmark we set for ourselves — and our clients.
SHOP THE COLLECTIONHigh contrast, dramatic. Instantly signals premium.
Clean and modern. Balances Playfair's expressiveness.
Use Playfair Display in italic at weight 700 for headings and pull quotes. Use DM Sans at weight 300–400 for all body text and navigation. Dark background (#0F0A14 or similar deep charcoal). This is a luxury brand — the typography should feel exclusive and editorial.
Financial advice
that actually works.
Independent wealth management for families who think in generations.
We have worked with multigenerational families since 1998. Our approach is methodical, patient, and fiercely independent — we have no products to sell and no commissions to earn. Our only interest is yours.
Screen-optimised. Confident and precise without being cold.
Serious, readable serif. Implies depth of thought.
Use Inter at weight 700 for headings, Inter at weight 500 for subheadings and UI labels, and Merriweather at weight 300 for body paragraphs. Clean white background. Professional and trustworthy — this is a financial or legal services site.
Your neighbourhood
yoga studio.
All levels welcome. Every body welcome. Come as you are.
We've been in the same spot on Grove Street for eleven years. We know your name, remember your practice, and keep our classes small so every session feels personal. Join us for a trial week — on us.
Rounded, warm, approachable. Never intimidating.
Humanist serif. Adds depth and warmth to friendly headings.
Use Nunito at weight 800 for headings and navigation, and Lora at weight 400 for body copy. Soft sage green or warm cream background. Friendly and welcoming — this is a local business with a strong community feel.
Space
as intention.
We design the spaces between things as carefully as the things themselves. Every project begins with a single question: what should this space make you feel?
VIEW PROJECTSUltra-thin, elegant. The contrast with Inter is striking.
The tension between thin serif and clean sans is the design.
Use Cormorant Garamond in italic at weight 300 for large display headings only. Use Inter at weight 400 for all body text, navigation, and UI. Near-white background. Very minimal layout with generous whitespace. This is an architecture or design studio — restraint is the aesthetic.
Ship faster.
Break nothing.
The deployment pipeline built for teams who ship daily.
Every deploy is tested, previewed, and rolled back in under 30 seconds if something goes wrong. Your team ships at the speed of thought — and sleeps at night.
START FREE →Geometric sans. Modern, technical, no-nonsense.
Surprising serif for body — adds warmth to a cold dark theme.
Use Outfit at weight 700 for headings, Outfit at weight 400 for navigation and UI labels, and Spectral at weight 300 for body paragraphs. Dark theme: near-black background (#0D1117), light text. This is a technical SaaS or developer tool — confident and fast-feeling.
The data behind
the headlines.
An independent research journal for people who want to understand, not just react.
Our team spends six weeks on every investigation. We don't publish until we've talked to everyone, checked every number, and understood every nuance. Then we write it in plain language.
INVESTIGATION · 24 MIN READClassic newspaper serif. Carries serious authority.
Modern contrast to the classic body font.
Use Libre Baskerville at weight 700 for headings and weight 400 for body text. Use DM Sans at weight 400–500 for navigation, labels, and captions. Warm cream or off-white background. This is a journalism or research publication — serious, credible, built for long reading sessions.
Work that
moves people.
A creative studio specialising in brand, motion, and digital experience.
We believe the best design is the kind that changes how people feel without them knowing why. That's the goal. That's always been the goal.
Elegant geometric sans. Strong personality without loudness.
Flowing, calligraphic. Creates beautiful contrast with Raleway.
Use Raleway at weight 700 in uppercase for headings. Use Crimson Pro in italic at weight 300 for subheadings and body text. Dark purple background (#1C1528 or similar). This is a creative studio or artist portfolio — dramatic contrast, strong visual personality.
Slow coffee,
made right.
Every bag is roasted to order in our south London railway arch. We source single-origin beans from farms we visit every year — because the story of where your coffee comes from is the most interesting part.
SHOP SINGLE ORIGINSGeometric, clean, mid-century charm. Feels handcrafted.
Warm and readable. Grounds the geometric headings.
Use Josefin Sans at weight 700 in uppercase with wide letter spacing for all headings. Use Lora at weight 400 for body text and product descriptions. Warm cream or linen background. This is an artisan food/drink or lifestyle brand — handcrafted feel, story-driven.
Learn anything.
Actually remember it.
Courses designed by practitioners, not academics — built to stick.
We've spent a decade studying how people actually retain information. The answer isn't longer content — it's better structure, more examples, and the right spacing between concepts. That's what we build.
Friendly, rounded geometric. Approachable authority.
Classic, scholarly. Signals depth and intellectual seriousness.
Use Poppins at weight 700 for headings and weight 500 for subheadings and UI. Use EB Garamond at weight 400 for body text and long-form reading. White or very light background. This is an education or knowledge platform — approachable but intellectually credible.
Your data.
Your edge.
Real-time analytics for trading teams who move faster than markets.
Processing 4 billion data points per second, our engine identifies patterns 340ms faster than the industry average — and the gap is growing.
REQUEST A DEMO →Quirky geometric with monospace DNA. Signals data + precision.
Light serif softens the technical edge. Unusual and memorable.
Use Space Grotesk at weight 700 for headings and weight 400 for labels/navigation. Use Spectral at weight 300 for body paragraphs. Dark navy background (#0A1628). This is a fintech or data company — precise, intelligent, technical credibility is the priority.
On the nature
of good taste.
A weekly essay on design, culture, and the quiet decisions that shape experience.
Taste is not innate. It is trained, slowly, by paying attention — by asking why something works or doesn't, and by caring enough about the answer to sit with it for longer than is comfortable. This is a newsletter about that practice.
ISSUE 42 · JUNE 2026Expressive, high-contrast. Classic publishing energy.
The best complement to Playfair — calmer, designed for reading.
Use Playfair Display in italic at weight 700 for headings. Use Source Serif 4 at weight 400 for body text. Add IBM Plex Mono for issue numbers, dates, and metadata labels. Warm cream background. This is an essay or newsletter — classical publishing aesthetic, long-form reading experience.
Get a live preview before you commit
Every pairing above can be previewed for your brand before a single line is changed on your site. Because Ullbek knows your brand name, color palette, and content, it can render a font preview in the chat that shows the pairing in your context — not a generic example.
Preview fonts in the chat
Before changing anything, show me a preview of pairing #2 (Playfair Display + DM Sans) and pairing #4 (Nunito + Lora) — rendered with my actual brand name and a short paragraph of my homepage copy. I want to compare them before choosing.
Request a full demo page
Create a font demo page showing Fraunces + Source Serif 4 in use — with a hero headline, a paragraph of body text, a subheading, and some label elements. I want to browse the actual rendered page before we apply it sitewide.
Ask for a completely custom suggestion
I don't see a pairing that feels quite right. My brand is [describe your brand in 2–3 words]. Suggest three font pairings from Google Fonts that fit, preview them in the chat, and explain why each one works for my brand voice.