Font Pairing Suggester
Twelve typeface pairings that work, and why each one does.
- Free
- No signup
- Nothing uploaded
- No watermark
Playfair Display + Source Sans Pro
A high-contrast display serif against a neutral sans. The contrast between the two is what makes the heading read as a heading.
font-family: 'Playfair Display', Georgia, serif / 'Source Sans Pro', system-ui, sans-serif;
Inter + Inter
One family across both roles, separated by weight and size rather than by typeface. Fewer files, and it never looks mismatched.
font-family: Inter, system-ui, sans-serif;
Fraunces + Inter
A soft-edged serif with real personality, kept legible by a plain body face.
font-family: Fraunces, Georgia, serif / Inter, system-ui, sans-serif;
Space Grotesk + IBM Plex Sans
A geometric sans with unusual letterforms, grounded by a humanist one that is easier to read at length.
font-family: 'Space Grotesk', sans-serif / 'IBM Plex Sans', system-ui, sans-serif;
Libre Baskerville + Lato
A book serif for headings and an open sans for the text. The pairing every newspaper site converges on.
font-family: 'Libre Baskerville', Georgia, serif / Lato, system-ui, sans-serif;
Oswald + Merriweather
A condensed sans that fits long headlines on one line, with a serif sized for reading below it.
font-family: Oswald, sans-serif / Merriweather, Georgia, serif;
DM Serif Display + DM Sans
Designed as a family, so the proportions already agree. Safe when you have no time to test.
font-family: 'DM Serif Display', serif / 'DM Sans', system-ui, sans-serif;
Archivo Black + Roboto
Very heavy display weight against a completely neutral body. All the personality sits in the heading.
font-family: 'Archivo Black', sans-serif / Roboto, system-ui, sans-serif;
Cormorant Garamond + Proza Libre
A delicate old-style serif that needs large sizes, with a sturdier face carrying the small text.
font-family: 'Cormorant Garamond', Georgia, serif / 'Proza Libre', system-ui, sans-serif;
JetBrains Mono + Inter
A monospace heading signals a technical document immediately. Use sparingly and never for body text.
font-family: 'JetBrains Mono', monospace / Inter, system-ui, sans-serif;
Georgia + system-ui
Both are already on every device. Nothing to load, nothing to lay out twice, no font-loading flash.
font-family: Georgia, serif / system-ui, -apple-system, sans-serif;
Bebas Neue + Open Sans
Tall condensed caps for short headings only — it has no lowercase worth using.
font-family: 'Bebas Neue', sans-serif / 'Open Sans', system-ui, sans-serif;
How to Use the Font Pairing Suggester Online
Twelve typeface pairings that work, with the reason each does. The reliable principle is contrast with a shared quality — a serif heading over a sans body works because the forms differ while the proportions agree. Two similar faces read as a mistake rather than a pairing.
No software to install Free Works on any device
Step-by-Step Guide to Using the Font Pairing Suggester
-
1. Fill in the fields with your own values
-
2. The result updates as you type, with the reasoning shown alongside it
-
3. Copy what you need — everything is worked out in your browser
What is the Font Pairing Suggester?
Twelve typeface pairings that work, with the reason each does. The reliable principle is contrast with a shared quality — a serif heading over a sans body works because the forms differ while the proportions agree. Two similar faces read as a mistake rather than a pairing.
Why Use Colour and CSS Tools?
Choosing colours that work together and writing CSS for shadows, gradients or grids takes a lot of trial and error. These tools show a live preview as you adjust, then hand you the colour codes or CSS to copy.
“See it first, then copy the code.”
- Live previews while you adjust
- Codes in HEX, RGB and HSL
- CSS ready to paste
- Designs checked for colour blindness
- Palettes that work together
- Readable text checked for contrast
- Print colours in CMYK
- Colours taken from photos
Popular Uses for Colour Pickers and CSS Generators
Designers and site owners use these for the same handful of jobs.
- Brand colours Build a palette around a logo colour with matching tints, shades and accents.
- Readable buttons Check that text on a coloured button passes the WCAG contrast ratio.
- Card shadows Adjust a box shadow until a card looks right, then copy the CSS.
- Page layouts Set up a CSS grid or flexbox layout visually instead of guessing values.
- Print artwork Convert screen colours to CMYK and check bleed before sending a flyer to print.
- Colours from a photo Pull the main colours out of a product photo to match a web page.
- Colour blind checks See how a chart or poster looks to people with different kinds of colour blindness.
- Button styles Design a gradient, glass or soft 3D style button and take the code.
What You Can Do with the Font Pairing Suggester
Generation happens on your own machine, at your machine's speed
Works in the unit the job is actually specified in — millimetres, points, pixels or inches
Shows the result at true proportion rather than as an abstract number
Why Use ToolXkit for Font Pairing Suggester?
Your files stay with you
Everything runs inside your browser. Nothing you open or type is uploaded to a server.
Free, with no catch
No signup, no watermark and no daily limit on how often you use it.
Fast
Results appear in seconds, because nothing has to travel over the internet and back.
Works on any device
Use it on a computer, tablet or phone, in Chrome, Edge, Firefox or Safari.
Nothing to install
No app, no extension and no desktop program. Open the page and start.
Made for real people
Plain words and clear buttons, built by one developer who wanted tools like this to exist.
Design Tools for Different Users
Designers
Build palettes, test contrast and convert colours between HEX, RGB, HSL and CMYK.
Front-end developers
Generate CSS for gradients, shadows, animations and layouts and check it in a preview.
Design students
Learn how colour harmony and CSS properties work by changing them live.
Small business owners
Pick consistent brand colours for a shop sign, website and social posts.
Print designers
Convert colours for print and work out bleed, trim and pixel sizes.
Accessibility testers
Check contrast ratios and preview designs through different types of colour blindness.
Best Times to Pick Colours and Write CSS
These tools help when you are:
- Starting a new brand or logo
- Fixing text that is hard to read
- Styling a button or card
- Preparing a flyer for print
- Matching a colour from a photo
- Laying out a page with grid
- Checking a chart for colour blindness
- Converting a HEX code to RGB
Frequently Asked Questions
Answers to common questions about this tool.
Do I need to install anything to use the Font Pairing Suggester?
No. Font Pairing Suggester runs entirely in your browser — there is nothing to download, no extension and no desktop program. It works the same on Windows, macOS, Linux, Android and iPhone.
Is it safe to use the Font Pairing Suggester online?
Safer than the usual alternative, yes. Most online tools upload your file to a server you know nothing about, where it sits until someone deletes it. Here the file never leaves your device — the processing happens in the page itself, so there is no server copy to leak, retain or sell.
Can I copy the CSS straight into my project?
Yes. The generators give plain CSS that works in current browsers. Copy it into your stylesheet, then adjust class names or values to fit the rest of your design.
Is Font Pairing Suggester free for commercial work?
Yes. The colours, palettes and CSS you make are yours to use in client projects, products or anything else, with no credit required and no fee.
Why do my screen colours look different when printed?
Screens mix light in RGB, while printers mix ink in CMYK, and some bright screen colours cannot be printed. Convert to CMYK and ask your printer for a proof before a large print run.
What contrast ratio should my text have?
WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. The Colour Contrast Checker shows whether your pair passes, so you can adjust before publishing.
Do I need to sign in to use Font Pairing Suggester?
No. There is no account to create. Open the page, adjust the settings and copy the result. Your choices are worked out on your own device and never leave it.
Further reading
- Understanding contrast minimum (W3C WCAG) The W3C explanation of the contrast ratio that keeps text readable for people with low vision.
- CSS color values (MDN) How colours are written in CSS, from HEX and RGB to HSL and newer formats.
- Web colors (Wikipedia) The named colours browsers know and how HEX codes map to red, green and blue.
More Colour & CSS Tools
Other free tools for the same kind of job.
- Analogous Colour Generator Find the neighbouring colours that sit either side of yours. Open tool
- Bleed and Trim Calculator Work out the document size, safe area and pixel dimensions for print. Open tool
- CMYK to HEX Converter Turn CMYK print values into a hex colour code. Open tool
- Colour Blindness Simulator See roughly how a colour looks to someone who is colour blind. Open tool
- Colour Contrast Checker Check text against a background for WCAG AA and AAA. Open tool
- Colour Mixer Mix two colours and see every step between them. Open tool
- Colour Name Finder Find the closest named CSS colour to any code. Open tool
- Colour Palette Generator Build a matching palette from one colour you already like. Open tool
- Colour Picker Pick a colour and read it as HEX, RGB, HSL, HSB and CMYK at once. Open tool