
Best Practices of Combining Typefaces - vladocar
http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
======
JabavuAdams
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.

~~~
Silhouette
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.

~~~
matrix
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.

~~~
smashing_mag
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...](http://www.smashingmagazine.com/2010/10/11/local-storage-and-
how-to-use-it/)

Bruce Lawson, Remy Sharp -
[http://www.smashingmagazine.com/2010/09/23/html5-the-
facts-a...](http://www.smashingmagazine.com/2010/09/23/html5-the-facts-and-
the-myths/)

Alma Hoffmann - [http://www.smashingmagazine.com/2010/09/14/finding-
alternati...](http://www.smashingmagazine.com/2010/09/14/finding-alternative-
sources-of-typographic-layout-in-our-surroundings/)

Paul Boag - [http://www.smashingmagazine.com/2010/09/06/fight-the-
system-...](http://www.smashingmagazine.com/2010/09/06/fight-the-system-
battling-bureaucracy/)

Rachel Andrew - [http://www.smashingmagazine.com/2010/07/19/how-to-use-
css3-m...](http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-
queries-to-create-a-mobile-version-of-your-website/)

Thomas Giannattasio - [http://www.smashingmagazine.com/2009/11/02/the-ails-of-
typog...](http://www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-
anti-aliasing/)

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

~~~
matrix
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.

~~~
smashing_mag
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

~~~
chime
> 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...](http://www.smashingmagazine.com/2010/05/18/the-beauty-of-typography-
writing-systems-and-calligraphy-of-the-world/) 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.

~~~
smashing_mag
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.

------
powrtoch
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.

~~~
spokey
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).

~~~
dbonneville
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.

~~~
spokey
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.

~~~
dbonneville
"...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 :).

------
makmanalp
> 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.

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

~~~
dbonneville
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.

~~~
prawn
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.

------
verisimilitude
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>

------
davidedicillo
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.

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

~~~
dbonneville
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.

