Best Practices of Combining Typefaces | Hacker News Reader

Best Practices of Combining Typefaces

smashingmagazine.com

94 pointsvladocar28 comments

The side-by-side examples should be in the same colours.

It's impossible to separate the psychological effect of the typeface from the effect of the colour changes.

I'd like to learn something from the content of this article, but I suspect that I'm likely to learn the wrong thing, due to bad experimental design.

Pretty much the same information from a master typographer without the lame side-by-side comparisons. http://www.typography.com/ask/recentTopic.php?rtID=92

I'd enjoy reading more good articles by experienced practitioners about ideas for combinations of fonts, colours, etc. Many of us rely on graphic design skills for building company web sites and on-line services, but don't have time to study the subject as deeply as a specialist and aren't naturally artistic geniuses.

However, I agree with the parent post: I don't think this particular article is very good at all. The colours and text shadows distort the presentation. Worse, many of the later images are textbook examples of why you don't normally mix lots of fonts together on the same page. I think the author is trying to do too much with wide variations in fonts, while ignoring related tools like whitespace that might do the job better.

The best advice I can give is: Don't use Smashing Magazine as a source of design education. Their articles are superficial at best and I've never seen one written by anyone who exhibits real expertise in the topic. Learn the basics first - color theory, composition, etc - from good art or design texts, and from learning to draw.

matrix, thank you for your comment. But I would like to provide our opinion on this. Actually, we work very hard to prvide the best content out there, and articles are checked and revised by invited experts around the world before it gets published. It's too bad that you haven't noticed any articles written by authors who exhibit real expertise in the topic. Please check the following articles published over the last 2 months:

Christian Heilmann - http://www.smashingmagazine.com/2010/10/11/local-storage-and...

Bruce Lawson, Remy Sharp - http://www.smashingmagazine.com/2010/09/23/html5-the-facts-a...

Alma Hoffmann - http://www.smashingmagazine.com/2010/09/14/finding-alternati...

Paul Boag - http://www.smashingmagazine.com/2010/09/06/fight-the-system-...

Rachel Andrew - http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-m...

Thomas Giannattasio - http://www.smashingmagazine.com/2009/11/02/the-ails-of-typog...

They are all experts in what they are writing about. The focus on Smashing Magazine is not design theory, but rather insights from practice, learned and shared by designers and developers out there. And yes, sometimes we do mistakes, but we always clear things up and improve the articles.

Also, we always welcome feedback and constructive criticism, and we would love to hear what you think we could do to improve the quality of Smashing Magazine's article. Thank you for your time.

Vitaly Friedman, editor-in-chief of Smashing Magazine

It's a pleasure to have the opportunity to provide feedback.

Smashing Magazine covers a wide range of topics without necessarily going into depth in any one of them. I'm sure this is a function of wanting to drive traffic from reddit and the like. Understanding and learning takes time which isn't the kind of thing that leads to quick upvotes on the big social media sites. I'm not saying this is right or wrong, merely that this leads to a certain type of article.

Nobody learns to be a rock star developer by merely cutting and pasting code that comes up in a Google search. They work at it through experience, good books, and working with smart people. Design is the same - you can do the equivalent of cutting and pasting some rules, but to become a good designer there's a learning process.

I suggest having content such as a series of articles on one particular aspect of design, leading the reader from fundamentals to more advanced concepts. These articles are unlikely to be quick hits on the social networks, but they create more long-term value that keeps people coming back.

That aside, I think it would benefit Smashing Magazine's brand enormously if you resisted the temptation to run the "N beautiful pictures of Y" articles. No doubt they're quick hits for social media, but they come at the price of diluting the value of Smashing Magazine.

Thank you for your feedback, I understand what you are saying. If you compare Smashing Magazine's article from a year ago with the recently published ones, you'll notice a big difference. We haven't been publishing "N beautiful pictures of Y" articles for almost a year now. We are trying to make SmashingMag a high quality publication for designers and developers. You won't find photography posts on Smash any longer (only maybe once every 3 months or so, over the weekend, but they are not our focus).

Please do check Smashing Magazine and its recent articles. We have changed a lot, and we are aware that this is probably a long process, and we are willing to get better and become more useful and relevant for the design community. Comments such as yours help us find the right direction and stick to it.

For instance, we created an experts panel where we invited experts of various fields to review articles published on Smashing Magazine before they get published. Every expert gets paid for his/her review. We would love to have you as a reviewer in our expert panel, to improve and maintain the high quality of the articles. Are you interested? Or maybe you or some other readers of Hacker News would like to write a rebuttal, explaining what's wrong in the article and what the real "proper" rules are? We would love to publish it on Smashing Magazine. We really want to help out the community. It was never about just pumping some (good, bad or average) content out there, it never was. We want to publish high quality articles, and only high quality.

I like the idea of having a series of articles on one particular aspect of design, and we've had such series in the past, and they usually work well. So I will definitely keep that in mind.

Thank you, matrix, I truly appreciate your time and your feedback.

— Vitaly Friedman, editor-in-chief of Smashing Magazine

> We haven't been publishing "N beautiful pictures of Y" articles for almost a year now. We are trying to make SmashingMag a high quality publication for designers and developers

Thank you for that. I think you have done a great job overall going in this direction. I loved http://www.smashingmagazine.com/2010/05/18/the-beauty-of-typ... posted earlier this year. I understand it's impossible to make every single article aim for perfection but now that you have raised the bar for yourself and we know about it, you have no choice but to meet it every single time.

The first thought in my mind when reading the current article was how the color difference between left and right slides affected my perceptions and hence completely negated the subsequent analysis. For a second I actually thought it would be funny if I made a parody article and switched the left and right slides and justified it with copy-pasted text from your own article.

I love typography and I try to learn more about it any time I get. But unfortunately, despite reading the entire article, I left away feeling like I learnt nothing. It's hard to say exactly why but just compare the current article with The Beauty Of Typography and you'll see what I'm trying to say here.

Thank you, I truly appreciate your feedback.

The truth is that reader's expectations are permanently increasing and sometimes it is really difficult to meet these expectations because every reader has different expectations and requirements for our articles. You can't please everybody, and we can just try to make sure that the vast majority of readers finds a piece useful and/or interesting. We try to do our best to keep the high quality level, and the amount of editing work for every single article hopefully speaks to that.

I understand what you are saying regarding the color difference in the examples, and it would be more correct to keep the background color the same, but I truly do not think that it would change the choice of typefaces a lot. We have carefully considered the typefaces and how they work together regardless the background they are on.

Also, I found quite many useful practical tips in the article, which is why it was published in the first place. But I can see that some descriptions are more general and could (and should) be more precise and concise. I will certainly keep your remark in mind for the next articles.

> Or maybe you or some other readers of Hacker News would like to write a rebuttal, explaining what's wrong in the article and what the real "proper" rules are? We would love to publish it on Smashing Magazine.

In that case, just as a friendly note, you might like to consider whether your "How to become a Smashing Magazine Author" page really says what you mean to say. For example, it starts with:

"Who can become a Smashing author? You. However, you need to have experience as a blogger or an author."

and it asks explicitly for URLs to existing articles/examples.

Personally, I have an interest in many subjects you cover (and do some of them for a living for various companies) and I participate in various on-line forums under my real name so I suppose you could see my writing there. However, I don't run my own design blog or publish books on the subject. I would imagine the same is true of many other people reading this discussion on HN. Your post here suggests that you would like to hear from those people if they were interested in writing for you and had relevant experience to share; your guidelines on your web site suggest otherwise.

"Nobody learns to be a rock star developer by merely cutting and pasting code that comes up in a Google search..."

That's not exactly true. In fact,that's how many developers get going - merely copying and pasting code, but then later analyzing and tweaking it, and making it part of their vocabulary. Copy first, understand later.

Look at the model for classical painting atelliers: year 1: clean brushes. year 2 - 6: draw copies of the master's work. year 7: assist with minor painting duties

I once did a study on the top guitar players from several genre's from jazz to fusion. Without exception, every single one of them learned to play by copying (transcribing) solos from their favorite musicians. Later, they learned theory.

Thellonius Monk said "writing about music is like dancing about architecture". There is only so much you can say, even if you can say something useful. Sometimes a picture is really worth 1000 words.

Both Smashing Magazine and, more recently, the Smashing Network posts they link to from their own site tend to be highly variable IME. Some are quite deep, and some are like this one, with laudable goals but simply not very good. The trouble is, unless you already know the topic fairly well anyway, it's often hard to tell the difference between good advice and bad, or between subjective personal opinion/preference and conclusions based on hard empirical data. After all, as I write this, the link to this article has 67 points and is near the top of the home page.

I'd like to encourage people who might post more HN links to articles on graphic design, typography, usability, etc. that have real depth. Clearly a lot of people who contribute here work in related fields, so I suspect there would be enough interest to justify highlighting good content. I just don't want another five linkbait articles parroting the differences between en- and em-dashes as if that sort of detail is what typography is really about, or another ten that start by explaining a colour wheel and then parrot trivia about what each colour "means" without giving any useful examples or practical discussion about how to use that knowledge to do something better.

Good points, the only issue with this is that if you have any sense of "tension" in your typeface choices, you probably don't need an article like this. And if you don't, you'll have trouble applying any but the most concrete instructions (e.g. use only 2 typefaces). Learning to recognize typographic tension is probably not something that can be taught in one blog post.

Precisely. This is the typographic equivalent of advising "don't use colors that clash" without specifying what "clashing" means.

I actually think you could teach objective if subtle rules about this (for instance, compare the lowercase 'n' for the fonts in the first example) but this article doesn't do that. Instead the article uses terms like "neutral", "outspoken", "conservative". "dynamic", etc. to describe what to a casual observer are quite similar fonts (it's not like we're comparing Helvetica to Karbine or Comic Sans).

Oftentimes, in art and design, you can't specify, in a binary way, why something clashes. To your eye, if it clashes, it clashes. You can't really break down an impression into a series of isolated minutia while retaining a sense of the overall.

It's also much easier to define "clash" by simply showing "harmony", which is the simpler, more intuitive approach to take in a simplified blog format.

Sometimes you don't need to know why something is good or bad, you just need to trust your eyes. And if you train your eyes on enough good stuff, the bad becomes blindingly obvious.

I agree. It's clearly not something that can be entirely reduced to formulas and numerical relationships.

Moreover, an intuitive "design sense" is probably faster and will carry you farther than any set of specific guidelines.

But this doesn't have to be something you just intuit or pick up through osmosis.

For instance, a blind person could create an acceptably harmonic color scheme with a little knowledge of color theory. It ain't all handy-waving and intuition, there's some baseline part of this that can be reduced to numbers and guidelines.

You can jump-start someone's path to an intuitive design sense by teaching them some of the theory behind it (whether or not designers are conscious of some of the guidelines they're often following). It'll only take you so far, but it will take you a long way from square one.

EDIT:

Hi Douglas, I see from another comment that you are the author of the article. Neat, that's always one of the great things about HN.

By the way, since your account is new, let me offer this disclaimer: don't let the harshness of HN users get you down. Engineers are jerks by nature, and HN readers in particular are keen on offering what they see as constructive criticism.

To that end, I think the root comment on this thread has it right, what strikes me as odd about this article is that seems to be simultaneously aimed at neophytes and experts.

For example, under "Avoid Similar Classifications" you write about "slab serif" and "transitional serif" fonts without defining those terms.

If someone knows what these terms mean, are they likely to need this advice, or anything more than a simple reminder of it?

That's something of an honest question. I have no idea what "slab serif" and "transitional serif" mean beyond what I can grok from your usage of the term in the article.

IMO, this article would be much more useful to me, for example, if it said something along the lines of:

"Here's a slab serif font. Notice how the serifs have the same weight as the body.

"Here's a transitional serif font. Notice how the serifs are thinner than the body.

"Notice how if you use two slightly different fonts from the same category they create tension? It's better to use fonts from different categories, like this..."

but maybe I'm not in the target audience for this article.

"...neophytes and experts"

I think if you read the comments, your assessment is incorrect. There is a near unanimous thanks for some simple, clear examples. If you are reading about combining typefaces, you obviously know the basics already. If you don't know what a slab serif is, you wouldn't be worrying about combining them with something else. In fact, you'd probably be doing something else entirely :).

I think most people (including me) do not feel any "tension". So why is it important to avoid it? Only the typography-nerds will be affected.

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

What? It looks like fun is in the eye of the beholder. The lack of proper specification really bugs me. It's sort of similar to how wine connoisseurs use words like "round" which don't really mean anything, or at least not until you've had enough "round" wines to recognise the distinct flavour property that is being described. I vote for ditching this stupid scheme in favour of being more specific and / or defining terms clearly.

Hi - I'm the author of this article over at Smashing. Actually, this kind of scheme of describing typefaces is quite common, especially among the best designers on the planet. If you follow the references at the bottom of the article, you'd find a link to this article at H&FJ:

4 Techniques for Combining Fonts http://www.typography.com/email/2010_03/index.htm

I quote directly from the article:

"Here, three fonts with distinctive silhouettes have been chosen for their contrasting dispositions: the unabashed toughness of Tungsten is a foil for both Archer's sweetness, and the cheekiness of Gotham Rounded."

Really, there is no other way to talk about wines, or typefaces. It is subjective.

If you delve into the otherwise boring individual minutia of glyph characteristics and try to write an analysis comparing descenders of the lowercase "j" from 2 or 3 typefaces, you'd lose every reader before you got out of the starting gate.

That said, if you read the feedback, a lot of people said they learned something. My goal was to teach something and have the reader come away with a bit of knowledge, however incremental.

I sort of feel the same you in that reading that post increased my understanding by close to nothing. I can see 'fun' once you say it, but I never would have thought that on my own nor would I see that there's a font "personality clash".

It's like art or fashion- it is entirely subjective, yet experts can make 'definitive' statements about style and generally agree.

I think each font carries history and connotation that is obvious to the 'experts' but not to everyone else.

Do you look at fonts and see personalities? Or personalities for tints or shapes?

Good question. I look at fonts and see overall personalities first and tints and shapes later. The tints and shapes are incidentals in the overall personality, and carry little weight when isolated from one another.

In the same way, when looking at someones face, you are struck with an overall impression first. Then you single out features. I have never met anyone who said, at first glance, so and so has wonderful eyebrows.

I actually meant seeing personalities for colours and shapes, independently of fonts.

I'm just wondering if there are some people who don't see personalities in these things (e.g., a font being "fun" or "stern") and whether they should, where budget permits, leave design to those who do?

Then again, I don't bat an eyelid at wine descriptors like "barn", "forest floor", "skinsy", etc while some people really dislike it.

My all-time favorite post on combining typefaces comes from the world-renowned H&FJ: http://www.typography.com/email/2010_03/index_tw.htm

This is an article that all non-designers should bookmark and re-read monthly. Typography is one of those things that separates real designers from i-know-how-to-use-photoshop people.

This is an article that to me, non-designer, says nothing at all. See: http://news.ycombinator.com/item?id=1869728

Mission accomplished :). As a non-designer, you aren't the target audience, so I'm not surprised, since I wrote the article for those who self-identify as designers, and who have some command of rudimentary typographic terminology. Read the comments on the article to determine who the audience is and whether or not the article reached its intended audience.

Reply on news.ycombinator.com