{"id":14063,"date":"2013-03-12T07:48:16","date_gmt":"2013-03-12T14:48:16","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14063"},"modified":"2022-05-31T07:06:01","modified_gmt":"2022-05-31T14:06:01","slug":"letter-spacing","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/l\/letter-spacing\/","title":{"rendered":"letter-spacing"},"content":{"rendered":"\n<p>The <code>letter-spacing<\/code> property controls the amount of space between each letter in a given element or block of text. Values supported by <code>letter-spacing<\/code> include font-relative values (<code>em<\/code>, <code>rem<\/code>), absolute values (<code>px<\/code>) and the <code>normal<\/code> property, which resets to the font&#8217;s default.<\/p>\n\n\n\n<p>Using font-relative values is recommended, so that the <code>letter-spacing<\/code> increases or decreases appropriately when the font-size is changed, either by design or by user behavior.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p {\n  letter-spacing: 0.0625em;\n}<\/code><\/pre>\n\n\n\n<p>The most important point to note when using <code>letter-spacing<\/code> is that the value specified does <i>not<\/i> change the default \u2014 it is <i>added to<\/i> the default spacing the browser applies (based on the font metrics). <code>letter-spacing<\/code> also supports negative values, which will tighten the appearance of text, rather than loosening it.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_kIEli\" src=\"\/\/codepen.io\/anon\/embed\/kIEli?height=250&amp;theme-id=1&amp;slug-hash=kIEli&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed kIEli\" title=\"CodePen Embed kIEli\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">letter-spacing: normal | &lt;length><\/code><\/pre>\n\n\n\n<ul class=\"is-style-almanac-list\"><li><strong>Initial value:<\/strong> <code>normal<\/code><\/li><li><strong>Applies to<\/strong>: inline boxes and text<\/li><li><strong>Inherited:<\/strong> yes<\/li><li><strong>Percentages:<\/strong> n\/a<\/li><li><strong>Computed value:<\/strong> an absolute length<\/li><li><strong>Animation type:<\/strong> by computed value type<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword value *\/\nletter-spacing: normal;\n\n\/* &lt;length> values *\/\nletter-spacing: 1px;\nletter-spacing: .25em;\nletter-spacing: .3rem;\n\n\/* Global values *\/\nletter-spacing: inherit;\nletter-spacing: initial;\nletter-spacing: revert;\nletter-spacing: revert-layer;\nletter-spacing: unset;<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"points-of-interest\">Worth noting&#8230;<\/h3>\n\n\n<ul><li>Subpixel values: in most browsers, specifying a value that computes to less than <code>1px<\/code> will result in no <code>letter-spacing<\/code> being applied.<\/li><li>The <code>letter-spacing<\/code> property is animatable with <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/transition\/\">CSS Transitions<\/a>.<\/li><li>One of the ways to <a href=\"https:\/\/css-tricks.com\/fighting-the-space-between-inline-block-elements\/\">fight against the space<\/a> between inline block elements is setting <code>letter-spacing: -4px;<\/code> on the parent container of inline-block elements. You will then need to reset <code>letter-spacing: normal;<\/code> on the child elements.<\/li><li>It is rarely if ever a good idea to letter space lower case letters.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-letter-spacing\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">30<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">2<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">9<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">6.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">4.4<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">4.0-4.1<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The letter-spacing property controls the amount of space between each letter in a given element or block of text. Values supported by letter-spacing include font-relative values (em, rem), absolute values (px) and the normal property, which resets to the font&#8217;s default. Using font-relative values is recommended, so that the letter-spacing increases or decreases appropriately when [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13933,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14138,"url":"https:\/\/css-tricks.com\/almanac\/properties\/w\/word-spacing\/","url_meta":{"origin":14063,"position":0},"title":"word-spacing","date":"March 11, 2013","format":false,"excerpt":"The word-spacing property is similar to letter-spacing, though naturally its use governs the amount of space between the words in a piece of text, not the individual characters. .element { word-spacing: .75em; } word-spacing can receive three different values: the \u201cnormal\u201d keyword, which resets the default spacinglength values using any\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322037,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-kerning\/","url_meta":{"origin":14063,"position":1},"title":"font-kerning","date":"September 25, 2020","format":false,"excerpt":"The CSS font-kerning property defines the way specific pairs of letters are spaced. You see, fonts often contain information about how much breathing room a character has on its left and right edges. The proper term for the spacing is sidebearings. When two characters are placed next to each other,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376849,"url":"https:\/\/css-tricks.com\/wordpress-global-styles-reference-tables\/","url_meta":{"origin":14063,"position":2},"title":"WordPress Global Styles Reference Tables","date":"January 31, 2023","format":false,"excerpt":"We\u2019ve covered a lot of ground in this series. So much so that I thought it would be helpful to condense all the various block theme settings and styles from theme.json into a single page right here.","rel":"","context":"In \"json\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":249770,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/initial-letter\/","url_meta":{"origin":14063,"position":3},"title":"initial-letter","date":"January 13, 2017","format":false,"excerpt":"initial-letter is a CSS property that selects the first letter of the element where it is applied and specifies the number of lines the letter occupies. You may have seen something like this on news sites, where the first letter of a leading paragraph is larger than the rest of\u2026","rel":"","context":"In \"initial-letter\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":257413,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-justify\/","url_meta":{"origin":14063,"position":4},"title":"text-justify","date":"August 8, 2017","format":false,"excerpt":"The text-justify property in CSS is a companion to the text-align property that is used to set the justification method of text when text-align is set to the justify value. p { text-align: justify; text-justify: inter-word; } Values inter-word: Specifies that text is justified by adjusting the spacing between words,\u2026","rel":"","context":"In \"text-justify\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14190,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/first-line\/","url_meta":{"origin":14063,"position":5},"title":"::first-line","date":"September 6, 2011","format":false,"excerpt":"The ::first-line pseudo-element is for applying styles to the first line of an element. Imagine a paragraph that is several lines long (like this one!). ::first-line allows you to style that first line of text. You could use it to make it larger or set it in small-caps as a\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14063"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14063"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14063\/revisions"}],"predecessor-version":[{"id":366130,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14063\/revisions\/366130"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13933"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14063"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}