Kerning

To kern or not to kern? There is a question almost every designer faces during his career. Some find kerning easy, others find it a tricky process, where success is achieved more by luck than by skill. Well, kerning is not a matter of luck, you can practice and master it. In today’s article I am going to show some best practices for kerning, that bring your typography skills to the next level. Some important terms Before we start our journey to mastering kerning, let’s familiarize ourselves with some basic terms. Spacing — is the amount of space between characters (letters, punctuation marks, numbers). Kerning — is a process of adjusting space between two individual characters. Kerning is usually calibrated in 1/1000 of an “em.” This is a “box” with the width of an uppercase letter M within the particular typeface. “Em” is a square with the width of capital M. There are three types of kerning: Metrics kerning uses kern pairs, which are included with most fonts. Kern pairs contain information about the spacing of specific pairs of letters. Some of these are: LA, P., To, Tr, Tu, Te, Ty, Wa, WA, VA, Ya, We etc. Gravit Designer uses metrics kerning by default, so that specific pairs are automatically kerned when you import or type a text. Optical kerning adjusts the spacing between adjacent characters based on their shapes. Some design apps provide this feature as an alternative to metrics kerning, if the chosen typeface has a default kerning that is way off. Manual is a pretty self explanatory type of kerning. It’s when you kern type according to the specific needs of your project. That’s what we are going to in today’s article Now, with all the terms familiarized, let’s start our ascent to kerning mastery. Choose the right font There is little use in making kerning adjustments until your typeface is determined. What may work for one font, doesn’t work for another. Sounds obvious, but we tend to change our type decision in the last minute. We can, of course, bank on the kerning we’re already made for previous face, but instead we should start from zero and treat each typeface as unique. Some examples from Gravit’s web font library. So, starting with the right typeface can save you a lot of time and effort. In Gravit Designer you have a nice collection of typefaces to choose from, divided into two main groups: Web fonts from Google fonts that come embedded with Gravit. System fonts stored on your device. All desktop versions of Gravit Designer are packed with two collections of fonts. Adjust leading and tracking After choosing a font we should adjust the leading. Leading (linespacing) refers to the vertical amount of space between lines in a typeface. It highly affects readability of long texts and may also influence your kerning decision. Leading (linespacing) To adjust leading in Gravit Designer, select the text and navigate to Appearance > Spacing >Line. Use the input field dialog to adjust the leading (line spacing). Leading, pronounced “led-ing”, derives from the days when type was set by hand and typesetters used thin strips of lead to space apart the rows of letters. Tracking is a process of adjusting the space between group of characters, words and sentences. Tracking is a process of adjusting letter-spacing in whole words. Tracking affects overall character density in a copy and is often used to eliminate widows and orphans in a paragraph. Widow: a very short line at the end of a paragraph or column. There are two ways to start tracking in Gravit Designer: Select the text copy and navigate to Appearance > Spacing > Word to change the distance between the entire words: Tracking words with word spacing in Gravit Designer. Select the text and go to Appearance > Spacing > Char to change the distance between all characters in your copy: Tracking in Gravit Designer Follow your eye Kerning is far from being exact science with strict rules and parameters. When you kern the type, you shouldn’t imply mathematical formula or accurate measurements with geometric tools. The only tool you need is your eye. Your main goal is a perceived equal distance and aesthetically pleasing design. That‘s why relying on the software’s optical kerning doesn’t sound like a good idea, especially at larger sizes. To start manual kerning in Gravit Designer, select a first character in the pair of characters and navigate to Appearance > Spacing > Char. Kerning in Gravit Designer. Know what to kern Once you start regularly practice to kern your wordmarks and titles, you’ll notice that some letters are more problematic than others. For example, diagonal sided upper-case letters like A, V, W, Y are challenging letters to kern, because of a massive space they create with upper and lower case letters. Letters with large arms/crossbars, such as T, F, can also cause a lot of problems during the process. These are typical letter combination, that often need kerning at larger sizes Pairs, that require kerning at larger sizes. Source: vitorials.net. Notice that the vast majority of combinations contains letters from the two groups, mentioned above. All of them have at least one uppercase letter. Think about letter forms Most of the kerning problems are caused by uppercase letters, however, lower case letters also require some attention. Luckily, font designer Ilene Strizver provides a good explanation on how to kern lower-case letters based on spatial relationship between straight-sided (l, i, n, u, etc.) and rounded letter forms (o, c, etc.) In pairs of rounded letters, the space curves away at the top and bottom. These combinations require lesser distance, than pairs of rounded and straight-sided letters, where the space curves away only in one direction. The space only curves around rounded shapes. A pair of straight-sided letters requires slightly more distance than the previous two, since the space doesn’t expand at the top or bottom. A pair of straight-sided letters requires more space. Kern in groups of three Some letters, like b, d, p, g, q have double nature. They are both straight-sided and rounded. There is a good practice to kern these letters in groups of three. Kerning type using this technique in Gravit Designer is a pretty straightforward process. Cover the rest of the word with rectangles, select the first letter, and adjust the spacing. Kerning using group of three in Gravit Designer This technique also helps you to focus on problematic regions and draw your attention away from the word’s meaning Flip upside-down Sometimes, designers get distracted with the meaning of the word or phrase they kern. You may not even realize that it’s happening. Take words like quiet or low for example. These words could play tricks on your subconscious and make you feel like there’s a need to kern them tighter. In psychology this kind of the effect is called priming. Flip upside-down To avoid of being distracted by the meaning of the words flip them upside down. This simple trick can help you to focus on the letters and the space around them. Use “Flip Vertical” to flip the word upside-down. Ship two versions In digital typefaces used today, the space of letters is controlled by a table of kern pairs, which are fine-tuned at smaller sizes and need more kerning at larger sizes. Therefore, it makes sense to supply a logo at two sizes: A smaller one, that just needs slight kerning or none at all, a larger, more kerned version. Know your tools I may feel easy to play with letter-spacing in a good design software, but when your beautifully kerned headline goes online, how would you handle the spacing problem? Luckily for us, some great Javascript tools have been created to make this job a little easier. One of the best for kerning online is Kern.js, an extension of the well-known jQuery plugin from Lettering.js by “Radical web typography.” Kern.js will help you to handle kerning online. Another great online tool worth mentioning is kerning.js. This Javascript library allows you to kern, style, transform, and scale your web type with real CSS rules. Practice more All these techniques will take practice before they become second nature. To get started, try out this fun kerning game, developed by Method of Action. It invites you to approach ten common kerning tasks and compares your solutions with those from master typographers.