: Best practices for combining header/body typeface WITH a brand/corporate ID existing typeface? I have recently become aware of a fundamental mistake I had been making; I have been matching a company's

@Murray976

Every website has different requirements, regarding aesthetics as well as legibility.

However, an article that you might find interesting and you could use as reference (I do) is Smashing's “What Font Should I Use?”: Five Principles for Choosing and Using Typefaces.

These guys established 5 fonts categories or groups: Geometric sans, Humanist sans, Old Style, Transitional/Modern and Slab serifs; and then created a sort of rule on how to combine them. Adding a very short version here:




This is a general principle of design, and its official name is
correspondence and contrast.


When we combine multiple typefaces on a design, we want them to coexist comfortably — we don’t want to distract the viewer with the question, are these the same or not? We can start by avoiding two different faces from within one of the five categories that we listed above all together — two geometric sans, say Franklin and Helvetica. While not exactly alike, these two are also not sufficiently different and therefore put our layout in that dreaded neither-here-nor-there place:



If we are going to throw another font into the pot along with Helvetica, much better if we use something like Bembo, a classic Old Style face. Centuries apart in age and light years apart in terms of inspiration, Helvetica and Bembo have enough contrast to comfortably share a page:





But if we want some principle to guide our selection, it should be this: often, two typefaces work well together if they have one thing in common but are otherwise greatly different. This shared common aspect can be visual (similar x-height or stroke weight) or it can be chronological. Typefaces from the same period of time have a greater likelihood of working well together… and if they are by the same designer, all the better.

Some other links:


Typeface classification
Typeface flow chart!
And another from Smashing, Best Practices of Combining Typefaces.

Vote Up Vote Down