Hacker News new | past | comments | ask | show | jobs | submit login
Best Practices of Combining Typefaces (2010) (smashingmagazine.com)
77 points by adamnemecek on May 3, 2014 | hide | past | favorite | 15 comments



I've always found typeface selection to be totally baffling. Usually, when just writing a document or putting together a quick web page, I'll use whatever is the default. I can't be bothered to pick between the 40-50 or so fonts that are installed by default, let alone the thousands available free over the web or for purchase.

When it comes to putting together the shipping product or released document, I feel like I have only two choices: 1. Consult a magical "UX expert". Only this mystical being, who speaks secret incantations, and has access to access some design tome somewhere, can tell you what the exact right typeface should be. Or, 2. Pick from generic pre-designed templates (designed by the magicians, no doubt) and just paint-by-numbers into your product.

I wish there was a way to take this magic step out of designing.

The basic premise of this article seems to be that "Typefaces have personality". There are actually a couple of examples presented:

* Trade Gothic is no-nonsense

* Bell Gothic is dynamic and outspoken

* Slab serif typefaces are known for their distinct personality

* Franklin Gothic is stoic, sturdy, strong

* Souvenir is playful, casual, a little aloof, and very pretty

* Dax is an informal, modern, and bright typeface

* Bernhard Modern is classy, quiet, sophisticated, and even a touch intimate

So, who classifies these personalities? Where are they documented, so that I, as a non-designer, can look them up and use them correctly? This guide expects the reader to already know this typeface-to-peronality mapping.

I'd love a resource that lets you just look this stuff up. "If you're making an online newsletter about plants, use typefaces A, B, and C together, but never D and E, and don't make C bold. If you're making a poster for a concert for a new age marimba player, use typefaces F and G." That would be great.

Even better than a rule book, a more systematic process that gets you from subject matter to the right font, that is understandable and repeatable for non-designers would be perfect.

Anyone have any suggested reading?


A lot of these things are obvious just by looking. For example, "Slab serif typefaces are known for their distinct personality." Well, look at the two slab serif fonts in the example he gives you. You can see the letters have big exaggerated lines on the ends - the Ts have things coming off the top left and right and bottom center. These are the serifs and they are very large an decorative. His example has two fonts that have these serifs that are large and decorative and then the serifs for each are different. So it is kind of weird just looking at it. Oh, this T has a lot of decoration! But wait, that T over there has different decoration. It just feels weird on the eyes.


I believe you're looking for The Anatomy of Type: http://www.amazon.com/The-Anatomy-Type-Graphic-Typefaces/dp/...


A pretty good intro for typeface selection, but I disagree with one of the suggested arrangements:

> All in all, there are 4 fonts from 3 typefaces being used here, and they all pull together into a cohesive design.

4 fonts in a setting that's only 300px tall don't really pull together cohesively. It's something I'd personally recommend avoiding unless absolutely necessary.


The article does recommend (later) only using 2 typefaces. Having more levels to a visual hierarchy would be helpful for navigating a larger work, though.


Does anyone have a list of good web fonts you can use together? I like all of these principles and their examples but sometimes I just need a reference to pick out a stack and apply it to my site. Something like "The Big Book of Font Combinations" but for web that shows a breakdown of font stacks supported by which devices or something. Thoughts?


The Google Fonts page has some recommended pairings for each font: https://www.google.com/fonts/specimen/Open+Sans#pairings


I believe these pairings are based on the frequency they appear together on the web — not on any kind of aesthetic or functional judgment. I would take them with an enormous grain of salt.


Thanks for this, somehow I've never seen this before!


weird I just ran across this:

http://www.sitepoint.com/joy-of-subsets-web-fonts/

10 minutes later I found this thread.

the URL hashbanged mentioned looks very well put together. I like being able to see some "texture" behind my fonts before putting them into action.


My go to resource for a fast combination of Google Web Fonts is this:

http://hellohappy.org/beautiful-web-type/

Not a huge resource, but it is sort of what you're asking for.



I know this isn't what you are looking for, but generally I've found that playing around with Typecast.com for just a few minutes gets me to something that I like and that fits whatever site I'm designing for. Pick a few fonts from the Popular fonts category, and play around until you find something that you like.


You know what words don't appear in that article: emotion, character, soul, attitude, or even communication.

Legible does appear.

"Don't confuse legibility with communication" - David Carson.

He might have another take on how you can combine typefaces.

http://zee.com.br/extranet/abduzeedo/posts/david_carson/img7...

http://kingydesignhistory2012.files.wordpress.com/2012/03/ca...

David Carson's _The End of Print_ was one of my muses in the later 90's (that and The Designer Republic's work, especially Wipeout XL).

http://www.amazon.com/The-End-Print-Grafik-Design/dp/B00FIBF...


Trade Gothic wants to get to the facts, but Bell Gothic wants to have some fun.

Their distinct personalities don’t play well off of each other and create a kind of typographic mud if careful attention is not paid.

And did you miss the whole "Don’t Mix Moods" section?




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: