Categories
Design Tips Graphic Design Tips Typography Tips

50 top typography tutorials

50 top typography tutorials: Master the basics, improve your skills and more with these high-class typography tutorials.

typography tutorials
(Image credit: Markus Spiske/Pexels)

The web is brimming with typography tutorials, but many are low quality and others are very out of date. So we’ve trawled the internet to uncover the diamonds in the rough, in the form of 50 top-quality typography tutorials, to bring your knowledge and skills up to speed.

Perhaps you’re looking for a good introduction to the fundamentals of typography? Or perhaps you want to develop and push your type abilities further? Either way, you’re sure to find just what you’re looking for on this list, which includes typography lessons in the form of traditional text-and-image tutorials, animations and video, and even games.

We’ll be adding to this list as time moves on, so make sure you bookmark this page, and come back from time to time to see what’s new in the world of typography tutorials.

We’ll start by looking at tutorials to help you with mastering the fundamentals of typography – skip through to another page if you’re after something more advanced.

01. The ultimate guide to basic typography

typography tutorials
(Image credit: TutsPlus)

If you’re just getting started with type then this guide to basic typography will set you on the right course by teaching you the essential terms, clarifying a few terms that tend to get misused, explaining different types of font files, figures and symbols, and even going through some useful typesetting terminology.

02. Typography basics explained

Not sure exactly what typography terms mean? This video gives you a short and snappy overview of the six most important terms, namely typography, body copy, display type, hierarchy, kerning and leading.

Six further terms (tracking, widows and orphans, serif fonts, sans-serif fonts and script & cursive fonts) are explained in part two, which you can watch here.

03. Beginning graphic design: typography

This quick cartoon video from Learn.org, complete with a jaunty elevator-music soundtrack, runs through the basics of typography including the different types of fonts and common typography terms. You’ll find the text version of the tutorial here.

04. Everything you need to learn typography basics

This introduction to typography starts from the point of view of a marketing professional, who recognises its importance in strengthening a brand and highlighting the central message of a campaign.

Author Brittany Leaning went on a typography course at the Massachusetts College of Art and Design, and here she explains the fundamentals of what she learned, including a detailed look at the anatomy of type.

05. Lecture 110: Introduction to typography

This video provides an academically rigorous overview of typography, including both a definition of terms and a practical guide to how to place text and create character and paragraph styles within Adobe InDesign CC.

It’s actually a straight recording of a university lecture (by Grant Adams at Diablo Valley College in Pleasant Hill, California). So you’re best off skipping the first three minutes, where the remarks are purely focused on the students about to take the course.

06. A crash course in typography: The basics of type

typography tutorials

It’s probably wise to get back to basics before you go running off into the typography sunset. Here, Cameron Chapman gives you the lowdown on everything from fonts to displays.

07. Paragraphs and special characters

typography tutorials

In this typography tutorial, Cameron Chapman is back to tell you that yes, designing headers and titles may be more artistic, but the set body text is just as important. Discover why with this step-by-step guide.

08. Principles for combining typefaces

Combining typefaces can be dangerous business, especially if you mix two that certainly don’t belong together. Avoid any upset with this typography tutorial that shows you the importance of contrast and mood.

09. Pulling it together

Now you’ve got the basics down and you’ve dabbled in paragraphs and combining typefaces, take a look at how to pull it all together. In this typography tutorial, Cameron Chapman rounds it all up and shows you how to finish in style.

10. Typography terms every designer must know

typography tutorials

Our article introduces the fundamental concepts and rules of typography, followed by a detailed illustrated glossary of its main terms. Learn about choosing a font, sizing, leading, tracking and kerning, measure, hierarchy and scale, and more.

11. How to work with type in InDesign

Art editor Jo Gulliver shows you some of her most valuable typographic tools in Adobe’s publishing software. Focusing mainly on the Character Formatting control panel, she explains how these options can be used on a day-to-day basis to help speed up your workflow in InDesign.

12. 10 rules to help you rule type

This three-and-a-half minute typography tutorial video introduces 10 golden rules to help you improve your type skills and improve your graphic design layouts. Yes, the same text could have just been written as a standard tutorial, but hey, this is just a little more fun.

13. How to format text in InDesign

Part one of this crash course looks at what typography is and how you can format your type using the Controls panel in InDesign. In part two, you can delve further into the world of typography with a look at four special typographic effects that can help your InDesign layouts stand out.

14. Match fonts from an image in Photoshop CC

One of the standout features of Photoshop CC is that it can automatically analyse, identify and match fonts pictured within a photo. It then gives you a list of similar fonts installed on your machine, as well as others to download on Typekit. This quick video shows you how it all works.

15. Best practices of combining typefaces

Combining different typefaces within your design is part art, part science. This Smashing Magazine tutorial by Douglas Bonneville explains some of the most important best practices to follow when mixing two or more fonts, as well as some common mistakes.

16. Typography manual critique

One of the best ways to improve your typography is to follow an in-depth critique of what other designers have done when it comes to their use of type. This analysis of the Futur Typography Manual with Molly Drill is full of amazing insights about what to do (and not to do) when it comes to print typography.

17. How to kern type

Kerning is the process of adjusting the spacing between letters to achieve a visually pleasing result. One of the most important typography skills you need to learn, here Meryem Meg and Brian Hoff offer some pro advice about how to get it right.

18. Typography design & art direction

This video tutorial investigates a little-discussed but very important topic: how to approach art directing another designer when it comes to typography. The critique focuses around the launch of a new newspaper magazine focused on the business of design, and includes some fascinating insights into its layouts.

19. Art direction & typography part 2

The above video continues the lesson in typography and art direction begun previously, in discussion with graphic designer Minhye Cho. 50 top typography tutorials

20. Design a typographical poster in InDesign

typography tutorials

This tutorial from Future Publishing art editor Jo Gulliver walks you through the process of creating a typographical poster using InDesign. She demonstrates how to apply a document grid, and how to create and edit the typography within it.

21. Photoshop tutorial: Create a text portrait poster

This Photoshop CC tutorial from Blue Lightning TV shows how to design and create a powerful text portrait poster. This 11-minute typography tutorial takes you through each operation simply and clearly.

22. 4 steps to using variable fonts

basic typography
(Image credit: Future)

Variable fonts are the latest and greatest thing in web typography, enabling you to define all manner of type variations within a single font and saving you the performance hit of having to load multiple fonts. This tutorial takes you through the four steps to using variable fonts online.

23. Make interactive 3D typography effects

basic typography

Here we’ll create a type effect that uses the shapes of letters as a mask to some fast, free-flowing particles trails that will dynamically swirl and move through the letters. Not only will there be this beautiful animation, but as this will be rendered onto the HTML5 canvas element, this will be transformed in 3D to rotate towards the mouse as it moves around the screen. This is perfect for site headers or just when you need to grab the user’s attention for a call to action.

24. Better web typography in 13 simple steps

basic typography

Web typography means getting acquainted (or re-cquainted) with the rules of classic typesetting, but there’s more. With the web being a fluid and malleable medium, designers have to be able to predict the end result across different browsers and end users. This tutorial examines the basic dos and don’ts of typography, specifically applied to the web.

25. How web typography is just typography, sort of

Typography is often taught as a completely separate discipline from web design, but Amy Papaelias feels that’s a mistake. In this talk, part of TypeCooper West’s Letterform Lecture Series, she demystifies web typography and argues it should be seen as an integral to learning web design.

26. Improve web and mobile app typography

The short video lists five essential principles to improve the typographic quality of your web and mobile app. Paulo Stanley offers this practical guide to start you on the road to creating typography for screen design.

27. Improve web type with CSS font-size-adjust

Best practices of combining typefaces

Font-size-adjust in CSS lets you specify your font size based on the height of lowercase letters, and its use can make a big different to the legibility of your web text. This tutorial explains the thinking behind this property and how to use it in your projects.

50 top typography tutorials

28. The rules of responsive web typography

basic typography

Responsive web typography is tricky, but it’s become the cornerstone of good web design, so you need to get it right. This tutorial provides the foundation from which to begin, and covers both the design principles behind responsive typography and practical solutions for it.

29. Master accessible web typography

basic typography

The rise of responsive web design has made accessible type selection more important than ever if your web content is to be readability by the maximum number of people. Here, Fontsmith presents the results of its work with Mencap on accessible typefaces, and the new best practices that have emerged from it.

30. Fluid responsive typography with CSS poly fluid sizing

basic typography

Fluid layouts are now an established part of web design practice, but fluid typography is still relatively new. This tutorial examines how to use established browser features, Sass and some simple algebra to create scalable, fluid type that works across multiple breakpoints and predefined font sizes.

50 top typography tutorials

31. Responsive font size and fluid typography with vh and vw units

Beginning graphic design: typography

Another tutorial on how to create fluid typography, this one is almost exactly one year older than the one above, but it’s still worth a read to help you get your head around this discipline within web typography.

32. Performance and web typography

One of the many things you have to consider when selecting and implementing your web fonts is the effect your choice will have on the performance of your site. This conference talk by Helen Holmes explains the best ways to can optimise your font files for the web.

33. How to create your own font

How to work with type

In this tutorial, Yulia Sokolova explains how she created her first font, from drawing the initial design to digitising it and then turning it into a useable font.

34. How to create your own font: 18 top tips

How to work with type

After many years as a graphic designer and type enthusiast, Jamie Clarke decided to try his hand at designing a typeface. In our tutorial he shares some of the insights and practical methods he learned to help you to make your own font.

35. Create your own 3D typeface

advanced typography tutorials

In another of our tutorials, Jamie Clarke talks through how he created 3D type family Rig Shaded; a layered or ‘chromatic’ typeface that allows you to choose your own style and colour combinations. He explains how he went about it, and shares a number of insights to help get you started making your own 3D type.

36. The rather difficult font game

This game takes you through a series of various fonts that you have to name from a choice of four. It may sound easy but it’s not. Play it on the desktop or on your iPhone.

37. How to design isometric typography

advanced typography tutorials

Isometric art has a very strict set of rules when it comes to what goes where. It’s pretty difficult to sit down and draw yourself, but when it comes to Photoshop, you can create a guide for anything. In this London-inspired image, we’re going to set out a perfect isometric grid before we build a city of letters, using the Pen tool, selections and layers in Photoshop.

38. How to create reflective typography in InDesign

advanced typography tutorials

Making typography appear as though it’s reflected in the surface it’s sitting on isn’t complicated. It is, however, a little more complex to make it look convincing within the environment that it’s placed in. In this tutorial we’ll run through how to use Adobe InDesign to quickly create an environment for your type to sit in that follows the basic rules of directional light.

39. Create a long shadow text effect in Photoshop

advanced typography tutorials

Photoshop CC includes the ability to add multiple instances of the same layer style to a single layer. This is especially helpful when it comes to create text effects. This tutorial shows you a quick way to add long shadows to your text while still retaining the ability to edit it quickly.

40. Create an editable retro text style in Illustrator

advanced typography tutorials

In this tutorial, Chris Spooner shows you how to create retro typography using the fills and strokes within Illustrator’s Appearance panel. These trendy letters have a faux 3D appearance and are fully editable.

50 top typography tutorials

41. Create a quick duotone text effect in Photoshop

advanced typography tutorials

This short, step-based Photoshop tutorial will teach you how to generate duotone text. Using a texture image, a gradient map, some adjustment layers and filters, you’ll learn how to create this trendy effect in five short steps.

42. Create a vintage film title text effect in Photoshop

advanced typography tutorials

This tutorial by Chris Spooner explains how to create typography inspired by the film title styles of old black-and-white movies. Using the 3D capabilities of Photoshop CS6 and Photoshop CC, he adds sophisticated lighting and shading to these retro letterforms.

43. Create gold 3D type in Illustrator

advanced typography tutorials

If you want to bling up your typography, follow this Adobe Illustrator tutorial by illustrator Karol Gadzala. Step by step, she explains how to extrude type in 3D, apply metallic materials to give it a golden sheen, and add gems, sparkles and gleams.

44. Create a Chrome text effect in Illustrator

advanced typography tutorials

Chrome text effects are the ’80s and ’90s style that time forgot. But these retro looks are now making a comeback. Follow this tutorial to learn how to produce a similar retro style metallic text effect in Adobe Illustrator.

45. Create custom type designs in Illustrator

This Adobe Illustrator tutorial demonstrates how to create a custom typography design. It looks like it’s been lettered by hand, but it’s actually created by customising ready-made fonts with clever OpenType features.

46. Three ways to add textures to type designs

Match fonts

Photoshop textures are a great way to mimic the aesthetics of old prints and handmade art and give your digital designs more of a tactile appearance. In this tutorial, Chris Spooner explains three ways you can distress your logos and text, each resulting in a slightly different appearance. 50 top typography tutorials

47. Create a blueprint text effect in Illustrator

Match fonts

Learn how to create a blueprint text effect in Adobe Illustrator. This tutorial shows you how to combine simple strokes, basic blending mode techniques and a variety of Transform effects to create this impressive look to your lettering. 50 top typography tutorials

48. Create a decorative drop cap in Illustrator

Match fonts

This tutorial walks you through the process of creating a decorative letter in Adobe Illustrator with a range of vector embellishments. The techniques you learn here can then be applied to all sorts of illustration projects in the future. 50 top typography tutorials

49. Create vector floral typography in Illustrator

Best practices of combining typefaces

Here Yulia Sokolova explains to create a floral typography composition in Adobe Illustrator. You’ll discover how to create your own custom vectors brushes and use various drawing tools of Adobe Illustrator to create flowers, leaves, and floral elements.

50. Create a text portrait effect in Photoshop

Best practices of combining typefaces

This tutorial demonstrates how to create cool portrait effect using a long passage of text that bends and deforms around the contours of the face. Known as a Calligram, this supercool effect is created using Photoshop’s Displace filter.

—————

Related articles:

Categories
Design Tips Typography Tips

33 perfect font pairings

Need some type inspiration? We reveal the font pairings that were just made for each other.

Finding font pairings that set each other off, don’t fight the eye for attention, and harmonise without becoming homogenous and dull is an art. The age-old rule goes: concord or contrast, but don’t conflict.

But with so many professional typefaces and free fonts to choose from, how do you find two that work in harmony? Read on for our pick of the best font pairings – or jump to the end of page  for some top tips on finding your own. If you need to brush up on your typography knowledge, take a look at our guide to the different font types you should know.

01. Montserrat and Courier New

font pairings

Google Font Montserrat was designed specifically for use online, while Courier New is a classic typewriter font. On paper (metaphorically), you might not think they’d make the ideal font pairing, but you’d be wrong. Montserrat’s light, modern sans-serif letterforms offset Courier New’s heavier, retro vibe perfectly.

02. Alegreya Sans SC and Source Sans Pro

font pairings

Alegreya is a super-family that includes sans and serif sister families alongside this small caps version, designed by Juan Pablo del Peral for Huerta Tipográfica. The family has a slightly calligraphic edge, and is designed to be suitable for long blocks of text. However, the small caps variant is best suited to headers. We suggest pairing it with Source Sans Pro, Adobe’s first open source typeface family, designed by Paul D. Hunt.

03. Pacifico and Quicksand

font pairings

For a delightful font pairing with an unintentionally tropical theme, try Pacifico and Quicksand. The former is a pleasingly free and flamboyant brush font that’s ideal for use in headings. The latter is a sans-serif with rounded terminals and some quirky touches – including that distinctive descender on the uppercase ‘Q’. Quicksand was actually also designed as a display typeface, but it’s clear enough to work well at small sizes, too.

04. Julius Sans One and Archive Narrow

font pairings

If you’re aiming for a professional look, this is a great font pairing to try. Julius Sans One works only comes in one weight and is an all-caps font, but it’s a top choice for a display font, with its fine stroke and broader baseline. The more geometric Archivo Narrow is a perfect match. It has been designed to work equally well in print and digital.

05. Playfair Display and Raleway

font pairings

Display font Playfair draws inspiration from the period in the 18th century when quills were being replaced by pointed steel pens. This, alongside printing developments, led to high-contrast letterforms with delicate hairlines becoming popular. Elegant sans serif Raleway makes a perfect font pairing.

06. Oswald and Lato

font pairings

Oswald was launched in 2011 as a reworking of the ‘Alternate Gothic’ sans-serif type style. It makes a great pairing with Lato (which translates as ‘summer’ in Polish), a  warm yet stable sans serif. Both are available in a range of different weights and variants, making this font pairing nice and versatile.

07. Super Grotesk and Minion Pro

font pairings

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 create a modern sense of effortless elegance.

08. Libre Franklin and Libre Baskerville

perfect font pairings

These two libre typefaces make a great font pairing if you’re after a traditional feel. Both Libre Baskerville and Libre Franklin have been optimised for use on screen. The former is nice and readable, so ideal for use as body text, while the latter is better suited to headlines. Nine different weight options make it nice and versatile.

09. Freight Sans and Freight Text

perfect font pairings

Working within superfamilies makes it easy to find harmonious font pairings. GarageFonts’ Freight is a great example. It’s available in a large range of weights and styles, including Sans, Text, Display and Micro versions – giving you a versatile typographic toolkit to work with.

10. Kaufmann and NeutraDemi

perfect font pairings

If you’re after something more unexpected, how about this duo? The flowing stylings of Kaufmann add a touch of handwritten flair to this odd couple, and offset the straight and angular sans-serifed NeutraDemi perfectly. This font pairing might not be the most obvious match, but that doesn’t stop them playing off one another beautifully.

11. Brandon Grotesque and Minion Pro

perfect font pairings

Due to its versatility, the reliable Minion Pro appears a few times in this list. This time it’s playing second fiddle to the bold and attention-grabbing Brandon Grotesque. This is a classic serif and sans-serif font pairing, with both typefaces remaining crisp and easy to scan in any page layout.

12. Josefin Slab and Patrick Hand

perfect font pairings

When creating Josefin Slab, designer Santiago Orozco wanted something between Kabel and Memphis, but with modern details. The final typeface has distinctive, typewriter-style details, and is ideal for use in headlines. Combine it with body copy in Patrick Hand for a font pairing packed with character. The latter, based on the designer’s own handwriting, has a neat, friendly vibe.

13. Helvetica Neue and Garamond

perfect font pairings

This is a famously harmonious duo, combining ubiquitous Neo-Grotesque sans serif Helvetica Neue for headlines with the classic Old Style serif Garamond for text. Mix up different weights and sizes between the two neutral families to establish hierarchy within your designs.

14. Caslon and Myriad

perfect font pairings

Another classic font pairing, this time between an 18th century Old Style serif and a late-20th century Humanist sans serif. Myriad is famously used in Apple’s corporate communication, as well as in the Rolls Royce logo.

15. Nova Mono and Lato

perfect font pairings

Nova Mono is only available in one style, but that style is ideal for making a statement. Pair it with versatile sans serif Lato to stop things getting too crazy. Lato designer Łukasz Dziedzic wanted something that was nice and clear at small sizes (as we’d suggest using it within in this font pairing), but revealed some stylised effects when used larger.

16. Fontin and Fontin Sans

perfect font pairings

Time for another superfamily, this time from Dutch foundry exljbris. Fontin has been designed specifically for use at small sizes, and features loose spacing and a tall x-height. Fontin Sans makes an ideal partner for it.

17. Minion and Poppl-Laudatio

perfect font pairings

Two typefaces both have plenty of personality, but bond perfectly. An Old Style serif typeface, Minion was designed in 1990 but inspired by late Renaissance-era type. Although technically a sans-serif, Poppl-Laudatio’s subtle flared details give it a quirky edge.

18. Liberation Serif and Liberation Sans

perfect font pairings

Superfamily Liberation 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 also other variations to play around with, including  Sans Narrow and Mono.

19. Trade Gothic Bold and Sabon

perfect font pairings

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. Both typefaces are highly readable, with a tall x-height, and combine well together to give a pleasing effect.

20. Gilroy and Jura

perfect font pairings

This pair of sans serifs pair nicely to create a trendy, industrial look. Gilroy’s geometric style in ExtraBold weight is ideal for headers, while Jura Light has a wiry, structured shape that offsets it nicely. The combination is ideal for adding a strong, technical feel to your creative projects.

21. Playfair Display and Source Sans Pro

perfect font pairings

Dedicated display typeface Playfair Display sports high-contrast that exude old-fashioned charm. Source Sans Pro is a modern sans-serif designed specifically for use in user interfaces. Together, they make a perfect pairing of old and new, with the understated Source Sans Pro letting Playfair Display really shine.

22. Scala and Scala Sans

perfect font pairings

FontFont’s superfamily Scala started with a serif version in 1990, followed in 92 by its sans serif companion. With small caps, various ligatures and old-style figures, this family is hugely versatile and widely used in publishing.

23. Bebas Neue and Montserrat Light

perfect font pairings

Its clean, condensed letterforms make Bebas Neue an excellent choice for headlines. It’s free to download and open source – so you can edit it to your own particular needs through the GitHub repo, if you have the desire and skills to do so. Montserrat offers a nice contrast; especially the Light version.

24. Rockwell Bold and Bembo

perfect font pairings

One of the classic slab serifs, Rockwell was designed in the 1930s and has a huge amount of personality and attention-grabbing potential when used bold. The much more conservative serif Bembo is neutral but versatile, making for a perfectly contrasting font pairing.

25. Myriad Black and Minion

perfect font pairings

Myriad and Minion have already cropped up in different font pairings elsewhere in this list, but this combination is definitely worth a look. The shouty, ultra-bold Black version of the former and the text weight of the latter can help you create a clear hierarchy in your designs.

26. Souvenir and Futura Bold

33 perfect font pairings

Mixing two strong typographic personalities rarely works, as they end up fighting. However, this is an exception. Souvenir is softer and more playful than many of its Old Style serif counterparts, while Futura Bold is quirky without being too dominant.

27. Dax Bold and Caslon

33 perfect font pairings

One of the most versatile Old Style serifs, Caslon has also appeared elsewhere on this list. Its neutrality plays off against the informal, modern Dax Bold, enabling the latter to deliver its strong personality. Dax Bold is a great choice for a headline, and the understated Caslon won’t compete for attention.

28. Roboto and Montserrat

33 perfect font pairings

These two simple sans-serif typefaces make for a clean and modern font pairing. Roboto combines geometric forms with friendly, open curves, and has been designed to offer a natural reading rhythm. Montserrat – named after designer Julieta Ulanovsky’s neighbourhood in Buenos Aires – is currently being developed into an extended family, which will give you more type pairing options to play around with.

29. Antique Olive Bold and Chaparral

33 perfect font pairings

Initially designed as an alternative to Helvetica and Univers, Antique Olive has a very tall x-height with short ascenders and descenders, which make it highly distinctive in display form. Chaparral has a modern feeling but is a much more neutral slab serif. The two together work in perfect harmony.

30. Aviano and Aviano Sans

33 perfect font pairings

Only available in all-caps varieties, Aviano has sharp, edgy serifs that give it a distinctive personality. Its sans-serif variant is smoother. Combine these two tilting typefaces together to create create hierarchy in your designs.

31. TheSerif and TheSans

33 perfect font pairings

The rather straightforward naming strategy within LucasFonts’ Thesis typeface superfamily makes the foundry’s intentions pretty clear. These two variants are totally complementary, and each comes with its own sub-varieties.

32. Renault Light and Apex-New

33 perfect font pairings

An ideal font pairing for formal or corporate use. Both Renault and Apex-New have a very similar ratio of x-height to body height for an effortless partnership between contemporary sans serif and authoritative serif.

33. Calluna and Calluna Sans

33 perfect font pairings

An exljbris creation, Calluna was born out of an experiment in adding slab serifs to Museo, giving designer Jos Buivenga the idea of ‘serifs with direction’. The result is a highly distinctive text face that later spawned a sans-serif companion.

Top tips for perfect font pairs

Tip 1: Use font superfamilies

The easiest way to find perfect font pairings is by using different fonts within the same overarching typeface family. Find a so-called ‘superfamily’ and you’ll have a ready-made range of weights, styles and classifications that are specifically designed to work together.

A good superfamily will include serif and a sans-serif version of the same typeface: famous examples include Lucida/Lucida Sans and Meta/Meta Sans.

Tip 2: Pair contrasting typefaces

Contrast, as the name implies, is about finding totally different – but still complementary – typefaces that are each fit for their intended application. Traditionally, this involves pairing a serif with a sans serif.

Typefaces will generally conflict if they are too similar: two ever-so-slightly different serifs or sans serifs rarely create nice font pairings.

As a designer, the important thing is to establish a clear hierarchy. This could be as simple as varying the size and weight of the same typeface – but where the typeface varies, careful font pairing is crucial. If you have a display face packed with unique personality, you’ll need something more neutral to do the hard work.

Tip 3: Pair type sub-categories

Of course, ‘serif’ and ‘sans serif’ are themselves broad classifications – each split into several sub-categories. Generally speaking, Old Style serifs such as Bembo, Caslon and Garamond will combine well with Humanist sans serifs, such as Gill Sans and Lucida Grande.

Meanwhile, Transitional serifs have a stronger contrast between thick and thin strokes – examples include Bookman, Mrs. Eaves, Perpetua and Times. These pair with Geometric sans serifs such as Avant Garde, Avenir, Century Gothic, Eurostile, Futura and Univers.

Finally, Modern serifs have an often very dramatic contrast between thick and thin for a more pronounced, stylised effect, as well as a larger x-height. Included in this third sub-category are Bodoni, Didot, New Century Schoolbook and Walbaum. Again, Geometric sans serifs marry best with these.

So what does all this actually look like in practice? Here’s our reference list of tried-and-testing font pairings that are guaranteed to avoid conflict.

————————————–