
A Beginner’s Guide to Kerning Like a Designer - wyclif
https://designschool.canva.com/blog/kerning/
======
jack_jennings
While the tips presented are fine if you actually need to kern something, in
realty the only time you would ever need to do this is if you're using a font
that is poorly made, or if you're designing your own typeface.

If you've paid for a decent typeface, it more than likely works as it should
and has all of the common kern pairs already defined. If you're typesetting a
language that is less common, you may run into combinations of letter that
haven't been kerned, in which case any designer worth their salt would be
happy to get an email showing the issue (so they can amend their font files in
this and other typefaces they have produced).

In the end kerning is a very very time consuming process, and you can save
yourself a lot of time just by starting with a decent typeface in the first
place.

~~~
thristian
I wouldn't go that far; in _The Elements of Typographic Style_ Robert
Bringhurst mentions having to tweak the kerning of just about every typeface
he's ever worked with, and he's professionally associated with Adobe's
typography department, so it's not like he's never worked with professionally-
made typefaces.

To make a software development analogy, manual kerning is a bit like writing
your own HTTP client library from scratch. Any language you use probably
already has a pretty good or a great one, so it's probably not worth your time
unless you have a very specialist use-case, you want to learn how to do it
yourself, or you're legitimately that much better than the original
implementor.

~~~
Chris_Newton
Perhaps a more direct analogy would be that manual kerning is like hand-
optimising code at a low level.

You can improve almost anything to some degree, and an expert would be able to
detect even quite small differences on close inspection. However, an isolated
minor deviation would not make a significant difference in normal use, and the
effort to hand-optimise everything is prohibitive.

However, a user _could_ notice either the cumulative effect of many suboptimal
areas (poor built-in kerning in a font, careless inefficiency in frequently
run code) or a single major problem (not tidying up a large logo or hero
graphic, not optimising the body of a loop running many times causing a delay
in UI response). In these cases, the benefit of manual refinement may be
amplified enough to justify the effort.

------
jahewson
I see quite a few HN commenters asking, "why isn't this automated?" Well, it
is! In 1994 one of the pioneers of vector fonts, Peter Karow, worked at Adobe
on "optical kerning", which inferred kerning pairs for a font automatically.
Adobe's algorithm models the whitespace between two letters as a viscous fluid
which resists flowing into tight areas. They compared it to hand-kerning and
found that neither approach was perfect, but that there were 120% more
deficiencies when kerning by hand and 30% redundancy in the kerning pairs. So
computers, can and do kern better than humans. However, there are still many
poorly kerned fonts around, even digital versions of classics such as Times
don't ship with particularly good kerning pairs, so designers often find
themselves having to tweak kerns.

~~~
gioele
And do not forget Igino Marini's iKern [1] used to kern plenty of forts.

[1] [http://ikern.com/k1/ikern/the-ikern-
theory/](http://ikern.com/k1/ikern/the-ikern-theory/)

------
pavlov
I know a guy who has owned various-sized printing companies since the late
seventies.

He told me that, when desktop publishing started happening in mid-'80s, the
consensus in his business was that computers wouldn't have much of an impact
on "real printing" because the kerning you got from digital sources was so
bad.

When I hear people saying "there's no way a computer could do that properly",
I think of 1985 print shop owners confident in how their handmade kerning
provides value to customers.

~~~
k__
> their handmade kerning provides value to customers

Did it?

~~~
ryandrake
I'd love to see an actual measurement of this, if only a simple test. Two
otherwise identical websites, one kerned by a professional designer, and one
just using some default. Serve each of them to a random 50% of your customers
and see which one converts more users or sells more widgets or whatever the
metric is. Does the kerned version bring in more value than it cost to have
the designer fiddle with the fonts?

My belief has always been that all design work should be measured and have to
withstand the "does it actually provide value" test, since otherwise, how do
you know one design is better than another?

~~~
flycaliguy
Just sit on the subway and browse the ads above your head. Some will be
designed by a pro and the typography will be properly handled. Others will
make you want to poke your eyes out if you examine them closely.

I'm going to say that yes, 100%, it provides value by creating a more
appealing display. Frankly, it's embarrassing to have your brand displayed
without the typography handled properly. If you don't see the difference then
maybe you should do yourself a favour and not delve into the art of type
because there is no turning back once you start noticing the bad stuff.

~~~
drostie
The question presented is not whether it makes a stylistic difference visible
to those in-the-know but rather whether it makes a motivational difference
visible in the actions of the mud-people. Those are two very different
questions.

~~~
hodwik
I worked for a multi-billion dollar finance company that worked primarily with
middle and lower class people.

Our marketing department _swore_ by bad design. Not just simple, accessible.
Intentionally _bad_. They believed it grabbed more attention, and that their
customers felt safe/found them more trustworthy.

When we tried out more polished marketing we had measurably fewer responses.

~~~
1812Overture
If it is achieving the intended impact, it's good design not bad design. I've
seen looking at direct mail response rates that a very slick polished classy
piece can underperform something more FUCKING LOOK AT ME MY LETTERS ARE BIG
COLORFUL HERE'S CLIP ART OF A GUY HOLDING CASH!!!!!

~~~
hodwik
That's still bad design. It may be good marketing though.

Not the same thing.

~~~
tamana
It's ugly, not bad.

------
imurray
A kerning game: [http://type.method.ac/](http://type.method.ac/)

~~~
maroonblazer
My god this is wonderful and addictive. Is there something similar for
leading?

~~~
duopixel
Thanks! (I'm the author). A leading game could be interesting, I'll give it a
spin sometime soon :)

~~~
amenod
Great game, really addictive! Kudos!

------
chris_wot
Only show this to someone you really hate. [1]

1\. [http://xkcd.com/1015/](http://xkcd.com/1015/)

~~~
KineticLensman
This [1] doesn't concentrate on kerning as such, but it is my favourite
typeface-related comic strip.

[1] [http://wondermark.com/650/](http://wondermark.com/650/)

------
doki_pen
It seems that the rules are pretty well defined. Why can't computers auto-
kern?

~~~
jack_jennings
This is called "Optical" kerning in Adobe products. In general it's a good
time saving device if for some reason you're using a typeface with no kerning
pairs defined, but the result often ends up looking robotic and either too
tightly or too loosely spaced (as I believe it ends up kerning every pair
rather than only those that need kerning). If you have a typeface made by a
reputable foundry there's usually no need to turn this feature on.

On the type design end of kerning, automated kerning does exist, though it's
always tuned by hand afterwards. The most complicated part of kerning is that
there are variables that need to be tuned based on the purpose of the
typeface. If the typeface is intended for screen use or print use, or if it's
made for large headlines or tiny captions, the amount and method of kerning
changes, and so would the algorithm needed to generate it.

~~~
legulere
That sounds like a perfect match for using machine learning. The exact
connection what we think is the perfect kerning isn't obvious and the model
used by Adobe seems to be arbitrarily selected. Machine learning probably can
approximate how a human decides which kerning is best better.

~~~
jack_jennings
Right, though I'm skeptical that the program would also be able to correctly
identify the motivation for the typeface, which drives all of the decisions
about how it behaves. That component of the program would end up being far
more complex than generating the actual kerning pairs themselves.

------
laxentasken
>>designschool

Got a big pop-up over my screen asking for signing the mail list while reading
the article. I'm sorry but into the trash it goes.

~~~
itp
I got the same pop-up. I clicked the X button, which didn't seem like too much
of a burden to continue reading this relatively interesting and free content.

~~~
marssaxman
...thereby contributing to the problem by reinforcing the irritating behavior.

------
glossyscr
Nice post but _the_ essential info is missing—the CSS property font-kerning.

The font-kerning property controls the usage of the kerning information; it
controls how letters are spaced. The kerning information is stored in the
font, and if the font is well-kerned.

~~~
ekianjo
Here: [https://www.w3.org/TR/css3-fonts/#propdef-font-
kerning](https://www.w3.org/TR/css3-fonts/#propdef-font-kerning)

Question is, how do you find fonts that have proper kerning information
attached ?

~~~
glossyscr
Just get the expensive all-time classics from the big guys like URW++,
Linotype etc.

EDIT: Or just go to MyFonts.com, to any font and type a sample text which
includes some kerning, such as the word 'WATER'; eg try it here for the
Helvetica Neue family and voilà it has kerning:
[http://www.myfonts.com/fonts/linotype/neue-
helvetica/](http://www.myfonts.com/fonts/linotype/neue-helvetica/)

------
mrestko
Most heinous example of poor kerning in a professional publication:
[http://i.imgur.com/Z1869gK.jpg](http://i.imgur.com/Z1869gK.jpg)

------
sp332
A little Google easter egg:
[https://encrypted.google.com/search?q=kerning](https://encrypted.google.com/search?q=kerning)
or
[https://encrypted.google.com/search?q=keming](https://encrypted.google.com/search?q=keming)

------
elbigbad
Kerning.js is a really good css/js library to include in your projects if
you're interested in this stuff but not a professional. It lets you take
control of what's going on with the typography on your site.

[http://kerningjs.com/](http://kerningjs.com/)

------
seanmcdirmid
For those unfamiliar with how easy it is to get kerning wrong, I suggest this
fantastic sub-reddit:

[https://www.reddit.com/r/keming](https://www.reddit.com/r/keming)

I remember old terminal style fonts where pom would read like porn, and vice
versa. Fun days.

------
melling
This recent article is also useful if you want to learn a little more about
typography:

[https://medium.com/martiancraft-s-syndicate/why-san-
francisc...](https://medium.com/martiancraft-s-syndicate/why-san-
francisco-b86bd45f3273)

------
kriegslustig
Kerning.js sounds like a horrible idea. It's bloating your DOM, real bad.
That's especially bad for SPAs that are constantly diffing and changing the
DOM.

The project also has a ton of open and unanswered issued, of which some sound
pretty severe.

Edit: Grammar

------
Angostura
see also the nicely named Reddit sub /r/keming

------
empressplay
You don't need a guide, you need an eye for it.

------
amenod
I wonder why this process is not automated? I mean, it should be fairly easy
to create an algorithm which would adjust letter spacing based on the actual
printed letter. Another milestone for AI, now that Go is conquered? ;)

~~~
Rumudiez
It is, actually, and in two instances, even.

Type designers use software to automatically create all common kerning pairs
and to then try its best to align them on its own, after which the designer
goes through them one by one to correct the program as necessary.

The other way this can be used is with any endpoint design software like
InDesign, which has the option to set type in the 'metric' or 'optical' modes
[0]. Metric uses the font's built-in kerning pairs (if any exist), while
optical overrides them with the application's own algorithm.

If you're using a font that doesn't have built-in kerning pairs, though,
you're probably better off choosing another typeface than blindly trusting
this software in hundreds of pages of body copy. Browsers AFAIK still don't
support kerning pairs and rely on their own hideous kerning algorithm, toggled
on through `text-rendering: optimizeLegibility;` in CSS.

[0] [http://type-ed.com/2013/12/08/metrics-vs-optical/](http://type-
ed.com/2013/12/08/metrics-vs-optical/)

~~~
jahewson
WebKit has supported kerning pairs via `text-rendering: optimizeLegibility;`
since 2010. It works just fine.

