Pairing Fonts
Elevate your designs with font pairings that synergize. Use the Pairing Studio to match fonts and explore typeface combinations.
Pairing Studio
The Pairing Studio is a panel in Typeface app that allows you to preview font pairings in a text layout. The distraction-free interface is designed to rapidly try different font combinations and to discover what works well together and what doesn’t.
It aims to help with the first exploration steps in your workflow. Layouts can be adjusted in many ways, but are intentially kept simple to focus on pairing fonts, such that you can make a short list of fonts to use in your actual design.
To open a Pairing Studio select a font in your library and choose > from the main menu. You can also press CommandK to pair selected fonts or right click (Control-click) and choose from the context menu.
The Pairing Studio panel shows an adjustable text layout consisting of multiple text blocks. The layout selector at the bottom of the panel allows you to switch between layout templates. There are several presets available such as Logo, Article and Hierarchy.
You can customize these layouts and create new ones for your projects. Edit the text and appearance (font size, tracking, alignment, etc.) by double clicking on a text block or by using the right click (Control-click) context menu. Learn more about editing layouts
Each block in the layout is connected to a particular font. The picked fonts are visible in the sidebar on the left, one for each text block. The sidebar keeps a list of font candidates which you can cycle through. More font candidates can be added by dragging them from the main window to a text block in the studio. Or select some fonts in the overview and choose > from the main menu (CommandK).
Click on a text block or on a font in the sidebar to select it. Then you can browse through your candidate fonts using the navigation controls at the bottom of the sidebar.
Apply next candidate
Click on the ❯ button or press the → key on your keyboard.
Apply previous candidate
Click on the ❮ button or press the ← key on your keyboard.
Remove a candidate
Click on the ⌫ button or press the Delete key on your keyboard. The selected font candidate(s) will be removed.
Note: removing a candidate will remove it from all blocks. A studio has a single list of font candidates, shared by all blocks in the layout. If you remove a candidate that is still in use by another block, that font will be striked through in the sidebar.
Adjust font style
To change the font style first select a font in the sidebar then click on the style dropdown. The dropdown menu lists all available styles of that font family. You can also navigate through styles by pressing Option↑ (lighter weight) or Option↓ (heavier weight) on your keyboard.
Font and style changes are applied to all selected blocks. Select multiple fonts in the sidebar by Command or Shift clicking. Or press CommandA to select all fonts at once. The ↑ and ↓ arrow keys allow you to navigate up and down through the text blocks.
Press Command+ or Command- to increase or decrease the font size of selected blocks. Option+ and Option- allow you to adjust tracking. Add the Shift modifier key to increase the increments for these shortcuts.
Immersive pairing
Want to focus on your layout without any distracting UI? Choose > from the main menu or press Command/ to hide the sidebar.
Font pairing workflows
Your exploration workflow starts with finding some font candidates to pair. You may begin with an anchor font which is a font that you want to base your design around.
- Select your base font in the Typeface library
- Choose > from the main menu or press CommandK
Then add additional candidates to see which fonts pair nicely with your primary font.
- Browse through your library in the main window to find a candidate font
- Drag the font to the Pairing Studio to apply it to a specific text block
You can drop a font directly on the text or on one of the candidates in the sidebar.
Alternatively, add additional fonts from the overview by choosing > from the main menu (CommandK). The fonts will be applied to the blocks you have selected in the last focused Pairing Studio. Position the Pairing Studio panel next to the main Typeface window such that you can browse fonts and view your layout side by side.
Once you have collected a few candidates you can navigate through them using the navigation controls in the Pairing Studio sidebar. Click on a text block or click on a font in the sidebar to select it. Navigate to the next/previous candidate using the arrows at the bottom of the sidebar or use the ← and → arrow keys on your keyboard until you find something you like.
To change the font style (weight, italic etc.) click on the style dropdown in the sidebar. Then choose a new weight from the dropdown menu.
Process of elimination
If you’re not sure yet what you’re looking for you can also start with a large selection of fonts and narrow down your list in the Pairing Studio.
- Select multiple fonts in your Typeface library
- Choose > from the main menu or press CommandK
The Pairing Studio now contains multiple candidates. Cycle through them to explore pairing options. To dismiss a font use the ⌫ button or press the Delete key on your keyboard. This will remove the currently selected candidate font from your list and applies the next font. Keep eliminating fonts until you have a short list of candidates that fit well together.
Iterate and refine
Typeface encourages an iterative design workflow, where you explore fonts and mark what you like. Then narrow down or expand your selection of fonts as you go and try the fonts in your design.
The Pairing Studio helps you rapidly iterate and preview font combinations in order to find what you’re looking for. You can stay in Typeface app to identify multiple pairings that synergize, then switch to your design application to see them paired in your actual design document and make a final decision. This speeds up your workflow as you can skip activating fonts and don’t need to go back and forth between your font manager and your design application to try out different variations.
Whenever you find a nice font combination you can duplicate the Pairing Studio to continue iterating. This allows you to keep the current pairing option available, while you proceed to search for alternative pairings. To duplicate a studio click on the new panel button at the lower right corner of the window or press CommandK. A new Pairing Studio will appear with the same layout and a copied list of font candidates.
You can have as many studios as you like. Each studio will be decoupled from the previous one, so the fonts and layout can be changed without altering the other studios.
Besides being helpful to iterate and find new pairings you can also use multiple studios side by side to compare fonts. For example you may want to compare legibility of body text fonts. Or see how a different line height or font size improves readability.
Multiple variations
Instead of creating separate studios you can also choose to repeat the same text blocks in one layout. This may be useful if you want to quickly try several variations.
You can select some blocks, copy them (CommandC) and paste them a few times (CommandV). The benefit to this approach is that it becomes possible to select multiple blocks and change them all at once.
Having multiple copies of the same blocks works best with smaller templates, such as a word mark with tagline. For longer layouts it may be preferrable to duplicate the studio.
Export your paired fonts
If you’ve selected some font pairs that you want to keep you can add the fonts to a tag. Select the fonts in the sidebar and drag them to a tag in the main window. Or use the main menu actions to attach tags or activate the fonts.
You can also drag the fonts directly to Finder to export them. Or drag them to your design app to Font Switch.
Print to PDF
Want to send your pairing candidates to a client for review? Choose > from the main menu to print your layout. Click on the PDF button to export the document to a PDF file. Learn more about printing to PDF
Note that your screen may have a different DPI compared to what is used on paper. Typeface automatically adjusts the font size for paper such that the printed size will match the physical size displayed on your screen. That is, if you hold up your print next to the app on screen the font sizes will be equal. The footer at the bottom of each page shows the used fonts and scaled font sizes per text block.
How to choose good font pairings?
Pairing fonts is not easy. The goal is to find fonts that have synergy and complement each other. Together they should make your design stronger. How to determine which fonts match is up to you — Typeface just provides the tools to make it easy to try multiple variations and unleash your creativity.
In art and design there are no strict rules (here’s to the crazy ones!), but there are some loose guidelines that may help you find a satisfying combination of fonts.
The safest option is to not pair different typefaces at all. Keep it simple and use a single font family. A font family with different weights can give a nice structure to your type hierarchy. You can add a single font to the Pairing Studio and adjust the styles according to your taste.
Font synergy
If you’d like to pair multiple font families there are two main things to look out for: contrast and similarity. Contrast is probably the most obvious — if two fonts are very similar why use separate fonts at all? Too similar and the small difference between fonts may be distracting and appear erroneous. There should be some clear contrast that make the fonts a deliberate choice.
However, font pairings should also not be too contrastful. If two fonts have no connection at all they may not be harmonious. Try to find fonts that have some properties in common.
One approach is to compare skeleton (the form of characters), flesh (stroke contrast and serifs) and skin (decorative features). Look for fonts that have significant contrast in some categories and are similar in others to tie them together.
Note how this naturally applies to a single font family: the separate styles in a family have some contrast (weight/slant), yet their form is similar.
Here are some resources from the Google Fonts Knowledge library to learn more:
For inspiration check out fontsinuse.com. And always remember that rules can be broken — trust your eyes and design expertise: does it look right?
Happy pairing!