Design Your Way

Montserrat Font Pairing

This Montserrat font pairing tool shows Montserrat with 15 partner fonts in real layouts: an article, a landing page, pricing cards or a dashboard. Edit the text, swap the roles, switch to dark mode, then copy the code.

Designer
Julieta Ulanovsky and team
License
SIL Open Font License
Weights
100 to 900, variable
Pairings
15 tested

Use this pairing

Every Montserrat pairing side by side

Your heading text in each pair's heading font: Montserrat heads every pairing except Playfair Display, which takes the headings over Montserrat body text.

    Montserrat is the loud one in almost any pair. It wants the headings, so the second font's job is to sit underneath and handle the paragraphs without pulling attention. Lora or Merriweather do that well as serifs. Open Sans does it if you'd rather keep the whole page sans serif.

    When I test a partner, I look at x-height first, because a small lowercase next to Montserrat's big one looks off right away. After that it's mostly stroke contrast, and whether the font is still comfortable to read at body size.

    Cost doesn't come into it. Julieta Ulanovsky designed Montserrat, a geometric sans serif, and it was released through Google Fonts in 2011 under the SIL Open Font License, so a pair built around it goes on the web with no license fee.

    Loading does matter, though. Web fonts load on around 87% of websites (HTTP Archive Web Almanac, 2024), and the partner's file size and fallback behavior affect the page just as much as Montserrat's do. I count them as part of the pairing choice.

    How to use the Montserrat font pairing tool

    This Montserrat font pairing tool sets Montserrat next to 15 partner fonts from Google Fonts and shows each pair in layouts you actually ship. Montserrat leads in every pairing except Playfair Display, where it moves to the body text. Every font on the page is free and licensed under the SIL Open Font License.

    1. Pick a partner from the list. Filter by serif, display or sans if you already know the mood you want.
    2. Switch the layout between Specimen, Article, Landing page, Pricing cards and Dashboard. Montserrat's wide letters fill a dashboard header fast, so check the narrow layouts too.
    3. Type your own heading and body text. Real copy shows problems that sample text hides, like a long headline that wraps badly in a wide font.
    4. Swap roles to put the partner on the headings and Montserrat on the body text. Display fonts stay on headings, so the button turns off for them.
    5. Check dark mode and adjust the heading and body sizes.
    6. Copy the code as a Google Fonts link, plain CSS or a Tailwind v4 theme.

    Montserrat pairings at a glance

    Partner fontTypeHeading weightWorks as body text
    LoraCalligraphic serif700Yes
    MerriweatherScreen serif700Yes
    Playfair DisplayHigh-contrast display serif700No
    Open SansHumanist sans700Yes
    Source Sans 3Neutral sans700Yes
    Libre BaskervilleTransitional serif700Yes
    PT SerifText serif700Yes
    RobotoNeo-grotesque sans700Yes
    InterNeutral interface sans700Yes
    KarlaGrotesque sans700Yes
    Work SansGrotesque sans700Yes
    DM SansGeometric sans700Yes
    NunitoRounded sans700Yes
    RalewayElegant sans800Yes
    PoppinsGeometric sans700Yes

    What makes Montserrat easy or hard to pair?

    Width explains most of it. Those wide, loud geometric letters mean nearly any calmer font looks different next to them, which makes pairing easy. The same width makes Montserrat fight other geometric sans fonts. And it's one of the most used families on Google Fonts, so the obvious pairs have been done many, many times.

    Sample headline in Montserrat 700 above a paragraph in Lora, the first pairing in the Montserrat tool

    Some background, with sources. Ulanovsky started the project in 2010, and it was released through Google Fonts in 2011 (Montserrat repository).

    • 9 weights, Thin through Black. Italics came in 2015 (Wikipedia, Montserrat repository).
    • Jacques Le Bailly redrew the Latin set in 2017 (Montserrat repository)
    • Version 9.000 has 2,731 glyphs, up from 1,968 (Montserrat repository)
    • Everything ships under the SIL Open Font License 1.1

    Design traits and proportions

    Ulanovsky began the project in 2010 as a postgraduate student of typeface design at the University of Buenos Aires. It draws on old posters and signs in the city's Montserrat neighborhood, mostly lettering from the 1920s to the 1950s (Wikipedia).

    What came out is a geometric sans serif with wide round capitals, uniform strokes and strong verticals. People compare it to Gotham constantly, and Montserrat got popular partly as a free alternative to Gotham and Avenir (Wikipedia).

    For pairing, that width plus the even stroke weight leaves a second geometric sans almost no room to look different. Put serifs next to it, or stroke contrast, or narrower letters, and the partner reads as its own voice instead of a near-copy.

    Weights, italics and the variable axis

    Montserrat has nine weights, from Thin to Black (Wikipedia). The repository added italics in 2015, and nine weights in roman and italic make 18 styles, so I'd plan around nine weights and 18 styles.

    Honestly, the count matters less than which weights you can actually use in a pair:

    • Thin and ExtraLight (100, 200) belong at display sizes only
    • Regular to SemiBold (400 to 600) for subheads, labels and short text
    • Bold to Black (700 to 900), headlines

    Version 8.000 added hand hinting by Mike Duggan to the variable font. Load one variable font file instead of nine static ones and you can pick in-between weights too, not just the nine named ones.

    Sister families

    Two sister families are built on Montserrat's skeleton. That makes them the lowest-risk partners you'll find.

    • Montserrat Alternates, with alternate letterforms meant for display text
    • Montserrat Underline, which has the underline built in and replaced Montserrat Subrayada in version 9.000

    According to the version 9.000 changelog, Underline is fully synchronized with the main family and with the Alternates. Mixing them gives you some variety while the page still has only one typeface.

    Is Montserrat a heading font or a body font?

    Headings, mostly. It can carry short blocks at moderate weights, but long paragraphs belong to the partner.

    Most pairing guides say the same: Bold or Black for headlines, a calmer font for paragraphs. Not everyone listens.

    Puerto Rico's government made Montserrat its body-text typeface in January 2021, according to Wikipedia. Mexico's Graphic Identity Manual used it as the official font from 2018 to 2024. Both are controlled institutional layouts, and that's where body use holds up. A long-form blog is a different case.

    In the heading role, stick to SemiBold through Black at large sizes, in sentence case or all caps. Navigation, buttons and labels count as headings here too.

    As body text it's Regular or Medium only, and only for captions, intros and short blocks. Not articles.

    All-caps headings usually need a little extra tracking to stay open.

    If Montserrat does end up carrying short body text, give it generous leading. Wide letters with even strokes look dense when the lines sit close together.

    My rule is one role per page. When paragraphs dominate the layout, Montserrat stays in the headings and the partner does the reading.

    How to choose a partner font for Montserrat

    Go calmer and more textured than Montserrat. Keep it to two families and let weight and size handle the rest of the hierarchy. A serif body font passes that test, and so does a neutral humanist sans.

    Contrast first, similarity second

    Montserrat is assertive and geometric, so the partner should bring what it doesn't have. Serifs are the obvious answer, though stroke modulation or some humanist warmth works too. That's the standard logic behind pairing fonts in general, nothing Montserrat-specific.

    Similarity is the weaker route. Another geometric sans next to Montserrat leaves two fonts doing one job, and the reader sees a mistake rather than a choice.

    If the tone is warm or editorial, use a serif for the body. For a clean product look a neutral humanist sans is fine, as long as weight is doing the contrast.

    Two families, matched x-height, matched mood

    Two families is the working limit. Typewolf's Site of the Day archive does list three-font stacks that include Montserrat (Bebas Neue, Montserrat and Bitter, for one), and they only work because each font has a narrow job.

    Check x-height before committing. When the partner's lowercase is much smaller than Montserrat's at the same point size, body text looks undersized under the headings.

    Google's description of Merriweather mentions a very large x-height and sturdy serifs, and both hold up beside Montserrat's wide letters. A light serif with a small x-height, like Cormorant Garamond, looks fragile at body sizes.

    Mood is the last filter. Lifestyle brands can take calligraphic warmth. Publishing tends to want sturdy serifs, and for software I'd just go with a neutral sans.

    Which fonts pair best with Montserrat?

    On the serif side, Lora and Merriweather are the safest picks, with Source Serif close behind. For sans, it's Open Sans, Roboto or Source Sans 3. Serifs give you contrast; the sans group gets you a fully modern page.

    PartnerTypeToneBest use
    LoraContemporary serifWarm, literaryBlog and editorial body text
    MerriweatherScreen serifSturdy, plainLong body text
    Playfair DisplayTransitional serifElegant, high contrastLarge headlines, Montserrat on labels
    Open SansHumanist sansNeutral, friendlyAll-sans body text
    Source Sans 3Humanist sansNeutral, technicalInterfaces and documentation
    Six pairings with Montserrat: Lora, Merriweather, Playfair Display, Open Sans, Source Sans 3, Libre Baskerville

    Serif partners

    Merriweather is the workhorse. Google's description lists a very large x-height, slightly condensed letters and open forms, all aimed at reading on screens.

    Lora is softer. Google Fonts calls it a contemporary serif with calligraphic roots and moderate contrast, and it suits lifestyle and editorial layouts.

    Libre Baskerville is more formal than Lora. It's based on the 1941 American Type Founders Baskerville and was made for body text, typically at 16px (Google Fonts).

    If the site already uses Source Sans, Source Serif 4 is the natural pick. Adobe's open source serif has moderate contrast and feels quiet, a little corporate.

    Cormorant Garamond is light and has a small x-height, so I'd save it for large intro text. Typewolf's archive does list Cormorant and Montserrat together on featured sites.

    Playfair Display flips the usual setup. Google Fonts calls it a transitional design, and its thick and thin strokes make it a headline font, so Playfair takes the headings and Montserrat moves to labels, navigation and buttons.

    Sans serif partners

    Montserrat ranked third on Google Fonts with over 2.7 trillion views as of September 2023. Wikipedia's current entry lists it fourth.

    That ranking matters here. Roboto and Open Sans both sit above Montserrat in the 2024 Web Almanac's family table, so pairing it with either one gives you a look people have seen a lot.

    Open Sans is a humanist sans by Steve Matteson and stays neutral under Montserrat's headings. Roboto feels slightly more mechanical as body text. Source Sans 3 (Paul D. Hunt, Adobe, 2012, renamed from Source Sans Pro) reads a bit more technical than either.

    I lean toward a serif partner because it looks less templated. Sans pairs work, but weight contrast has to do all the lifting.

    Six more pairings with Montserrat: PT Serif, Roboto, Inter, Karla, Work Sans, DM Sans

    Which Montserrat pairing fits a website, logo, resume or presentation?

    The partner font does the most work on the web, where you need a clear role map. A logo usually needs Montserrat alone. For resumes and slides, it comes down to whether the file leaves your computer.

    Websites and landing pages

    I map font roles to HTML elements before touching sizes, since it keeps the pair consistent across templates.

    • Montserrat Bold for h1 and h2
    • h3 and h4 in Montserrat SemiBold
    • Montserrat Medium on navigation, buttons and form labels
    • The partner in Regular for paragraphs, lists and captions

    That's three Montserrat weights and one partner weight. Not much to load.

    Logos and branding

    A logo rarely needs two families. Set the wordmark in Montserrat SemiBold or Bold and keep the partner for the tagline.

    Convert the wordmark to outlines in the final artwork, so the logo never depends on an installed font.

    WCAG 2.2 exempts text that is part of a logo or brand name from its contrast requirements (W3C). So wordmark weight is a branding decision, not a compliance one. Check it at favicon size anyway, because thin strokes disappear there.

    Write the pair into a brand style guide so every designer picks the same weights.

    Resumes and business cards

    Montserrat goes on the name and section headings, and the body lines go in the partner. A resume has so little text that one weight of each is plenty.

    Export to PDF before sending. The OFL FAQ says embedding an OFL font in a document doesn't change the document's license, so the file keeps Montserrat on any reader's screen.

    Stuck on the partner? A list of fonts for resumes narrows it down fast.

    Presentations

    Slides are the one place I'd let Montserrat run alone.

    Short lines at large sizes suit its wide letters, and three weights of one family give a clean hierarchy. The risk is the other person's machine. Open the deck on a computer without Montserrat and it swaps in another font, which changes the line breaks.

    Export to PDF, or embed the font where the app allows it. The same OFL embedding rule applies.

    Product screen with a Montserrat heading, and Merriweather labels, fields, a table and buttons

    When does a Montserrat pairing fail?

    Usually the partner is another geometric sans, or someone set long paragraphs in Montserrat. Thin weights at small sizes cause trouble too. Then there's the variable font misbehaving in certain Adobe apps, and the pair that's so familiar it just reads as a template.

    Partners that clash

    Poppins and Raleway are the usual offenders. Poppins is another geometric sans with round forms. Raleway sits close enough to Montserrat that the two read as an accident.

    It can work when weight does the separating, for example a Poppins Light paragraph under a Montserrat Black headline. At similar weights they compete.

    Weight and size limits

    Thin and ExtraLight shouldn't go below display size. Strokes break up on low-resolution screens, and a contrast ratio measures color, not stroke thickness, so passing a contrast check won't save them.

    Long paragraphs in Montserrat are the other common one. Wide letters fit fewer characters per line, so paragraphs run long and look dense.

    And Black at small sizes closes up the counters. Keep it for large headlines.

    Adobe apps and the variable font

    The Montserrat repository lists two known issues. Variable fonts may not display correctly in certain versions of Adobe CC apps, and the maintainers recommend the static files for a more consistent result.

    The second one affects bolder weights. Some glyphs have known appearance problems because of limits in fontmake, the tool that generates the fonts.

    Neither note mentions browsers. They're about Adobe apps and the build tool, so for print or logo work in Adobe software, install the static files.

    When overuse becomes the problem

    HTTP Archive's 2024 Web Almanac puts Montserrat on 3.3% of desktop pages and 3.9% of mobile pages, sixth in its font family table.

    Google Fonts' own ranking places it higher, but it counts views. The Almanac counts pages that use a family, Google counts views served, so both numbers can be true.

    Design guides like to call Montserrat overused. The page-level data says popular, not ubiquitous. I think the template look comes mostly from the default pair (Montserrat plus Open Sans) rather than from Montserrat itself.

    If your pair still feels generic, change the partner first. If that doesn't fix it, try a close alternative to Montserrat.

    Montserrat next to Karla at one font size, then with font-size-adjust matching the lowercase heights

    How to load, license and test a Montserrat pairing

    From Google Fonts, request only the weights you use. Set a fallback stack that matches Montserrat's proportions, then test the pair at real sizes against WCAG contrast thresholds. Licensing is the easy part, since the SIL Open Font License covers commercial use and self-hosting.

    1. Assign roles: Montserrat for headings and labels, the partner for paragraphs
    2. Request only the weights in use (600 and 700 for Montserrat, 400 for the partner)
    3. Add display=swap to the font URL, or self-host the files
    4. Write a fallback stack that ends in a generic family
    5. Set sizes and line height on a type scale, headings first
    6. Test at phone width and check contrast

    Loading and fallbacks

    A Google Fonts request for a pair looks like this: https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Lora:wght@400&display=swap. Each family gets its own parameter, and the weights go after the axis name.

    Google's documentation says the display parameter defaults to auto and that another value is usually appropriate. If you need the link tag itself, there's a walkthrough of using Google Fonts.

    With swap, fallback text shows at once and then switches to Montserrat. That switch can move the layout. Optional has no swap period, so nothing jumps, but on a slow connection Montserrat may never appear during that visit (MDN).

    Write the stack as font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; and always end on a generic family.

    MDN documents font-size-adjust: from-font, which takes the size ratio from the first available font and, by default, matches by x-height. There's a cap-height option too, which suits all-caps headings. Browsers without support render the fallback at its default scale.

    Variable fonts are mainstream now. The 2024 Web Almanac finds them on 33% of desktop pages and 34% of mobile pages, up from 28% and 29% in 2022. If you need many Montserrat weights, one variable file is a normal choice. For two or three weights, request only those.

    License terms

    Commercial use is allowed, in print, software and web projects.

    For web embedding, the OFL FAQ recommends @font-face and says it counts as distribution, which the license explicitly allows. Self-hosting falls under that.

    What you can't do is sell the files on their own. Modified versions have to be renamed only if the original declares Reserved Font Names. Montserrat's OFL.txt declares none. Some partners do, though (Source Sans 3 reserves the name "Source"), so check each family's OFL.txt before editing the files.

    Paid partners work differently, and a primer on font licensing helps when the partner isn't on Google Fonts.

    Testing before launch

    WCAG 2.2 criterion 1.4.3 sets a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. W3C defines large text as 18 point, or 14 point bold, which is about 24px and 18.7px in CSS.

    The large-text rule names bold, and SemiBold (600) sits somewhere between regular and bold. I'd check SemiBold headings against 4.5:1 to be safe.

    Block the web font in DevTools, or change the font-family there, to see the fallback and confirm the layout holds. Then mock the pair up in Figma or Canva at real body size and look at it at phone width before it ships.

    Montserrat in weights 300, 400, 500, 600, 700, 900, with the weights used for headings and body text in this tool marked

    Common Questions About Montserrat Font Pairing

    Is Montserrat better than Gotham?

    Mostly they differ in license, not quality. Montserrat often gets compared to Gotham, and part of why it spread is that it's a free alternative.

    Use Montserrat if you need free web embedding. If the brand already licenses Gotham, keep it.

    Which fonts are similar to Montserrat?

    Gotham and Avenir are the two it most often replaces. Among free sans fonts, Poppins and Raleway have a similar feel.

    That doesn't make them good partners. Next to Montserrat they compete with it instead of contrasting.

    Can you pair Montserrat with itself?

    For short text, yes. Make a big weight jump, Black or Bold headings over Regular lines, and hand long paragraphs to a second family.

    Montserrat Alternates also adds variety without bringing in a new typeface.

    Does a script or monospace font work with Montserrat?

    In a small role, sure. A script font can take one accent line like a pull quote or a menu title. Monospace suits code or data labels.

    Keep the main pair to two families so the extra font never carries body text.

    Which Montserrat Font Pairing Should You Test First?

    Start with Montserrat Bold headings and one partner family under them. Lora if you want a serif, Source Sans 3 if you want a humanist sans. Get that pair right before testing any other.

    Doing it in order saves rework. Lock the heading weight first, then match the partner's x-height and mood, and finally check the pair on a phone and in print.

    Weight comes first because size, tracking and leading values all depend on it.

    The trade-off is distinctiveness. A strict two-family pair reads as clean and consistent, and it also looks a lot like other Montserrat sites.

    Verified November 2, 2026. A new Montserrat release that changes the weight range, or an Adobe fix for the variable font issue, would remove the static-file workaround.

    Other font pairings

    Same idea, different starting font. Each guide lists tested partners with notes on where they work.

    More on typography