Connary Fagen
Type Design
Font Pairing Guide
Wondering which typefaces look great together and how to use them? Read on.
Contrast
The key to good typeface pairing is contrast. Thoughtful differences between styles, weights, and sizes help establish visual hierarchy and lend a narrative flow. Setting body copy and headlines in complimentary fonts give structure and lead the eye through your content. Headlines are often set in a bolder weight than the copy to help define sections, but use your best judgement. Avoid using more than two or three fonts in a single piece: headlines, text, and optionally captions/user interface elements.
Sans-Serif headline
Serif body copy
Greycliff
Novaletra Serif in regular weight. This is the ship of pearl, which, poets feign, sails the unshadowed main, the venturous bark that flings on the sweet summer wind its purpled wings in gulfs enchanted, where the siren sings, and coral reefs lie bare, where the cold sea-maids rise to sun their streaming hair.
Subheading
Where its dim dreaming life was wont to dwell, as the frail tenant shaped his growing shell,before thee lies revealed, its irised ceiling rent, its sunless crypt unsealed!
One font family
Multiple weights and sizes
Visby
Visby Round in medium weight. This is the ship of pearl, which, poets feign, sails the unshadowed main, the venturous bark that flings on the sweet summer wind its purpled wings in gulfs enchanted, where the siren sings, and coral reefs lie bare, where the cold sea-maids rise to sun their streaming hair.
Subheading
Where its dim dreaming life was wont to dwell, as the frail tenant shaped his growing shell,before thee lies revealed, its irised ceiling rent, its sunless crypt unsealed!
Detailed headline
Simple body copy
Wayfinder
Artifex Hand in medium weight. This is the ship of pearl, which, poets feign, sails the unshadowed main, the venturous bark that flings on the sweet summer wind its purpled wings in gulfs enchanted, where the siren sings, and coral reefs lie bare, where the cold sea-maids rise to sun their streaming hair.
Subheading
Where its dim dreaming life was wont to dwell, as the frail tenant shaped his growing shell,before thee lies revealed, its irised ceiling rent, its sunless crypt unsealed!
Fit
Use the right font for the right job. Body copy is best when set in clean, easy to read typefaces. Contrast,which is the difference between thick and thin areas of the letters, should be low. X-height, which is how tall lowercase letters are in comparison to capitals, should be moderate. Fonts designed for long text do not have attention-grabbing, idiosyncratic designs, as they may distract the eye and interrupt the flow of reading. Uniformity and harmony between letters, words, and sentences will help your text be enjoyable to read.
Headlines and logotypes, displayed at large sizes, is a good place for more expression. Detailed, complex typefaces with fine details may work, or perhaps a strong, bold sans-serif with round geometric forms. Whatever you choose, contrast and harmony with your body copy is still important.
Very small text, like interface elements, captions, legal information, and nutrition facts benefits from being set in a very clear font. Clean, simple sans-serifs in bold weights will maintain legibility at small sizes. For example, most of the buttons on this website are set in heavy Greycliff in capitals. Monospaced typefaces like Ellograph can be a great fit too, as their fixed letter-width can make layouts more predictable.
Layout
Good layout and organization of typographical elements is as important as contrast and fit.
Body copy may be tracked out slightly for better readability, while large display type can be tighter. This can be adjusted in layout apps under tracking settings. When using webfonts, this can be adjusted in CSS with the letter-spacing: attribute.
Note: the figures of +/-5 below are referencing tracking settings in design apps like InDesign, not CSS values.
Greycliff
-5
Where its dim dreaming life was wont to dwell, as the frail tenant shaped his growing shell, before thee lies revealed, its irised ceiling rent, its sunless crypt unsealed!
+5
Leading (pronounced ledding) should be adjusted to match the size and function of your text. This is set in CSS with the line-height attribute. A general rule of thumb is tighter leading for headlines, and more open leading for body copy. This will enhance the impact of large text and the readability of small text.
Automatic/default leading
A Few Lines
of Text Here
of Text Here
Artifex in book weight. This is the ship of pearl, which, poets feign, sails the unshadowed main, the venturous bark that flings on the sweet summer wind its purpled wings in gulfs enchanted, where the siren sings, and coral reefs lie bare, where the cold sea-maids rise to sun their streaming hair.
Adjusted leading
A Few Lines
of Text Here
of Text Here
Artifex in book weight. This is the ship of pearl, which, poets feign, sails the unshadowed main, the venturous bark that flings on the sweet summer wind its purpled wings in gulfs enchanted, where the siren sings, and coral reefs lie bare, where the cold sea-maids rise to sun their streaming hair.
Healthy margins and intentional negative space will help your layouts feel professional and pleasant to read. This can be adjusted in several ways in your design app of choice. In CSS, one way to add margins to text inside a div is to use the margin or padding attributes, depending on your design.
Margins are too thin
Greycliff
Artifex in book weight. This is the ship of pearl, which, poets feign, sails the unshadowed main, the venturous bark that flings on the sweet summer wind its purpled wings in gulfs enchanted, where the siren sings, and coral reefs lie bare, where the cold sea-maids rise to sun their streaming hair.
Subheading
Where its dim dreaming life was wont to dwell, as the frail tenant shaped his growing shell, before thee lies revealed, its irised ceiling rent, its sunless crypt unsealed!
Good margins
Greycliff
Artifex in book weight. This is the ship of pearl, which, poets feign, sails the unshadowed main, the venturous bark that flings on the sweet summer wind its purpled wings in gulfs enchanted, where the siren sings, and coral reefs lie bare, where the cold sea-maids rise to sun their streaming hair.
Subheading
Where its dim dreaming life was wont to dwell, as the frail tenant shaped his growing shell, before thee lies revealed, its irised ceiling rent, its sunless crypt unsealed!
When designing ads, banners, posters, and buttons, visual hierarchy of information still matters. Setting everything in the same size and weight will make it difficult to visually scan without an anchor. Call out the most important information with a headline-style font.
No Emphasis
Connary Fagen
Foundry Sale
25% Off All Font Families
Visual hierarchy
Connary Fagen
Foundry Sale
25% Off All Font Families
When using a single font at two different sizes, you may notice that lines of text appear thinner or heavier next to each other. Adjust the weights so the lines of text feel similar.
No Emphasis
Visual hierarchy
Connary Fagen
Type Design
What to look for
When choosing typefaces for body copy, purchase font families that offer a full set of weights and include italics. Without at least a basic set of regular, bold, italic, and bold italic, you run the risk of not being able to properly format text. For headlines and logotypes, this is less of a concern. However, many foundries include several weights and italics even for display typefaces.
Some font families have the flexibility to scale well to any usage, with details that capture attention at large sizes while scaling down gracefully. This can save money, provide long-term usefulness, and keep page load-times down if you're using webfonts.