Letter spacing, or tracking, is a part of typography. Typography is the art and technique of\u00a0arranging type\u00a0to make\u00a0written language\u00a0legible,\u00a0readable, and appealing\u00a0when displayed. Besides letter-spacing (tracking), type arrangement involves selecting typefaces,\u00a0point sizes,\u00a0line lengths, line-spacing, and\u00a0kerning.<\/p>\n\n\n\n
Adjusting the space between letters in an optically consistent way changes the visual density of a line or block of text. Tracking is different from kerning, which involves adjusting the spacing between specific adjacent characters that would otherwise look poorly spaced.<\/p>\n\n\n\n
Firstly, the effect on text legibility. Tight letter-spacing, especially in small-sized text, can reduce readability. Adding white space around characters enables individual characters to be recognized more quickly by the eye. Too much space, however, can detach letters making it harder for readers to recognize whole words and phrases, thus also diminishing readability.<\/p>\n\n\n\n
A use case would be in news design, where deadlines are tight. For example, news editors have no time to rewrite paragraphs that end in split words or create widows or orphans. Hence, they adjust letter-spacing instead.<\/p>\n\n\n\n
Secondly, is using letter spacing to insert fixed spaces. This practice was once done in hand-set metal type to achieve letter spacing. However, today designated spaces vary by size and include thin spaces, hair spaces, and word spaces. It also comprises en-spaces and em-spaces. The former is equal to half of the current point size, and the latter is the same width as the current point size.<\/p>\n\n\n\n
While basing the letter-spacing design on legibility, appeal, uniformity, and the like, it ignores that applying letter spacing to some written international languages would make the text look broken. For example, languages using Arabic script are expected to have visually connected letters. <\/p>\n\n\n\n
CSS (Cascading Style Sheets) is not a programming language or a markup language but a style sheet language used to selectively style HTML elements. The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. <\/p>\n\n\n\n
Positive letter-spacing values cause characters to spread farther apart, while negative values bring them closer together. As mentioned above, accessibility concerns come into play. An excessive positive or negative value may cause the styled word(s) to become unreadable. For instance, by styling text with a substantial negative value, the characters could overlap to the point where the word(s) is unrecognizable.<\/p>\n\n\n\n
The bottom line is that legible letter-spacing must be decided on a case-by-case basis, as different font families have different character widths. There is no single value that can ensure that all font families automatically maintain their legibility.<\/p>\n","protected":false},"excerpt":{"rendered":"
Letter spacing is a fundamental aspect of typography for web designers. It involves an optically consistent change to the space between letters to alter the visual compactness of a block or line of text<\/p>\n","protected":false},"author":1292159,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_angie_page":false,"page_builder":"","footnotes":""},"categories":[15,29],"tags":[16],"class_list":["post-2780","post","type-post","status-publish","format-standard","hentry","category-glossary","category-web-design","tag-build"],"acf":[],"_links":{"self":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/2780","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/users\/1292159"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/comments?post=2780"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/2780\/revisions"}],"predecessor-version":[{"id":2859,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/posts\/2780\/revisions\/2859"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/media?parent=2780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/categories?post=2780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/resources\/wp-json\/wp\/v2\/tags?post=2780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}