Lately I've been looking into designing my own font.
As practice I did some small family jobs, like I had created this design with 3 letters, the whole thing was pretty much a "custom font". I was showing it to my family and friends...
My uncle (who is in the creative industry said:
You aligned it perfectly (mathematically), but in regards to visually (it still looked very good) there are different amounts of spacing required between different letters.
[Like less space between E and the next letter.]
So I started looking into it, and looked at various fonts and notice that he was correct:
In the Arial font there is very little space between the r and the i and over double that on either side of the a, but the A has less space.
My question is:
Is there a rule for making these spaces, maybe it's some kind of mathematical thing that I need to learn, or is it just a visual aspect at the discretion of the designer. (kind of play around till you like the way it looks)
Note: Line are measured using the farthest reaching point on each side of a letter and a straight line across
Answer
It's called kerning, which is an additional spacing applied to specific pairs of characters1.
The aim is to have a perceived equal spacing between glyphs. Mathematically equal spacing based on the bounding box of each glyph doesn't always work since glyphs have very different shapes; some having a lot of empty space within the bounding box, and some hardly any. Glyphs that commonly need kerning are characters with slanted forms (e.g. "W", "V", "A") and characters with "arms" or large crossbars (e.g. "T", "F").
Take the string "AVAIL" as an example. With no kerning applied, the empty space between the "A" and the "V" is very obvious:
So we apply some negative kerning to bring it in:
Another thing to look out for is collisions. Take the following example... without any specific treatment, the hood of the "f" and the dot of the "i" collide, so we need to pull them apart:
Collisions with "f"s are commonly fixed with specific ligatures too (but I digress...)
Watch out for collision between serifs too. The "y" and "p" here looks sloppy, for example:
See also: What are some common kerning pairs?
A few common techniques
Kern upside-down
Flipping the text lets you focus on the shapes and space without being distracted by the actual letterforms, words and meaning; you can just treat them as shapes...
Squint
Squinting or crossing your eyes to blur your vision of the type gives you a good view of the overall contrast and use of space (This is a good technique not only for kerning but any layout or spacing). You can set up an actual blur on your type in whatever software you're using too if it helps...
Glyphs — which I've been using for type design recently — has both of these as features built in to the editor:
Balloons?
A more abstract technique I've seen mentioned a few times is the balloon technique... You essentially just need to imagine a ballon between each character. The balloons need to fit between the characters with as little space between the balloon and the characters as possible and without spilling above or below the x-height; all while maintaining the same area.
Practice...
As with everything, the best way to learn and improve is practice, practice, and more practice.
The Kerning Game is a nice little tool to practice your kerning and compare it against an experts kerning...
1 Or sometimes more. See What is a polynomial kerning table?
No comments:
Post a Comment