ES
Home › Developer Tools › Font Pairing Tool

Font Pairing Tool

Find a heading and body font that work together. Start from 28 curated Google Font pairs or mix your own from 54 popular families, preview them on realistic layouts, fine-tune size, weight and line height, and copy the embed code and CSS.

Last updated:

Curated pairs

Paper

Tip: click any text in the preview to edit it.


    

      
      
      
    

  

  

  Advertisement
  



  










  Advertisement
  





How to use the Font Pairing Tool


  1. Pick a curated pair from the row at the top, or filter by style first.
  2. Or choose your own heading and body fonts from the drop-downs.
  3. Switch the sample layout to see the pair in an article, a landing page, product cards or a type scale.
  4. Fine-tune heading weight and scale, body size and line height; edit the sample text if you like.
  5. Copy the code: paste the <link> (or @import) and the CSS rules into your site, or copy a link to share the pairing.


Proven ways to pair fonts




ApproachHow it worksExample in the tool



Serif heading + sans bodyClassic contrast: expressive headlines, neutral reading textPlayfair Display + Source Sans 3


Sans heading + serif bodyModern look with a bookish, comfortable body for long readsMontserrat + Merriweather


One superfamilySerif and sans designed together share proportionsRoboto Slab + Roboto, DM Serif Display + DM Sans


Weight contrast in one familyBlack or heavy headings with the regular cut for textArchivo Black + Archivo


Display face + quiet bodyA strong personality used only at large sizesBebas Neue + Lato, Abril Fatface + Poppins


Monospace accentSignals code or data, works for developer brandsJetBrains Mono + Inter






Readability checklist for the body font


    

  • Size: 16 to 18px is a comfortable default on screens; small fonts with a low x-height may need 18px or more.
    • 

  • Line height: around 1.5 to 1.7 for paragraphs; headings look better tighter, around 1.1 to 1.25.
    • 

  • Line length: aim for roughly 50 to 75 characters per line, for example with max-width: 65ch.
    • 

  • Distinct letters: check that capital I, lowercase l and the digit 1 look different, and that numbers are easy to read.
    • 

  • Weights: load only what you use, typically regular and bold for the body and one weight for headings.
    • 




Loading fonts efficiently


The preconnect hints let the browser open connections to the font servers early. display=swap shows fallback text immediately and swaps in the web font once it arrives, so visitors never stare at invisible text. Fallback stacks in the CSS rules (for example Georgia, serif after a serif web font) keep the layout close to the final design while fonts load.



Frequently asked questions


What makes two fonts pair well?
Good pairs combine contrast with a shared structure. Contrast, such as a serif heading with a sans-serif body or a heavy display face with a light text face, creates hierarchy. Similar x-heights, widths or construction keep the page calm. Two fonts that are almost but not quite the same usually look like a mistake.


How many fonts should a website use?
Two families are enough for most sites: one for headings and one for body text, possibly the same family in different weights. A third font, often a monospace for code or a script for a logo, should be used sparingly. Each extra family and weight adds download size.


Should the heading or the body font be chosen first?
Usually the body font, because readers spend most of their time in paragraphs. Pick a body face that is comfortable at 16 to 18 pixels with clear letter shapes, then choose a heading face that adds personality.


How do I add the fonts to my website?
Paste the <link> tags into the <head> of your HTML (or the @import line at the top of your CSS), then add the CSS rules that set font-family for body and headings. The generated URL only requests the weights you use, which keeps loading fast.


What is a modular type scale?
A set of sizes where each heading level is the previous size multiplied by a fixed ratio, such as 1.25 (major third) or 1.333 (perfect fourth). With a 17px body and a ratio of 1.333, H3 is about 22.7px, H2 30.2px and H1 40.3px. It gives a consistent rhythm without guessing sizes.


Are Google Fonts free for commercial use?
The fonts in the Google Fonts library are released under open licenses, mostly the SIL Open Font License, which allows use in personal and commercial projects. Check each family's page on Google Fonts if you want to read its specific license.


Why do I see fallback fonts in the preview?
The tool loads fonts from Google Fonts when you pick them. If you are offline or a browser extension or network blocks fonts.googleapis.com, the preview falls back to system fonts and shows a notice. The generated code is still correct.


Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.



Related tools



Font ViewerPreview TTF, OTF, WOFF and WOFF2 fonts with sample text, waterfall, glyphs and metadata.CSS @font-face GeneratorTurn font files or URLs into ready-to-paste @font-face rules with weights, styles and a preview.Font Size ConverterConvert font sizes between px, pt, em, rem, % and vw, with a 6–72px chart and CSS.CSS Clamp GeneratorTurn min/max sizes and viewport widths into a fluid CSS clamp() value in rem and vw.Text to SVG PathTurn text in any Google or uploaded font into SVG path outlines for Cricut, laser and logos.Open Graph PreviewPaste OG tags and preview how links look on Facebook, X and LinkedIn.YouTube Embed Code GeneratorCreate responsive YouTube embed code with start time, autoplay, loop and privacy mode.CSS Box Shadow GeneratorDesign layered CSS box shadows with a live preview, presets and one-click Copy CSS.CSS Border Radius GeneratorRound each corner, draw elliptical 8-value radii or random blob shapes and copy the CSS.CSS Button GeneratorDesign CSS buttons with gradients, borders, shadows and hover and active states, then copy the code.CSS Flexbox GeneratorBuild flexbox layouts visually: set container and item properties, then copy the CSS and HTML.Twitter Card GeneratorCreate X / Twitter Card meta tags with Open Graph fallbacks, character counters and a live preview.CSS Grid GeneratorDraw CSS grid layouts: set tracks and gaps, drag to name areas, then copy the CSS and HTML.PX to REM ConverterConvert px to rem or em and back, with a 1-100px table and a whole-CSS converter.Glassmorphism CSS GeneratorDesign frosted-glass UI cards with blur, transparency and border sliders, then copy the CSS.CSS Text Shadow GeneratorLayer CSS text shadows with a live preview and neon, 3D, outline and retro presets.HTML Editor (Live Preview)Write HTML, CSS and JavaScript and see a live, sandboxed preview as you type.HTML to JSX ConverterConvert HTML to valid React JSX: className, htmlFor, style objects, self-closing tags and events.CSS Clip-Path GeneratorDraw CSS clip-path shapes by dragging points: polygons, circle, ellipse and inset. Copy the CSS.CSS Animation GeneratorCreate CSS keyframe animations from 23 presets with live preview, timing controls and Copy CSS.CSS Triangle GeneratorMake CSS triangles in 8 directions with the border trick or clip-path. Set size and color, copy CSS.CSS Loader GeneratorPick from 14 pure CSS spinners and loaders, set color, size and speed, then copy the HTML and CSS.Cubic Bezier GeneratorDrag the control points to design a CSS easing curve, compare it with linear and copy cubic-bezier().CSS Filter GeneratorAdjust blur, brightness, contrast, hue, sepia and drop-shadow on an image and copy the CSS filter.CSS Specificity CalculatorCalculate CSS selector specificity (a, b, c), including :is(), :not(), :has() and :where(), and compare.Google Maps Embed GeneratorTurn an address or coordinates into responsive Google Maps iframe embed code, no API key.Neumorphism CSS GeneratorDesign soft UI neumorphic shapes with live preview and copy the box-shadow CSS.SVG Wave GeneratorMake layered SVG waves for section dividers and export SVG, PNG or a CSS background.SVG Blob GeneratorGenerate random organic SVG blob shapes with gradients and export SVG, PNG or CSS clip-path.CSS Media Query GeneratorBuild @media rules for widths, orientation, dark mode and hover, or get framework breakpoints.CSS Scrollbar GeneratorStyle scrollbars: width, colors, radius and hover, with ::-webkit-scrollbar and scrollbar-color CSS.CSS Sprite GeneratorPack many icons into one sprite sheet PNG and get CSS classes with background-position.CSS Text Gradient GeneratorMake gradient text with background-clip:text: color stops, angle, font preview and fallback CSS.CSS Toggle Switch GeneratorDesign pure-CSS toggle switches: size, colors, shape and animation. Copy accessible HTML + CSS.CSS Tooltip GeneratorBuild pure CSS tooltips: position, arrow, colors, padding and animation. Copy HTML and CSS.HTML Form BuilderDrag and drop form fields with labels and validation, then copy accessible HTML and CSS code.Iframe GeneratorCreate iframe embed code: size or responsive ratio, border, allow, sandbox, lazy load, live preview.PX to VW ConverterConvert pixels to vw and vh for any viewport size, and vw/vh back to px, with breakpoint tables.SVG to JSXTurn SVG code into a clean React component: camelCase attributes, style objects, TypeScript.Tailwind CSS Cheat SheetSearchable Tailwind class to CSS reference with live previews, class decoder and color palette.Web App Manifest GeneratorCreate a PWA manifest.json and every app icon size from one image, downloaded as a ZIP.CSS Background Pattern GeneratorMake pure-CSS stripes, dots, checkerboard, zigzag and grid backgrounds and copy the code.CSS Color Filter GeneratorTurn a HEX color into a CSS filter that recolors black icons and SVGs, with an accuracy score.CSS Gradient Animation GeneratorCreate animated gradient backgrounds: pick colors, angle and speed, preview live and copy the CSS.CSS Hover Effects GeneratorPick button, link and image hover effects, tweak colors and timing, and copy the HTML and CSS.CSS InlinerMove CSS from style blocks into inline style attributes so HTML emails render in every client.CSS Shape Divider GeneratorCreate wave, tilt, curve and triangle section dividers and copy the SVG, HTML and CSS.CSS Transform GeneratorRotate, scale, skew and translate an element with sliders and copy the CSS transform code.HTML Accessibility CheckerPaste HTML to find WCAG accessibility problems with impact level, the failing element and a fix.HTML Image Map GeneratorDraw clickable rectangle, circle and polygon hotspots on an image and get image map HTML.SVG ViewerOpen or paste SVG code to preview it live with zoom, backgrounds, size info and PNG export.Pathfinding VisualizerAnimate BFS, DFS, Dijkstra, A* and greedy search on a grid with walls, weights and mazes.SVG Path EditorEdit an SVG path d attribute visually: drag points, edit commands, convert, scale and minify.SVG to CSS Data URITurn SVG code into a small URL-encoded data URI for CSS backgrounds, with Base64 size comparison.



See all 52 Web, HTML & CSS Tools →