Typography - font pairing Flashcards
What should you ask yourself before doing font pairing?
Do we really need a secondary typeface?
Have we explored all of the possibilities on offer in our primary one, such as the various weights, styles, widths, and optical sizes? Even typefaces that contain just one font can be adjusted—with size, case, and tracking values—to create contrast in our text.
Source fonts.google.com
Reasons to do font pairing
- Changing context - If we need to display data alongside editorial text, or perhaps set an aside or footnote, we might benefit from employing a secondary typeface that’s notably different—perhaps even notably different in tone.
- Augmenting a brand’s personality - When the brand’s primary typeface is too serious, it may need combining with a more friendly typeface to more accurately capture the accessible feel of a brand.
- Adding additional weights, widths, or styles - It could be that the primary typeface doesn’t offer enough variation, perhaps being limited in the number of weights, widths, or styles—which could be as simple as not having a different weight to use as a heading.
- Accounting for missing features - If our primary character is missing features, such as support for international characters, a secondary typeface can be used in body copy, where encountering these characters is most likely.
In a nutshell, we should only introduce a secondary typeface if it can do something our primary typeface cannot.
Source fonts.google.com
Why is the tone of the pairing fonts important?
Consider the spirit of who or what a website will be representing. A bubbly typeface might work for a toy company but will look out of place on a law firm’s website. On the flip side, a web design for something lighthearted will get bogged down by the most serious of serifs.
One of the biggest considerations is what typography you’re going to use for the headers and the body copy. Headings offer more freedom in using stylized typefaces due to their larger scale. For body copy, you need a font that’s easy on the eyes in smaller text sizes.
Source webflow.com
How much contrast should your font pairs have?
Font pairs should be noticeably different — for example, don’t use a sans serif typeface in a header that’s strikingly similar to a sans serif that you’re using in the body copy. You want distinct combinations with typefaces that are visually different but still complement each other.
What are font superfamilies?
A superfamily is the collective grouping of several explicitly related type families—such as a serif, sans, and slab—that all share the same underlying structure to their design.
It’s common for a typeface to be made up of several variants—usually weights—and this is referred to as a “family.” When the variants are more plentiful, especially when the family includes variants across typeface genres (e.g. serif and sans), it can be referred to as a “superfamily.” Variable fonts make it possible to deploy an entire superfamily as a single font file.
Examples of superfamilies include Source (Sans, Serif, Code), IBM Plex (Sans, Sans Condensed, Serif, Mono), and Roboto (Sans, Sans Condensed, Serif, Slab, Mono).
Source fonts.google.com
Why is font weight constrast important when pairing fonts?
A sure-fire way to muddy your typographic hierarchy is to fail to distinguish elements in the hierarchy from one another. In addition to variations in size, make sure you are creating clear differences in font weights to help guide the reader’s eye around your design.
Source smashingmagazine.com
Why should you assign distinct roles to each font?
One very easy way to combine multiple fonts from several typefaces is to design a role-based scheme for each font or typeface, and stick to it.
For example we could define one font’s role for attention-getting headlines, and another font role to display medium-size text that it is easy to read.
Source smashingmagazine.com
What benefits do we get from using superfamilies on font pairing?
superfamilies share the same underlying structure to their design.
Using superfamilies allows us to swap fonts without disrupting our layouts, which saves us time and complexity.
Source fonts.google.com
