{"id":322037,"date":"2020-09-25T11:22:49","date_gmt":"2020-09-25T18:22:49","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=322037"},"modified":"2020-10-01T11:45:03","modified_gmt":"2020-10-01T18:45:03","slug":"font-kerning","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-kerning\/","title":{"rendered":"font-kerning"},"content":{"rendered":"\n<p>The CSS <code>font-kerning<\/code> property defines the way specific pairs of letters are spaced. <\/p>\n\n\n\n<p>You see, fonts often contain information about how much breathing room a character has on its left and right edges. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"175\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/font-sidebearing.png?resize=400%2C175&#038;ssl=1\" alt=\"\" class=\"wp-image-322094\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/font-sidebearing.png?w=400&amp;ssl=1 400w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/font-sidebearing.png?resize=300%2C131&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The proper term for the spacing is <em>sidebearings<\/em>.<\/figcaption><\/figure>\n\n\n\n<p>When two characters are placed next to each other, their sidebearings add up to form the actual space between characters.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"175\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/font-sidebearing-two.png?resize=400%2C175&#038;ssl=1\" alt=\"\" class=\"wp-image-322096\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/font-sidebearing-two.png?w=400&amp;ssl=1 400w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/font-sidebearing-two.png?resize=300%2C131&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The right sidebearing of A and the left sidebearing of V define the space between them.<\/figcaption><\/figure>\n\n\n\n<p>Font designers will adjust the sidebearings between two specific characters so they look better together. That&#8217;s <em>kerning<\/em> and that&#8217;s what the <code>font-kerning<\/code> property lets us decide: whether we want to use the font\u2019s kerning or disable it altogether. So, if the font you\u2019re working with doesn\u2019t support kerning data, then this property will have no effect on it.<\/p>\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\">font-kerning: auto | normal | none<\/code><\/pre>\n\n\n\n<ul class=\"ticss-134bdf2f\"><li><strong>Initial value:<\/strong> <code>auto<\/code><\/li><li><strong>Applies to:<\/strong> all elements<\/li><li><strong>Inherited:<\/strong><\/li><li><strong>Computed value:<\/strong><\/li><li><strong>Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<p><code>font-kerning<\/code> accepts the following values:<\/p>\n\n\n\n<ul><li><code>auto<\/code>: This lets the browser decide whether or not to use font kerning.<\/li><li><code>normal<\/code>: Allows the kerning stored in the font to be used.<\/li><li><code>none<\/code>: Disables kerning.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PoNVXjX\" src=\"\/\/codepen.io\/anon\/embed\/PoNVXjX?height=300&amp;theme-id=1&amp;slug-hash=PoNVXjX&amp;default-tab=result\" height=\"300\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PoNVXjX\" title=\"CodePen Embed PoNVXjX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\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=\u201cfont-kerning\u201d\" 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\">29*<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">34<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">7*<\/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\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/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\">8*<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related properties<\/h3>\n\n\n<ul><li><code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-synthesis\/\">font-synthesis<\/a><\/code><\/li><li><code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant\/\">font-variant<\/a><\/code><\/li><li><code>font-variant-alternates<\/code><\/li><li><code>font-variant-caps<\/code><\/li><li><code>font-variant-ligatures<\/code><\/li><li><code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant-numeric\/\">font-variant-numeric<\/a><\/code><\/li><li><code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/letter-spacing\/\">letter-spacing<\/a><\/code><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. When two characters are placed next to each other, their sidebearings add up to form the actual space between characters. Font designers [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":13921,"menu_order":0,"comment_status":"closed","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":164823,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-rendering\/","url_meta":{"origin":322037,"position":0},"title":"text-rendering","date":"March 5, 2014","format":false,"excerpt":"The text-rendering property in CSS allows you to choose quality of text over speed (or vice versa) allowing you to fine tune optimization by suggesting to the browser as to how it should render text on the screen. Said another way in MDN: The text-rendering CSS property provides information to\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":235583,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-feature-settings\/","url_meta":{"origin":322037,"position":1},"title":"font-feature-settings","date":"December 4, 2015","format":false,"excerpt":"This property gives us control over advanced typographic settings such as small caps, ligatures, and swashes. To activate them you must declare which value you need in quotes and then followed by either 1 or on to enable. Alternatively, you can disable them with either 0 or off: .element {\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":318556,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-synthesis\/","url_meta":{"origin":322037,"position":2},"title":"font-synthesis","date":"August 5, 2020","format":false,"excerpt":"The font-systhesis property in CSS gives the browser instructions for how to handle font bolded and italicized character when the specified font-family doesn't include them. Let's take Lato from Google Fonts as an example. It says there are 10 different variations of the font. Each one of those font variations\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-specimen.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":259792,"url":"https:\/\/css-tricks.com\/almanac\/properties\/u\/unicode-range\/","url_meta":{"origin":322037,"position":3},"title":"unicode-range","date":"September 8, 2017","format":false,"excerpt":"The unicode-range property in CSS is used by the @font-face to define the characters that are supported by the font face. @font-face { font-family: 'MyWebFont'; \/* Define the custom font name *\/ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); \/* Define where the font can be downloaded *\/ unicode-range: U+00-FF; \/* Define\u2026","rel":"","context":"In \"unicode-range\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":17810,"url":"https:\/\/css-tricks.com\/video-screencasts\/113-creating-and-using-a-custom-icon-font\/","url_meta":{"origin":322037,"position":4},"title":"#113: Creating and Using a Custom Icon Font","date":"August 22, 2012","format":false,"excerpt":"As we've said around here many times: icon fonts are awesome. They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas\/purposes in one single download. But they are even more awesome than sprites because they are vector and so can scale to\u2026","rel":"","context":"With 53 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":235175,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-size-adjust\/","url_meta":{"origin":322037,"position":5},"title":"font-size-adjust","date":"November 25, 2015","format":false,"excerpt":"This property gives developers the ability to set the font-size of an element depending on the size of its lowercase letters, rather than the uppercase letters. .element { font-size: 22px; font-size-adjust: .5; } In this case the lowercase letters of the font would be 11px in height, since 22 x\u2026","rel":"","context":"In \"font-size\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/322037"}],"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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=322037"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/322037\/revisions"}],"predecessor-version":[{"id":322097,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/322037\/revisions\/322097"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13921"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=322037"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=322037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}