What exactly is kerning? What is spacing? How are they different? Let’s talk about it!

Spacing and kerning are two separate things, and both are crucial to the experience of reading type. When done correctly they are intended to be practically invisible. In this thread I will attempt to make that ‘invisible’ part a bit easier to observe.
Latin typefaces are made from a lot of individual glyphs. Each individual glyph has a left and right ‘side bearing.’ Think of it like a margin for either side.
The art of setting these margins for each glyph, is called ‘spacing.’ The left/right spacing values determine how far away a glyph will be, from the other glyphs, by default. There’s another process called ‘kerning,’ which is something else. But I’ll get to that in a moment. 😀
Just as there are counterforms within letters, we can also observe the shapes of the space in between letters. All of these negative shapes need to be balanced, and spacing is a huge part of how we achieve this.
To illustrate how this works, here’s a set of lowercase (sans serif) latin letters. At first they will be very poorly spaced, and then we’ll improve the spacing as we go. A jumble of Sans Serif letters
Let’s start with… no margins at all, on either side of every glyph. It looks… truly awful right? So let’s try something else.
What if we try random spacing values for everything? Predictably this illogical solution looks even MORE awful, but it highlights why spacing is important. Without carefully controlling the space between letters, words completely lose their readability. So how do we get it right?
Next up, let’s try adding an equal amount of space on the left and right of every single glyph. This is… better? But it’s still pretty strange looking. Why do certain letters look further away from other letters, even though we set them all to be equal?
It turns out that this is one of those pesky optical illusions. Let’s abstract this to circles/squares for a moment. This circle looks much smaller than this square, right? And yet, they match exactly in height and width.
This is purely because any round shape will invite more negative space, compared to a square shape. Here’s the fix: adjust round stuff to be literally larger than square stuff. As a result, the shapes now appear to optically match in size.
This is why the glyphs of a typeface have ‘overshoot.’ Round shapes overshoot the landmarks of the design (like the baseline and x-height), in order to make them appear the same size as everything else. A diagram highlights the 'overshoot' of the letter 'p'.
The same illusion happens with spacing. For instance, the squares and circles below have literally identical margins between them. But it appears that there is much more space surrounding the circles.
By reducing the amount of margin for a round shape, we can make it optically appear to be the right distance from its neighbors.
And this is not exclusive to round shapes. Every glyph in a typeface is carefully spaced so that it optically relates (in a predictable, rhythmic way) to every other glyph. To some extent we can organize them into groups, for instance: letters with similar round sides. A diagram highlights the round edges of several letters.
Or glyphs with straight sides. Or glyphs with diagonal sides. A group of straight sided letters, and a group of letters wi
Soon enough you realize there are glyphs where… their shape requires a completely unique approach to spacing. The goal is always the same (make the glyph feel comfortable in context with the other glyphs), but the exact values are often completely unique.
While you’re solving for the right spacing on each glyph, you are also essentially ‘hard coding’ a default ‘tracking’ value for the entire font. As in, the general amount of air that exists between the glyphs of the typeface.
The ideal amount of ‘air’ is all based on rhythm, and it’s related to the space held within the counterforms of the glyph drawings. There is a theoretical ‘ideal tempo,’ if you will, for each font. Spacing and drawing happen in unison, to find this ideal tempo.
When you adjust ‘tracking’ (also called letter-spacing in CSS), you are modifying the amount of air in between the letters, by adding or subtracting from all margins equally. This is sometimes done for aesthetic reasons, for instance.
As it turns out, some additional illusions occur, which the system of spacing cannot solve on its own. A typical example would be the letter pair ‘AV.’ The two shapes lean in the same direction on the edges where they meet, so there appears to be too much space in between them.
We cannot fix this visual disparity by reducing the spacing margin on the edges of ‘A’ or ‘V.’ Because doing so would break the way ‘A’ and ‘V’ coexist with the other glyphs.
To solve this ‘AV’ problem we need a way to change the distance between A and V, exclusively when they occur next to each other. This is called kerning.
Kerning is a supplementary system that exists to intervene on the spacing between two glyphs. When spacing alone cannot solve a visual interaction, we introduce a kerning pair to add or remove space between those 2 glyphs.
Or what about the interactions between round glyphs and diagonal ones? As in the all-caps word ‘VOICEOVER.’
What about a sentence that ends with a ‘w,’ followed by a period? That should probably scoot over.
Or what happens when you type a 7, followed by a 4?
In case, at this point, you are wondering: do you really review all this stuff, and set all these pairs? The answer is yes. We do so methodically, setting thousands of relationships with care. Often more than once, as we find the visual relationships that look best.
The kerning menu in an Adobe application will often show options for ‘metrics’ and ‘optical.’ Metrics means the kerning the typeface designer carefully set. Optical refers to an algorithm that tries to add its own procedural kerning. I recommend always using ‘metrics.’ The kerning menu in Adobe Illustrator.
Typeface design is not just the art of drawing all these various glyphs. It also involves creating an extremely intricate puzzle-like system of spacing and kerning, which facilitates the cooperation between these glyphs. When done right, it seems to be invisible.
A train takes you from one predefined spot, to another. An automobile is designed to let you drive to many locations, in any order you please. Even to places, and in combinations, that no one has travelled before. A typeface is more like an automobile, than it is like a train.
Really Sans supports over 200 languages. A vast majority of the possible words that have ever been defined in those languages, have never been typeset in Really Sans. But Really Sans is systematically designed to render those words correctly, when the time comes.
Thanks for reading! And if you’d like to be the first to typeset a particular word or phrase in Really Sans, you can do so on our brand new @lettermatic_abc website:
Special thanks to my wife @heather_cran who did a bunch of the animations for this thread. And to @danellecheney for the diagram of the Adobe type panel. 😀
Some folks can't see one of the tweets in this thread evidently? Twitter won't show it, as if it has been deleted? I'll repost it below just in case.
Kerning is a supplementary system that exists to intervene on the spacing between two glyphs. When spacing alone cannot solve a visual interaction, we introduce a kerning pair to add or remove space between those 2 glyphs.

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Riley Cran

Riley Cran Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @rileycran

8 Sep
A recent #fontSunday topic of ‘bold headlines’ made me want to talk about bold letters a bit.

I have been a fan of very bold letters for a long time. With the Lettermatic catalog, I think it has essentially been a self-imposed rule that all of our designs get taken to a very bold extreme. Because… it’s fun! The names of the Lettermatic typefaces, typeset in their bol
Not only are very bold letters eye-catching and powerful from an aesthetic perspective, I actually find they help my design process itself. I’ll explain… Me sketching a bold letter on an iPad.
Read 29 tweets
4 Aug
NEW 🧵: Did you know we only started mixing Sans and Serif typefaces in the last 200 years? One genre is much older than the other.

Let’s discuss the birth of sans serif typefaces.

I’ll use @lettermatic_abc fonts for some visuals: Parclo Sans & Serif.

Put simply: serifs are these little barb things on the ends of strokes. A ‘sans serif’ typeface means a typeface in which these are omitted, usually resulting in a blunt ending like this.
Serif letterforms are VERY old. A great example is the inscription on Trajan’s Column. People have been drawing inspiration from this inscription for over 1,900 years (and counting). A casting of the inscription carved into Trajan's Column.
Read 33 tweets
27 Jul
Today I would like to do a thread about 'counterforms.' They are a critical building block of typeface design... but what are they? How do they work?

I'll also talk about how I thought of the counterforms in Really Sans.
This thread won't be about science. It will be about observable logic, practical experience, and some ideas to think about.
Put simply, counterforms are negative spaces. One way to think about it is: all positive shapes exist purely to create negative shapes, and vice versa. A diagram pointing to counterforms of a letter 'a'.
Read 37 tweets
19 Jul
I started designing a typeface called Really Sans about 2 years ago. It is now available at @lettermatic_abc.

I am going to try something new today: a twitter thread about the underlaying ideas in Really Sans.

What goes into a typeface design?
There are a lot of Sans Serif typefaces. Why does the world need another one? This question is asked of any new entry to the genre.

There is a very clear reason, for me, as to why Really Sans exists.
Really Sans is a typeface in two halves - Large and Small. These refer to the fonts being designed for use at large and small point sizes; a common term for this is 'optical size'.

But how does optical size... work?
Read 25 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!