{"id":18896,"date":"2020-07-01T12:53:03","date_gmt":"2020-07-01T19:53:03","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18896"},"modified":"2020-12-29T11:47:00","modified_gmt":"2020-12-29T19:47:00","slug":"css-spacing","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-spacing\/","title":{"rendered":"CSS Font-Kerning, Letter-Spacing and Word-Spacing Property"},"content":{"rendered":"\n

When learning CSS basics, we tend to focus on the box model, how to position components on the page, and the design system elements, like font-family and font sizes. If we dive even deeper into how the font looks on the page, we need to take a look at font-kerning, the letter-spacing, and the word-spacing property. These fine details are what will take a website from being average to professional. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Font Kerning<\/h2>\n\n\n\n

Font-kerning is how the spacing is determined between two distinct characters. Fonts that are considered well-kerned have better visual appeal because of more uniform spacing between the letters. The CSS font-kerning property has three possible values:  none, normal, auto<\/em>. 
<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang="en">\n   <head>\n       <meta charset="UTF-8" \/>\n       <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n       <title>Spacing<\/title>\n       <style>\n           div {\n               font-size: 2rem;\n               font-family: serif;\n           }\n \n           #nokern {\n               font-kerning: none;\n           }\n \n           #kern {\n               font-kerning: normal;\n           }\n       <\/style>\n      \n   <\/head>\n   <body>\n       <div id="kern">AV Ta<\/div>\n       <div id="nokern">AV Ta<\/div>\n   <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
Auto<\/em> determines if font-kerning should be used or not. Some browsers will disable kerning on small fonts because the readability will suffer, according to the MDN<\/a>. Normal <\/em>means that kerning will be applied if the font has it \u2013 none <\/em>of course means kerning won\u2019t be applied. Run the code in the editor above. You\u2019ll see the CSS property most visible on \u2018AV\u2019 and \u2018Ta\u2019. The spacing from the end of one serif to the beginning of the serif on the next letter determines if kerning is applied to the text or not.<\/p>\n\n\n\n
Letter-Spacing<\/h2>\n\n\n\n
In contrast to kerning, the letter-spacing property is the uniform spacing across all letters in a line of text. It takes a length<\/em> value in px, rem, or em. These values can be positive or negative. 
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n   <head>\n       <meta charset="UTF-8" \/>\n       <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n       <title>Spacing<\/title>\n       <style>\n           div {\n               font-size: 2rem;\n               font-family: serif;\n           }\n \n           #big-spacing {\n               letter-spacing:5px;\n           }\n \n           #little-spacing {\n               letter-spacing: 1px;\n           }\n       <\/style>\n      \n   <\/head>\n   <body>\n       <div id="little-spacing">Hello World<\/div>\n       <div id="big-spacing">Hello World<\/div>\n   <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
Word-Spacing<\/h2>\n\n\n\n
Just like letter spacing, word-spacing literally means spacing between words.<\/em> The default is 0.25em, but can take a positive or negative length.
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n   <head>\n       <meta charset="UTF-8" \/>\n       <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n       <title>Spacing<\/title>\n       <style>\n           div {\n               font-size: 2rem;\n               font-family: serif;\n           }\n \n           #big-spacing {\n               word-spacing:5rem;\n           }\n \n           #little-spacing {\n               word-spacing: 1rem;\n           }\n       <\/style>\n      \n   <\/head>\n   <body>\n       <div id="little-spacing">Hello World<\/div>\n       <div id="big-spacing">Hello World<\/div>\n   <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
In this article we learned the difference between font-kerning and letter spacing as well as between letter spacing and word spacing. Browser support for all of these properties is widespread. Font kerning is not available in Internet Explorer.
<\/p>\n","protected":false},"excerpt":{"rendered":"When learning CSS basics, we tend to focus on the box model, how to position components on the page, and the design system elements, like font-family and font sizes. If we dive even deeper into how the font looks on the page, we need to take a look at font-kerning, the letter-spacing, and the word-spacing…","protected":false},"author":77,"featured_media":18897,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-18896","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nCSS Font-Kerning, Letter-Spacing | Career Karma<\/title>\n<meta name=\"description\" content=\"CSS Letter-Spacing and Word-Spacing has been available since CSS1. Font-kerning is new for CSS3. Learn what it is and the difference between all three properties.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-spacing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Font-Kerning, Letter-Spacing and Word-Spacing Property\" \/>\n<meta property=\"og:description\" content=\"CSS Letter-Spacing and Word-Spacing has been available since CSS1. Font-kerning is new for CSS3. Learn what it is and the difference between all three properties.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-spacing\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-01T19:53:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:47:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/da-nina-MBqwXZTfkdA-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-spacing\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-spacing\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"CSS Font-Kerning, Letter-Spacing and Word-Spacing Property\",\"datePublished\":\"2020-07-01T19:53:03+00:00\",\"dateModified\":\"2020-12-29T19:47:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-spacing\\\/\"},\"wordCount\":313,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-spacing\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/da-nina-MBqwXZTfkdA-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-spacing\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-spacing\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-spacing\\\/\",\"name\":\"CSS Font-Kerning, Letter-Spacing | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-spacing\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-spacing\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/da-nina-MBqwXZTfkdA-unsplash.jpg\",\"datePublished\":\"2020-07-01T19:53:03+00:00\",\"dateModified\":\"2020-12-29T19:47:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"CSS Letter-Spacing and Word-Spacing has been available since CSS1. Font-kerning is new for CSS3. Learn what it is and the difference between all three properties.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-spacing\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-spacing\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-spacing\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/da-nina-MBqwXZTfkdA-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/da-nina-MBqwXZTfkdA-unsplash.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-spacing\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Font-Kerning, Letter-Spacing and Word-Spacing Property\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Font-Kerning, Letter-Spacing | Career Karma","description":"CSS Letter-Spacing and Word-Spacing has been available since CSS1. Font-kerning is new for CSS3. Learn what it is and the difference between all three properties.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/css-spacing\/","og_locale":"en_US","og_type":"article","og_title":"CSS Font-Kerning, Letter-Spacing and Word-Spacing Property","og_description":"CSS Letter-Spacing and Word-Spacing has been available since CSS1. Font-kerning is new for CSS3. Learn what it is and the difference between all three properties.","og_url":"https:\/\/careerkarma.com\/blog\/css-spacing\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-01T19:53:03+00:00","article_modified_time":"2020-12-29T19:47:00+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/da-nina-MBqwXZTfkdA-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-spacing\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-spacing\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"CSS Font-Kerning, Letter-Spacing and Word-Spacing Property","datePublished":"2020-07-01T19:53:03+00:00","dateModified":"2020-12-29T19:47:00+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-spacing\/"},"wordCount":313,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-spacing\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/da-nina-MBqwXZTfkdA-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-spacing\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-spacing\/","url":"https:\/\/careerkarma.com\/blog\/css-spacing\/","name":"CSS Font-Kerning, Letter-Spacing | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-spacing\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-spacing\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/da-nina-MBqwXZTfkdA-unsplash.jpg","datePublished":"2020-07-01T19:53:03+00:00","dateModified":"2020-12-29T19:47:00+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"CSS Letter-Spacing and Word-Spacing has been available since CSS1. Font-kerning is new for CSS3. Learn what it is and the difference between all three properties.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-spacing\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-spacing\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-spacing\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/da-nina-MBqwXZTfkdA-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/da-nina-MBqwXZTfkdA-unsplash.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-spacing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Font-Kerning, Letter-Spacing and Word-Spacing Property"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18896"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18896\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18897"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}