The Art of Mixing Typefaces

Related Posts from

This post was published by webmagman


Related Posts from

22 Responses

  1. Marvel Creative Design
    Marvel Creative Design at |

    Great idea, but this simply doesn’t work.
    Eg. If you look at ‘Oxygen’ horizontally, it goes with everything.
    Read it vertically, and it doesn’t.
    Same with virtually all the other fonts – the info isn’t consistent.

    1. dan
      dan at |

      That’s because the top axis is using the font as a “display” font or headline (larger font size), while the vertical axis is using it as body text.

    2. Joshua Hardwick
      Joshua Hardwick at |

      Hey Marvel,

      I’m glad you like the idea. As Dan rightly pointed out, the y-axis shows “Display” fonts while the x-axis shows “Text” (or body) fonts, so the combinations of the same fonts vary depending on the way you combine them.

      Apologies for the confusion, perhaps I’ll try and clear things up a bit more if I ever get round to creating version 2.0 🙂

      Josh (Designer of the infographic)

      1. Sloan Thrasher
        Sloan Thrasher at |

        Hi Joshua,

        Great graphic, and although font appearance and compatibility is always subjective, this give a great starting point when selecting fonts. I’ve build a page that is interactive and uses your grid and evaluation to demonstrate how these fonts look together.

        Take a look at to see the page. It has some sample text, and lets you pick any of the 20 fonts for the “display” font and the “text” font. It also displays a version of your grid (mines a bit garish compared to yours).

        You can click on the grid cells to see the combination of fonts applied to the sample text.

        Again, thanks for the great info graphic!!


  2. Adam
    Adam at |

    Chart doesn’t make sense. All the info should be reflected over a line from top-left to bottom-right.

    If you look vertically at Open Sans and match it with roboto, it is marked as “Unlikely”. But if you look vertically at roboto and match it with Open Sans, you get “Great Combo”.

    Redo the chart.

    1. Mason
      Mason at |

      Read the chart. Or at least the previous comments, where this same mistaken assumption was clarified.

    2. Joshua Hardwick
      Joshua Hardwick at |

      Hi Adam,

      It shows both “Display” and “Text/body” fonts, so things can vary depending on how you cross-reference the fonts.

      Sorry for the confusion; I’ll try and think of a better way to clarify this in version 2.0.

      Josh (Designer of the infographic)

  3. Alex Walker
    Alex Walker at |

    I think it’s great! Good stuff.

    I’m going to feature it in the intro to the SitePoint Design newsletter tonight.

    1. Joshua Hardwick
      Joshua Hardwick at |

      Hi Alex,

      I’m glad you liked it! Did you ever get round to featuring it on the SitePoint newsletter? 🙂

      Josh (Designer of the infographic)

  4. Bo
    Bo at |

    Great idea. I haven’t yet looked into the details of it so I don’t yet know if I agree with you.
    The Redo-the-chart-the-axiss-don’t-match comments are funny though 🙂

  5. Jenny Arnez
    Jenny Arnez at |

    I love this. Thank you!

  6. Mike
    Mike at |

    Thanks, useful.

  7. Keith James
    Keith James at |

    Great little cheatsheat. Makes perfect sense if you read the axis. Some typefaces would never be used as body fonts.

    It would be fun to submit a design using Lobster as a text font and watch the client cringe.

  8. Marianne
    Marianne at |

    Nice chart and I agree with Keith, it makes perfect sense.

    1. Joshua Hardwick
      Joshua Hardwick at |

      Thanks Marianne 🙂 I’m glad you found it useful!

      Josh (Designer of the infographic)

  9. Anjuli
    Anjuli at |

    I just love how everybody thinks they’re an expert – without actually taking the time to see how it works. If only they had spent as much time studying it, as you did creating in it 🙂

    Thanks for this helpful chart. 🙂

    1. Joshua Hardwick
      Joshua Hardwick at |

      Hi Anjuli,

      I think I should have made the graphic clearer, I can see the confusion 🙂

      P.S. I’m glad you liked the graphic. It certainly makes manually cross-referencing those 400 fonts worthwhile!

      Josh (Designer of the infographic)

  10. Rem Raru
    Rem Raru at |

    Will be cool to know why are some combinations is a complete no-no.

    Some fonts really don’t work for body text, it’s obvious, them just hard to read, but i just tried some combinations with okey body fonts and wrong title fonts, that is marked there as bad idea – they looks for me not bad at all.

    1. Joshua Hardwick
      Joshua Hardwick at |

      Hi Rem,

      If you take a look at the “disclaimer” at the bottom of the graphic, you’ll see that I pointed out that it should only be used as a rough reference/guide and that there are some instances where font combinations might work, even if they’re classed as “avoid” on the graphic.

      When I designed the graphic, I actually manually checked every font combination myself in Photoshop (yep, all 400 combinations!) and made a visual judgement on how well they worked. There is no typographic absolute, so it’s always going to be somewhat open to opinion/interpretation 🙂

      Josh (Designer of the infographic)

  11. NetHawk
    NetHawk at |

    That’s a good way to check font combinations! Thanks for sharing this. A PDF (or a bigger PNG) would be nice so I could print it as a poster. The text in this image file is hard to read and the JPEG compression also doesn’t help.

    1. Joshua Hardwick
      Joshua Hardwick at |

      Hi Nethawk,

      I’m glad you liked the graphic! I agree that a PDF would definitely be helpful. Stay tuned, I might get around to creating one at some point!

      Feel free to email me and remind me! 🙂

      Josh (Designer of the infographic)

  12. 21 Tools and Resources To Make You A More Proficient Web Designer | Resourceful Designer

    […] The Art of Mixing Typefaces […]

Comments are closed.