{"id":235175,"date":"2015-11-25T10:02:32","date_gmt":"2015-11-25T17:02:32","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=235175"},"modified":"2020-04-25T05:34:17","modified_gmt":"2020-04-25T12:34:17","slug":"font-size-adjust","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-size-adjust\/","title":{"rendered":"font-size-adjust"},"content":{"rendered":"\n<p>This property gives developers the ability to set the <code>font-size<\/code> of an element depending on the size of its lowercase letters, rather than the uppercase letters.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  font-size: 22px;\n  font-size-adjust: .5;\n}<\/code><\/pre>\n\n\n\n<p>In this case the lowercase letters of the font would be 11px in height, since 22 x .5 = 11.<\/p>\n\n\n\n<p>When loading fonts there\u2019s likely to be a different aspect ratio between the lowercase letters of a fallback font and the newly loaded typeface, so <code>font-size-adjust<\/code> is useful to control the amount of reflow when we declare a new <code>font-family<\/code> and see the Flash of Unstyled Text (FOUT).<\/p>\n\n\n\n<p>In the demo below, it\u2019s possible to toggle this property on and off to show how a web font like Chaparral differs from the x-height and alignment of characters in Times, the fallback font. But beware, this property is only supported by a small number of browsers at the moment.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xwNYRX\" src=\"\/\/codepen.io\/anon\/embed\/xwNYRX?height=450&amp;theme-id=1&amp;slug-hash=xwNYRX&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xwNYRX\" title=\"CodePen Embed xwNYRX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This can have dramatic effects when set on large portions of body text, and substantially improve the flicker that occurs when switching between fallback and the newly loaded font:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_da315d93ee525c38f53c9e42b80e93c1\" src=\"\/\/codepen.io\/anon\/embed\/da315d93ee525c38f53c9e42b80e93c1?height=450&amp;theme-id=1&amp;slug-hash=da315d93ee525c38f53c9e42b80e93c1&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed da315d93ee525c38f53c9e42b80e93c1\" title=\"CodePen Embed da315d93ee525c38f53c9e42b80e93c1\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/CSS\/font-size-adjust\" rel=\"noopener\">MDN<\/a><\/li><li><a href=\"http:\/\/www.w3.org\/TR\/css3-fonts\/#propdef-font-size-adjust\" rel=\"noopener\">W3C<\/a><\/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=font-size-adjust\" 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=\"n nope\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">118<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"n nope\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">17.0<\/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=\"n nope\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"n nope\" title=\"Android - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">17.0<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>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. In this case the lowercase letters of the font would be 11px in height, since 22 x .5 = 11. When loading fonts there\u2019s likely to be a different [&hellip;]<\/p>\n","protected":false},"author":223806,"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":[843,1593,587],"acf":[],"jetpack-related-posts":[{"id":22053,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant\/","url_meta":{"origin":235175,"position":0},"title":"font-variant","date":"June 17, 2013","format":false,"excerpt":"The font-variant property allows you to change the targeted text to small caps. This property has been extended in CSS3. p:first-line { font-variant: small-caps; \/* default is `normal` *\/ } Before CSS3, this property accepted one of two possible values: normal (how text is rendered by default) and small-caps. A\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21545,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-size\/","url_meta":{"origin":235175,"position":1},"title":"font-size","date":"May 6, 2013","format":false,"excerpt":"The font-size property specifies the size, or height, of the font. font-size affects not only the font to which it is applied, but is also used to compute the value of em, rem, and ex length units. p { font-size: 20px; } font-size can accept keywords, length units, or percentages\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":144460,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-transform\/","url_meta":{"origin":235175,"position":2},"title":"text-transform","date":"July 24, 2013","format":false,"excerpt":"The text-transform property in CSS controls text case and capitalization. .lowercase { text-transform: lowercase; } Text-Transform Values lowercase makes all of the letters in the selected text lowercase. uppercase makes all of the letters in the selected text uppercase. capitalize capitalizes the first letter of each word in the selected\u2026","rel":"","context":"With 16 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322735,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-optical-sizing\/","url_meta":{"origin":235175,"position":3},"title":"font-optical-sizing","date":"October 7, 2020","format":false,"excerpt":"The font-optical-sizing CSS property allows the browser to adjust the outline of font glyphs to make them more legible at different sizes. For example, smaller text may get a thicker outline to increase its contrast. On the flip side, larger text may get something that's more \"delicate\" to quote the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":261983,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant-numeric\/","url_meta":{"origin":235175,"position":4},"title":"font-variant-numeric","date":"October 31, 2017","format":false,"excerpt":"The font-variant-numeric property in CSS supports the OpenType font format by specifying which numeric glyphs to use on a class, including variations for fractions, ordinal markers and styled variations among others. A Little Context We tend to think of numbers as a static glyph. It prints and that's the way\u2026","rel":"","context":"In \"font-variant\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322037,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-kerning\/","url_meta":{"origin":235175,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/235175"}],"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\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=235175"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/235175\/revisions"}],"predecessor-version":[{"id":307603,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/235175\/revisions\/307603"}],"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=235175"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=235175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}