{"id":50391,"date":"2020-09-07T04:47:24","date_gmt":"2020-09-07T11:47:24","guid":{"rendered":"http:\/\/webdesignledger.com\/?p=50391"},"modified":"2020-09-07T04:51:40","modified_gmt":"2020-09-07T11:51:40","slug":"kerning-tracking-and-letter-spacing-2020","status":"publish","type":"post","link":"https:\/\/webdesignledger.com\/kerning-tracking-and-letter-spacing-2020\/","title":{"rendered":"A Designer&#8217;s Guide to Kerning, Tracking, and Letter-Spacing in 2020 | L e t &#8216; s  D o  T h i s"},"content":{"rendered":"\n<p>Have you ever been working on a project, added some text, only to notice that you love the font, but something looks terribly, <em>terribly<\/em> off?<\/p>\n\n\n\n<p>That&#8217;s what we call a <em>kerning<\/em> issue. <\/p>\n\n\n\n<p>Today we&#8217;re going to go over some simple rules of kerning, tracking, and letter spacing in graphic design. <\/p>\n\n\n\n<p>Let&#8217;s do this!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Kerning and Tracking?<\/h2>\n\n\n\n<p><strong><em>Kerning<\/em> <\/strong>is defined as the amount of space between two letters, or other characters, such as numbers, punctuation, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"285\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/51f29466-0a5b1769c69fc22b1387d4f0759578d5.jpg\" alt=\"\" class=\"wp-image-50393 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 500px; --smush-placeholder-aspect-ratio: 500\/285;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"285\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/51f29466-0a5b1769c69fc22b1387d4f0759578d5.jpg\" alt=\"\" class=\"wp-image-50393\"\/><\/noscript><\/figure>\n\n\n\n<p><strong><em>Tracking<\/em><\/strong>&nbsp;refers to loosening or tightening a selected block of text, while <strong><em>kerning<\/em><\/strong> is the process of adding or subtracting space between specific pairs of characters.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"725\" height=\"450\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/98481c61-intro-graphic.jpg\" alt=\"\" class=\"wp-image-50394 lazyload\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/98481c61-intro-graphic.jpg 725w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/98481c61-intro-graphic-500x310.jpg 500w\" data-sizes=\"(max-width: 725px) 100vw, 725px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 725px; --smush-placeholder-aspect-ratio: 725\/450;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"725\" height=\"450\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/98481c61-intro-graphic.jpg\" alt=\"\" class=\"wp-image-50394\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/98481c61-intro-graphic.jpg 725w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/98481c61-intro-graphic-500x310.jpg 500w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/noscript><figcaption><a href=\"https:\/\/helpx.adobe.com\/indesign\/how-to\/adjust-letter-spacing.html\">source<\/a><\/figcaption><\/figure>\n\n\n\n<p>Tracking and kerning are absolute essential parts of design, and can change the entire look of your design with literally the slide of a button. <\/p>\n\n\n\n<p> Proper kerning and tracking can take your design from something boring, to something with incredible visual appeal.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tracking<\/h2>\n\n\n\n<p>Tracking, which is also commonly known as letter-spacing, controls the consistent space between letters that are across a block of text.<\/p>\n\n\n\n<p>The spacing will be consistent throughout the entire block of text, and this method of spacing is most typically used in headings and logos. <\/p>\n\n\n\n<p>If you want to increase the space between characters, then you need to adjust the value with positive number, and if you want to decrease the space, the use negative values instead.<\/p>\n\n\n\n<p>Here are some before and after examples of tracking usage.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"528\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/cfeb801d-tracking-body-text-main.png\" alt=\"\" class=\"wp-image-50398 lazyload\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/cfeb801d-tracking-body-text-main.png 600w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/cfeb801d-tracking-body-text-main-500x440.png 500w\" data-sizes=\"(max-width: 600px) 100vw, 600px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/528;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"528\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/cfeb801d-tracking-body-text-main.png\" alt=\"\" class=\"wp-image-50398\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/cfeb801d-tracking-body-text-main.png 600w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/cfeb801d-tracking-body-text-main-500x440.png 500w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/noscript><\/figure>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/059ae5b7-images.png\" alt=\"\" class=\"wp-image-50399 lazyload\" width=\"434\" height=\"376\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 434px; --smush-placeholder-aspect-ratio: 434\/376;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/059ae5b7-images.png\" alt=\"\" class=\"wp-image-50399\" width=\"434\" height=\"376\"\/><\/noscript><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"549\" height=\"312\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/67cc1a28-garamond.gif\" alt=\"\" class=\"wp-image-50401 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 549px; --smush-placeholder-aspect-ratio: 549\/312;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"549\" height=\"312\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/67cc1a28-garamond.gif\" alt=\"\" class=\"wp-image-50401\"\/><\/noscript><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Kerning<\/h2>\n\n\n\n<p>Okay, so, to understanding kerning a little bit better,  imagine this. <\/p>\n\n\n\n<p>You remember those old wooden type boxes?<\/p>\n\n\n\n<p>They looked a little something like this.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"392\" height=\"400\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/9d35e172-unnamed.jpg\" alt=\"\" class=\"wp-image-50404 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 392px; --smush-placeholder-aspect-ratio: 392\/400;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"392\" height=\"400\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/9d35e172-unnamed.jpg\" alt=\"\" class=\"wp-image-50404\"\/><\/noscript><\/figure><\/div>\n\n\n\n<p>So while tracking refers to the consistent space between letters, kerning refers to the space between each individual letter.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"725\" height=\"450\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/c91fa748-kerning-general.jpg\" alt=\"\" class=\"wp-image-50402 lazyload\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/c91fa748-kerning-general.jpg 725w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/c91fa748-kerning-general-500x310.jpg 500w\" data-sizes=\"(max-width: 725px) 100vw, 725px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 725px; --smush-placeholder-aspect-ratio: 725\/450;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"725\" height=\"450\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/c91fa748-kerning-general.jpg\" alt=\"\" class=\"wp-image-50402\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/c91fa748-kerning-general.jpg 725w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/c91fa748-kerning-general-500x310.jpg 500w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/noscript><\/figure>\n\n\n\n<p>You can imagine that each letter in any given typeface is like that old wooden type boxes. Each letter has a box surrounding it, making it impossible to move the letters closer together while you type. <\/p>\n\n\n\n<p>Until you adjust the kerning.<\/p>\n\n\n\n<p>When you adjust the kerning, it&#8217;s kind of like you manipulate that bo, and adjust it to your liking. <\/p>\n\n\n\n<p>As you can see in this picture, manual kerning is definitely the way to go. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"728\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-970x728.png\" alt=\"\" class=\"wp-image-50405 lazyload\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-970x728.png 970w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-500x375.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-768x576.png 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-1536x1152.png 1536w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-1376x1032.png 1376w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-1044x783.png 1044w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-632x474.png 632w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-536x402.png 536w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-1000x750.png 1000w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5.png 1600w\" data-sizes=\"(max-width: 970px) 100vw, 970px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 970px; --smush-placeholder-aspect-ratio: 970\/728;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"728\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-970x728.png\" alt=\"\" class=\"wp-image-50405\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-970x728.png 970w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-500x375.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-768x576.png 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-1536x1152.png 1536w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-1376x1032.png 1376w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-1044x783.png 1044w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-632x474.png 632w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-536x402.png 536w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5-1000x750.png 1000w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/531ddcc6-kerning-4.759703d5.png 1600w\" sizes=\"(max-width: 970px) 100vw, 970px\" \/><\/noscript><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"404\" data-src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo-970x404.png\" alt=\"\" class=\"wp-image-50395 lazyload\" data-srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo-970x404.png 970w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo-500x208.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo-768x320.png 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo-1536x639.png 1536w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo-1000x416.png 1000w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo.png 1600w\" data-sizes=\"(max-width: 970px) 100vw, 970px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 970px; --smush-placeholder-aspect-ratio: 970\/404;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"404\" src=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo-970x404.png\" alt=\"\" class=\"wp-image-50395\" srcset=\"https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo-970x404.png 970w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo-500x208.png 500w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo-768x320.png 768w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo-1536x639.png 1536w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo-1000x416.png 1000w, https:\/\/storage.googleapis.com\/webdesignledger.pub.network\/WDL\/4a3bfcde-zara-new-logo.png 1600w\" sizes=\"(max-width: 970px) 100vw, 970px\" \/><\/noscript><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Letter Combos To Beware Of<\/h2>\n\n\n\n<p>The right amount of kerning and tracking will make or break your design.<\/p>\n\n\n\n<p>You can have an ugly typeface and adjust the tracking levels, and suddenly, it&#8217;s incredibly aesthetic and visually pleasing to the eye.<\/p>\n\n\n\n<p>A couple of things I do want to tell you about, so that you can learn from my mistakes and I can make things easier for you, are some weird letter combinations that just don&#8217;t look right. <\/p>\n\n\n\n<p>I&#8217;m going to let you in on some letter combos that you can always be on the look out for so your design is always the most optimal. <\/p>\n\n\n\n<p>\u2022Slanted letters like: A, K, V, W, Y<\/p>\n\n\n\n<p>\u2022 Letters with arms or cross strokes: F, L, T<\/p>\n\n\n\n<p>\u2022 Letter combinations: W or V + A (any order); T or F + a lowercase vowel<\/p>\n\n\n\n<p>These letter combinations don&#8217;t typically look good, from a kerning perspective.<\/p>\n\n\n\n<p>So that&#8217;s where you as a designer come in and make the adjustments to your liking.<\/p>\n\n\n\n<p>I just saved you a lot of time, so now you don&#8217;t have to look and wonder what looks wrong in your typeface design. <\/p>\n\n\n\n<p>You can just automatically look at these combos and make some changes.<\/p>\n\n\n\n<p>You&#8217;re welcome.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping up<\/h2>\n\n\n\n<p>Kerning and tracking are things that will always improve the more you experiment with them.<\/p>\n\n\n\n<p>So, now that you know what kerning and tracking is, keep up the good work, keep trying out new things, and see what vibes with your style.<\/p>\n\n\n\n<p>And of course, <\/p>\n\n\n\n<p>Until next time, <\/p>\n\n\n\n<p>Stay creative, y&#8217;all! <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever been working on a project, added some text, only to notice that you love the font, but something looks terribly, terribly off? That&#8217;s what we call a kerning issue. Today we&#8217;re going to go over some simple rules of kerning, tracking, and letter spacing in graphic design. Let&#8217;s do this! What is [&hellip;]<\/p>\n","protected":false},"author":1932,"featured_media":50395,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,5199],"tags":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/50391"}],"collection":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/users\/1932"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/comments?post=50391"}],"version-history":[{"count":0,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/posts\/50391\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media\/50395"}],"wp:attachment":[{"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/media?parent=50391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/categories?post=50391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignledger.com\/wp-json\/wp\/v2\/tags?post=50391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}