That said, if you find a sans serif with distinct letterforms (even without the serifs), don’t be afraid to experiment. We have some examples of how to use sans serifs in both body and header placements below. The Liberation superfamily was intended as an open-source substitute for many commonly used Windows fonts, such as Arial, Times New Roman and Courier New. The Serif and Sans versions make a smart font pairing, but there are other variations to play around with, too, including  Sans Narrow and Mono. The ever-popular serifed Minion Pro works perfectly as a headline font when coupled with the nimble sans-serif Super Grotesk for body copy. Together, these fonts serve to create an effortless sense of modern elegance.

That doesn’t mean you have to be scared when it comes time to mix-and-match fonts. It just means being mindful of how much friction exists within your font pairing as well as how much friction they can cause a site. You can use this font pair for news and entertainment sites with heavy mobile readership (i.e. younger readers). Montserrat will call their attention to the headlines while the readable body text will keep them engaged with the content, even as they have to keep scrolling. This artistic font would look great splashed against the walls of websites for designers, photographers, and other creators. Since images do much of the talking for you anyway, the lighter body text won’t be a problem since there won’t be a whole lot of text to apply it to.

by Alice Jackson Tweet – July 8, 2020 in Typography

Hence, the graphic design services will choose fonts with opposite styles that can complement each other well. What you don’t want is two typefaces that seem to “say” different things. A good font pairing includes typefaces with complementary shapes so that they bring attention to the message but don’t compete for attention. We can say that font combination is about setting fonts against each other. So, the designers will choose fonts that have opposite styles but can work together well. You can adjust the size of any text group using the sliding bar above each section.

Typ.io also offers a useful search feature, enabling you to filter websites by primary font, desired font type, and font availability. You can even see which font combinations are popular on different types of websites (e.g., blogs, portfolios, etc). These designers have heard your cries for help, and developed free tools to help you make better typeface pairings faster and more efficiently. Pairing fonts doesn’t have to be a lengthy guess-and-check process when you have the right tools at your fingertips. Designers must master this skill if they want to create exceptional designs that set them apart from their contemporaries. Script and sans-serif fonts can also be a winning combination.

Use fonts that have different tones

You’ll find some neat pairing options within superfamilies that have a couple of dozen different styles (at least) to play with. One area of web design that you might not be spending enough time thinking about, however, is font combinations. How about looking back at the 1920s with this typeface from designer Sol Hess for Monotype? Twentieth Century has an eye-catching Art Deco vibe (it’s subtle here, but the glamour is amped up in the Twentieth Century Std Poster MT variant).

Similarly, wedding photography businesses depend more on elegant fonts such as Roses, Anisha Script, Beautify, and Hunter River. Choose from a wide selection of popular web fonts and play around with the settings to find a group of fonts that work well together. Once you have a combo you’re happy with, you can even grab the CSS for your creation under choosing fonts for website the “Grab Code” tab. For example, Comic Sans is an extremely informal font that’s inappropriate for use in most situations. Bickham Script, on the other hand, is very formal but gives the wrong impression for things like business correspondence. X-height refers to the height of individual characters within a typeface, specifically the lowercase x.

Our team applies this approach to create vivid designs for marketplaces, SaaS solutions, and mobile development. Along with standard readable fonts, there are fonts developed for specific needs, called specialist fonts. They include https://deveducation.com/ Hargreaves (Scope), FS Me (MenCAP), Dyslexie, and Aktiv Grotesk. For example, we applied this approach to an activity booking marketplace. It is created for parents who want to find exciting leisure activities for their kids.

Lora has brush-like strokes that give the header a warm and creative vibe while Merriweather feels more stable and predictable. When Cooper Hewitt, the Smithsonian Design Museum, decided to reinvent its branding for the twenty-first century, this font was just one part of its rebirth. Although it’s not a superfamily of fonts, there’s enough versatility in its styles that you can pair different weights together for a striking contrast. Only available in all-caps varieties, Aviano has sharp, edgy serifs that give it a distinctive personality. Combine the two tilting typefaces together to established clear hierarchy in your designs. This pairing is particularly effective when Trade Gothic is used in its Bold weight for headlines, to set off Jan Tschichold’s classic Old Style serif face for text.

Not only that, the sans serif and serif versions of the font were designed to harmonize with one another. However, Franklin as the header really changes the whole vibe of the site. And because Franklin comes in 18 different styles, from light to bold, you can play around with how direct you want your header text to feel. As for usage, these vintage fonts were designed to be used as larger fonts, so they belong on the homepage of your site. And because they’re styled after the 1920s (Sans) and 1930s (Slab) geometric typefaces, you’d do well to place them on websites with similar retro leanings. Bebas Neue is a beautifully designed display font with a condensed, all-caps character set.

• An example of contrast, where one typeface dominates and the other complements it.
• Serifs provide visual cues that make it easy for someone’s eyes to follow.
• Sometimes these fonts do not contain the full family and have poor readability.