Matchmaking fonts

karen's picture

I have no formal training in typography. But I would like to know what are the basic principles to consider when matching/pairing fonts.

Are there any no-nos? For example: Never match two different sans serifs; Never use fonts from different periods.

karen's picture

Found this to start the discussion.

hrant's picture

Opinions vary.
The only solid "rule" to me is that you shouldn't match up fonts that are very close, like Helvetica and Akzidens.

hhp

cph's picture

Meta + Univers. Good match or bad match?

boardman's picture

> Too elegantly similar.

cph's picture

I

karen's picture

Meta + Univers IMHO is a very bad match. They look too similar to have any contrast. I look for contrast when matching my fonts.

But I am often tempted to have more than two font families. In the end it often looks OK to me, but I have read so often that we should not use more than two typefaces in a publication. But the reason behind the rule is never stated. Many commercial publications definitely use more than two faces.


keith_tam's picture

There are really no hard and fast rules... I think contrast is important, otherwise you might as well just use one typeface. But it is also not very interesting if the types have nothing to say to each other.

It is very common to see neo-grotesques like Univers being paired with humanist sans like Meta these days. I guess designers tend to think humanist sans are slightly more legible than neo-grotesques? So they use the Univers for display and Meta for text. You see, that seems a bit redundant and only confuse the stylistic direction of the publication

bieler's picture

One useful trick (and I always tell students to look at Bringhurst's Elements in this regard) comes to mind here, and that is to look at different type styles from the same designer. There will always be a natural affinity. At least with a designer of some merit.

rcapeto's picture

The only solid "rule" to me is that you
shouldn't match up fonts that are very close,
like Helvetica and Akzidens.


Then what do people think of the following
book cover?

Eliot cover

karen's picture

I have been reading Bringhurst. He is eloquent and lucid, but I find he uses too many technical/typograhy terms(?).

I always use a serif, sans serif combo, just that sometimes, it is not that clear cut. For example, would a serif font like Minion go with Fenice. Assuming the entire Minion family is used, for body and subheads, but Fenice is used at only 36pt and above.

It would be really interesting to know the specific fonts you guys have married with what you consider good results.

I'll post a pair to start: Franklin Gothic and Berkeley.
This was a combo used when my previous publication was redesigned.

Gerald: Bringhurst suggested Univers and Meridien, both by Frutiger, but somehow they don't really work well together, or I haven't found a way to make them work. I am still trying to place my finger on why. Possibly I haven't found the right sizes to combine them at.

The book cover is interesting because most people would not know that the fonts are different. They look similar enough to pass off as one font, so it doesn't really bother me.

Would be interesting to know what the others think though.

cph's picture

I recently used Dolly coupled with Today Sans in my virgin attempt at designing a publication from the ground up (well, limited by format).

rcapeto's picture

Is it Akzidenz? I thought that it might be a version of
Univers. Anyway, you're the type-IDer. ;)

This is an English pocketbook from the seventies. I'd
guess that the use of different typefaces was a matter
of availability rather than design. I don't know how the
mechanical was produced but the designer probably didn't
have the same typeface at the sizes he needed. In any
case, the difference in modeling and in design details
(like the t), very obvious as they are to trained eyes,
are totally invisible to a layman, as Karen observed. And
it's a fine piece of design, BTW. (I wouldn't say that the
T is too far to the left, but 'Selected' certainly needs
a little more more breathing space at the right. Too much
trimming, perhaps?)

capthaddock's picture

Pairing typefaces is a challenge I constantly hit in graphic design, which is one of the reasons I decided to learn more about typography. It was something I didn't know nearly enough about.

I'm still learning, but here are a few rules that seem to work:

1. The obvious: pair a serif with a sans-serif when possible. This is a pragmatic rule simply because you usually need a display face and a text face for design.

2. Go for balance, not contrast. At small point sizes, a bold, robust sans will balance your serif text blocks. At large sizes, a light sans or humanist might balance your serif better. Balance is possibly the most important rule of design.

3. Match x-height as close as possible.

4. Match the geometry as close as possible. A gothic sans (straight-sided O's) might not be the best companion for an old-style serif (circular O's).

5. Match the "voice" of all the fonts you choose to the project. Certain fonts will never work for a telecom ID system. Others will never work for a basketweaving brochure. And so on.

6. The more you know about the background of your fonts - geography, history, etc. - the better you'll be able to make natural choices.

Again, I'm still somewhat new at this.

Paul

hrant's picture

Rodolfo, how do you say "chupa" in Portugese?

I think the "t"s are too close to be a problem, but those two "S"es bother me.

hhp

rcapeto's picture

Rodolfo, how do you say "chupa" in Portug[u]ese?

If you mean "it sucks", "chupa" is a literal translation:
it's a word with some meanings, including erotic ones,
but not the one you mean. ;)

I don't think so, Hrant. I think that the factors that
integrate those two typefaces (the general lightness,
the positioning in the space) are stronger than the
factors that pull them apart (most glaring for me is
the difference in stress in the 'o').

A design like this could serve as a litmus test for
type neophytes. It's like twins, that look identical
at first but as you know them better you see
they're totally different.

---

Paul, the principles you enumerate are sound and useful.

But I'd add that each design problem creates its own rules
and principles. And sometimes these contradict the tidy
formulae one would have followed. So, the best thing, I
think, even when one's not very experienced, is to have
principles like those in mind, but try to look at the problem
with fresh eyes, study it very well and 'let it speak'.

regards

Bald Condensed's picture

I'm reading a lot of useful hints in the replies above (especially Paul's points 5 and 6), but I have to agree with Rodolfo. There are no hard and fast rules, not even the "don't match up fonts that are very close". For every rule summed up in this thread there are beautiful examples that contradict that rule. Just at the top of my head, check out "The New Cranbrook Design Discourse" (1991). It's one of the first books I purchased after joining FontShop, and it made me realize that the possibilities are endless. For example on some pages Bodoni changes abruptly into an Egyptian at a slightly smaller size so the colour almost doesn't change. The effect, although a bit jarring at first sight, is strangely beautiful and has a subtle tension to it.

The big thing is that there are many more parameters than just the type design that influence: colour, size, spacing, setting... When designing stuff for FontShop, I had to combine sometimes unwieldy amounts of different typefaces in one design, and somehow there was always a way to make it work. It takes a lot of balancing and trial-and-error, but it's an extremely satisfying exercise and makes you look at type in a totally different way.

Karen, one of my more succesful magazine (re)designs combined FF Info with FF Meta, very similar faces, both by Erik Spiekermann. Which proves contrast isn't always the way. Furthermore the "always use a sans/serif combo" makes me feel really uneasy: it reminds me of that infamous quote from some version of the QuarkXPress manual: "Always use Helvetica for headlines and Times for text" (authentic!). On the other hand I've also done magazines which have more than 7 or 8 very different faces on one page, and that works perfectly well too. Go figure. ;)

capthaddock's picture

Of course you're right, Yves, but it does help the novice to have some rules to go by at the outset, since it takes a while to develop such a keen eye. (And some people seem to lack any semblence of aesthetic sense despite their best efforts.)

I'd love to see some of the magazines you've designed, if you have any examples.

Paul

karen's picture

Yves, your quote from the QuarkXPress Manual is hilarious!!!!! Got a scan?

Anyway I am glad to hear that you have successfully used 7 or 8 different faces on one page. Would LOVE to see that.

Think you will have to post some of your stuff (by popular demand).

But I have to ask, why did you use both Info and Meta? They are sooo similar. What was your rationale?

Bald Condensed's picture

Hi Karen and Paul, sorry it took me so long to reply, but every time the fun starts around here it's bedtime where I live. :/

The quote from the QuarkXPress manual is from a slide Erik Spiekermann used in his FontShop presentations. My second favourite is his "Thou shalt have no other typeface before me" slide listing all the German companies that use Helvetica as their corporate ID type (see also his delightful "Rhyme & Reason: A Typographic Novel" pages 100-101)

The most interesting thing I learned when at FontShop was something Neville Brody said: "Question every rule. Decide for yourself which ones are valid." That has been my main rationale ever since.
I don't consider myself a "real" graphic designer: I approach typography more like an architect or a researcher/scientist. My designs are almost always utilitarian, none of the flashy stuff that gets published in graphic design mags or typography annuals. I'm willing to post some samples to illustrate what I mean, but don't get your hopes up too high. Give me a day or two, as I'll have to search through some back-up CD's.

The Info and Meta problem was a typical case of setting myself a challenge (I do quite often make things hard on myself just for fun). I hope my English won't fail me in trying to explain this case.
I got handed an existing large format magazine which was pretty poorly designed. It used FF Meta as headline face and custom condensed Futura for text.
Instead of redesigning the whole thing and get it over with, I decided to try to find a valid solution using only design elements from the original lay-outs, just like a teacher would help a pupil without imposing his own creative vision. The only thing I dropped was Futura: I avoid overused typefaces unless I can find a watertight good reason use them. As I realized Meta is in fact overused too, I needed to find a way to keep it interesting. And this is a situation where I usually fall back on Neville's advice. I contradicted the rule "try using typefaces that belong to the same time period or that were designed by the same designer" with the rule "never use two typefaces that are too similar" by adding Info to the mix. The research and resulting design process was extremely gratifying, although the end result is, well, I'm certainly not gonna win any awards. ;)

See if you agree once you've seen the samples and let me know what you think.

Bald Condensed's picture

Here's some PDF-samples of the magazine I was talking about. Oh, and I forgot to mention that I would never ever mix FF Info with ITC Officina, because there you run into problems that are impossible to solve (rounded corners added to similarity of shapes). I think. Feel free to prove me wrong.

Here's the cover of issue 2 (after that they started interfering with the choice of coverpic and it went downhill from there on).


application/pdfVacature_mag2_cover
Vacature_mag2_cover.pdf (386.8 k)


application/pdf
Vacature_mag2_cover.pdf (386.8 k)



Here's the contents page (the editor in chief thinks everything he says is of utmost importance)


application/pdfVacature_mag3_contents
Vacature_mag3_contents.pdf (380.6 k)


application/pdf
Vacature_mag3_contents.pdf (380.6 k)



And here are two spreads


application/pdfVacature_mag3_p18-19
Vacature_mag3_p18-19.pdf (87.6 k)


application/pdf
Vacature_mag3_p18-19.pdf (87.6 k)



application/pdfVacature_mag3_p24-25
Vacature_mag3_p24-25.pdf (118.2 k)


application/pdf
Vacature_mag3_p24-25.pdf (118.2 k)

hrant's picture

I like everything except the contents page: too jumpy to find things easily.

hhp

rburke's picture

While we're on the topic--I'm currently working on a brochure for an agricultural product, to be distributed to farmers and buyers.

I've chosen Bembo for the primary serif but am on a desperate search for a matching sans.

Any suggestions?

Bald Condensed's picture

Hrant: I see what you mean. That was an experiment in hierarchy that some people had problems with, maybe rightly so. I'm still not sure. But what did Oscar Wilde say? "Experiment is what everyone call their mistakes." ;)

Bembo looks sooo British to me (thanks to Why Not Associates), so I'd go for the obvious Gill Sans, the sharp Metro (yeah I know that's an American by Dwiggins), or the simply delightful Bliss.

marcox's picture

Bembo has so much character (especially at display sizes) that I would pair it with a sturdy, plain-spoken sans like Trade Gothic or News Gothic.

karen's picture

Yves, why is there a duplicate of all the files? Are there differences that I am not picking up?

What font is used for the words, "vacature magazine"?

I like everything except the picture used on the cover. The contents page may be a little unstructured, but the numbers really stand out so I would still be able to find what I want.

So you used Info and Info Display as the display type and Meta for body text? It took me a while to figure out the differences between the two. (type plebian :-) When Meta is used at bodytext size, it look a lot like Info, doesn't it? But I like the end result. It is really quite clever.

I understand what you said about keeping part of the old design. Some designers just want to change EVERYTHING and when they're done, you think, "Is this the same publication?"

Bald Condensed's picture

Yves, why is there a duplicate of all the files? Are there differences that I am not picking up?

No, that's me getting all confused when uploading the files. D'oh...

What font is used for the words, "vacature magazine"?

Helvetica Black Italic. See, I do use Helvetica once in a blue moon. I was not completely brainwashed after my month at Spiekermann's. ;)

So you used Info and Info Display as the display type and Meta for body text?

No, I also used FF InfoText at text sizes. I'll post a few more examples where they are used alongside each other. You'll see: it's tricky, but it works.

When Meta is used at bodytext size, it look a lot like Info, doesn't it?

Well, yes, but there's a couple of details that make it work in combination with FF Meta but not with ITC Officina. Again, I'll post some extra examples.

I understand what you said about keeping part of the old design.

Don't fix it when it ain't broke (although the original design was badly executed I must say). I take a humble approach in graphic design, adapting my "style" to the client's or project's needs. And then I go and brag about it on the message boards. =D

Stephen Coles's picture

Rodolfo - I am baffled by the decision to use both Akzidenz
and Helv in that cover. I also think T.S. Eliot is shifted much
too far to the left in an attempt to acheive optimal alignment.

Stephen Coles's picture

Oops! You're right, that is a Univers. I wrote without
looking or thinking.

Thanks for reminding me to be aware of the
implications of type in specific sizes pre-1984. Too often
I forget about the conveniences of today's digital type.

Syndicate content Syndicate content