10

You asked for it—here are some of our favorite font pairings

 1 year ago
source link: https://material.io/blog/google-fonts-pairing-figma
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
06.02.22

You asked for it—here are some of our favorite font pairings

See our handpicked Google Fonts pairings in use, and start using them now in Figma

Sarah Daily, Consultant for Google Fonts
Screenshot of Google Fonts Figma templates showing an array of pairings

Check out the pairings and download templates on Figma!

No matter what kind of project you’re working on or where you are in the world, everyone should have access to stylish, high-quality fonts. That’s why there are over a thousand of them on Google Fonts. It's also why there are filters for language, category, and font properties to help you narrow down your options. There’s also a bunch of guidance for choosing typefaces from Google Fonts Knowledge, like “A checklist for choosing type,” by Elliot Jay Stocks.

But, you’ve been asking, “what about help with pairing fonts?”

There are millions of possible pairings on fonts.google.com! “Pairing typefaces” (also by Stocks) is a good place to start if you’re looking to gain an understanding of how good font pairs are made. Also check out his follow-up articles, “Pairing typefaces within a family & superfamily” and “Pairing typefaces by the same type designer or type foundry.”

For inspiration, check out the Google Fonts Pairings templates on Figma. The templates are open-source and you can start using them instantly in Figma.

Google Fonts: Pairings

Sehee Lee, Senior designer at Google Fonts, handpicked the nine pairings to demonstrate a variety of use cases in different contexts. All in all, it’s important for font pairings to make sense for what you’re trying to achieve, and these pairings help give you a glimpse of what’s possible. For example, for apps that need to deliver accurate information, you need fonts that are easily legible and offer various weights and styles. On the other hand, for a book cover design, you might look for more expressive fonts with interesting alternate glyphs. You may also ask questions like, “does the font support multiple languages?” or even, “what does the font make you feel?” On top of all this, a good font pairing will ensure that type is readable and harmonious at every scale.

Screenshot of articles showing an array of knowledge cards

Included with each Pairing are extra resources, such as information on the individual typefaces and links to Google Fonts Knowledge articles on typography that might be helpful.

Made with Material Design 3

Most of the digital mocks used in the templates were made from the Material 3 Design Kit (which includes a comprehensive introduction to the design system, with styles and components to help you get started) and Material Theme Builder (which helps you explore dynamic color, brand colors, and type scale).

Screenshot of Material theme builder plugin
Material Theme Builder Figma plugin

“I am excited to have had the opportunity to incorporate Material Design resources to develop the pairings,” said Lee. “It made the template creation so easy and each individual pairing came out flexible, expressive, and unique.” Lee created the pairings by applying the baseline type scale and components. From there, she used the Material Theme Builder to create a custom palette for each pairing.

“Consider these as inspiration to start your creative project” she said. “From the nine pairs we initially set up, you can pick a suitable pair that works for your project or discover a new font that you have not had a chance to try. Perhaps, you can replace another secondary typeface on the top of the set. Use this as a baseline theme and build from there.”

Check out the pairings, download templates on Figma, and share your feedback on twitter.com/googlefonts!

Sarah Daily, Consultant for Google Fonts

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK