{"id":164823,"date":"2014-03-05T14:14:26","date_gmt":"2014-03-05T21:14:26","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=164823"},"modified":"2014-03-06T07:11:38","modified_gmt":"2014-03-06T14:11:38","slug":"text-rendering","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-rendering\/","title":{"rendered":"text-rendering"},"content":{"rendered":"<p>The <code>text-rendering<\/code> 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 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-rendering\" rel=\"noopener\">in MDN<\/a>:<\/p>\n<blockquote><p>The <code>text-rendering<\/code> CSS property provides information to the rendering engine about what to optimize for when rendering text. The browser makes trade-offs among speed, legibility, and geometric precision.<\/p><\/blockquote>\n<p>You can see some before\/after <a href=\"http:\/\/aestheticallyloyal.com\/public\/optimize-legibility\/\" rel=\"noopener\">examples here<\/a>. Sometimes the result is just straight up better kerning:<\/p>\n<figure id='post-164825 media-164825' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/03\/better-kern.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>The <code>text-rendering<\/code> property is <strong>not defined in any CSS standard<\/strong>. It&#8217;s actually <a href=\"http:\/\/www.w3.org\/TR\/SVG11\/painting.html#TextRenderingProperty\" rel=\"noopener\">an SVG property<\/a>. However, Gecko\/WebKit\/Blink browsers let you apply this property to HTML elements.<\/p>\n<p>Be aware that Windows, Linux and OS X each (may) have different text-rendering engines. Not to mention that different browsers each have their own text rendering defaults, so there is no guarantee that your font treatments will be displayed as intended on the user\u2019s system. You can learn more about type rendering systems and operating systems <a href=\"http:\/\/blog.typekit.com\/2010\/10\/15\/type-rendering-operating-systems\/\" rel=\"noopener\">on the Typekit blog<\/a>.<\/p>\n<p>There are four possible values:<\/p>\n<ul>\n<li><strong>auto<\/strong> (default) &#8211; The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. Be aware that different browsers interpret this value differently.<\/li>\n<li><strong>optimizeSpeed<\/strong> &#8211; The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.<\/li>\n<li><strong>optimizeLegibility<\/strong> &#8211; The browser emphasizes legibility over rendering speed and geometric precision. This enables the use of special kerning and optional ligature information that may be contained in the font file for certain fonts.<\/li>\n<li><strong>geometricPrecision<\/strong> &#8211; The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts\u2014such as kerning\u2014don&#8217;t scale linearly, so <code>geometricPrecision<\/code> can make text using those fonts look good. When SVG font is scaled, the browser calculates pixel size, then rounds to the nearest integer. The <code>geometricPrecision<\/code> property allows for more fluid scaling. Note: Only WebKit browsers apply this fluid value, Gecko treats the value just like <code>optimizeLegibility<\/code>.<\/li>\n<\/ul>\n<h3>&lt; 20px enables ligatures<\/h3>\n<p>The <code>optimizeLegibility<\/code> keyword enables ligatures in text smaller than 20px for some fonts. (like Calibri or D\u00e9j\u00e0Vu) This 20px threshold value can be changed in Gecko via the <code>browser.display.auto_quality_min_font_size<\/code> user preference.<\/p>\n<p>Ligatures are combinations of letters that tend to look better and are more readable as a combined glyph. An example of this is the letters \u2018f\u2019 and \u2018i\u2019. They can form the ligature \u2018fi\u2019 as in the word \u2018find\u2019. You can <a href=\"http:\/\/elliotjaystocks.com\/blog\/the-fine-flourish-of-the-ligature\/\" rel=\"noopener\">learn more about them here<\/a>.<\/p>\n<figure id='post-164824 media-164824' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/03\/lig.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>Some font files contain additional information about how the font should be rendered. <code>optimizeLegibility<\/code> makes use of this information, and <code>optimizeSpeed<\/code> does not. <\/p>\n<h3>Example<\/h3>\n<pre rel=\"CSS\"><code class=\"language-css\">p.legibility {\r\n  text-rendering: optimizeLegibility;\r\n}\r\np.speed {\r\n  text-rendering: optimizeSpeed;\r\n}<\/code><\/pre>\n<h3>Performance<\/h3>\n<p>When it is said that there is a tradeoff between speed and precision, they aren&#8217;t kidding. There can be <a href=\"http:\/\/www.marco.org\/2012\/11\/15\/text-rendering-optimize-legibility\" rel=\"noopener\">significant performance issues<\/a> to consider. That article is worth quoting entirely:<\/p>\n<blockquote><p>There are actually significant, effectively fatal performance problems (such as 30-second loading delays, or longer) on mobile devices when using optimizeLegibility for long pages. Apply it only if you know what the maximum text length will be. (Also, avoid using it for Android clients, at least on the older versions that everyone still uses: its font renderer often has very strange bugs when this mode is enabled.)<\/p>\n<p>I did some testing with Instapaper to determine approximate optimizeLegibility performance limits. A 5,000-word article in Instapaper for iOS, for instance, will only use optimizeLegibility on devices with an A5-class or greater CPU. To avoid problems on older iOS devices, I wouldn\u2019t recommend using optimizeLegibility blindly and unconditionally on any pages longer than about 1,000 words. And I wouldn\u2019t recommend enabling it on Android at all.<\/p><\/blockquote>\n<p>It&#8217;s tempting to do:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">\/* Probably not advisable *\/\r\nbody {\r\n  text-rendering: optimizeLegibility;\r\n}<\/code><\/pre>\n<p>But be darn careful about that, seems dangerous especially when applied to an arbitrary page.<\/p>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">4+<\/td>\n<td class=\"yep\">5+<\/td>\n<td class=\"yep\">3+<\/td>\n<td class=\"yep\">Maybe post-Blink?<\/td>\n<td class=\"nope\">Nope<\/td>\n<td class=\"yep\">2.3+?<\/td>\n<td class=\"yep\">3+?<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>There are various bugs. <a href=\"https:\/\/code.google.com\/p\/android\/issues\/detail?id=15067\" rel=\"noopener\">Android issue with new lines.<\/a> Chrome has various, <a href=\"https:\/\/code.google.com\/p\/chromium\/issues\/detail?id=55458\" rel=\"noopener\">including letter-spacing<\/a>. Safari (and others) <a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=41363\" rel=\"noopener\">default to optimizeSpeed<\/a> rather than determining on the fly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 the rendering engine about what [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13949,"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":197696,"url":"https:\/\/css-tricks.com\/almanac\/properties\/i\/image-rendering\/","url_meta":{"origin":164823,"position":0},"title":"image-rendering","date":"March 18, 2015","format":false,"excerpt":"The image-rendering property defines how the browser should render an image if it is scaled up or down from its original dimensions. By default, each browser will attempt to apply aliasing to this scaled image in order to prevent distortion, but this can sometimes be a problem if we want\u2026","rel":"","context":"With 11 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":342681,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/content-visibility\/","url_meta":{"origin":164823,"position":1},"title":"content-visibility","date":"June 21, 2021","format":false,"excerpt":"The content-visibility property in CSS indicates to the browser whether or not an element\u2019s contents should be rendered at initial load time. So, as the browser starts loading content and is playing it on the screen, this property allows us to step in and tell the browser not to load\u2026","rel":"","context":"In \"content-visibility\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/visibility-nope.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":253584,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-display\/","url_meta":{"origin":164823,"position":2},"title":"font-display","date":"April 17, 2017","format":false,"excerpt":"The font-display property defines how font files are loaded and displayed by the browser. It is applied to the @font-face rule which defines custom fonts in a stylesheet. @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\u2026","rel":"","context":"In \"font-display\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":161605,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/filter\/","url_meta":{"origin":164823,"position":3},"title":"filter","date":"February 18, 2014","format":false,"excerpt":"CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element\u2019s rendering before the element is displayed. Filters are commonly used to\u2026","rel":"","context":"In \"filter\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20517,"url":"https:\/\/css-tricks.com\/almanac\/properties\/u\/unicode-bidi\/","url_meta":{"origin":164823,"position":4},"title":"unicode-bidi","date":"March 12, 2013","format":false,"excerpt":"The unicode-bidi property is one of two CSS properties that handle the rendering of bi-directional text in HTML and similar markup-based languages (eg XML). The other property is direction, and the two are used together to create levels of embedded text with different text directions (right-to-left and left-to-right) in a\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333380,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/caret-shape\/","url_meta":{"origin":164823,"position":5},"title":"caret-shape","date":"January 27, 2021","format":false,"excerpt":"The caret-shape property in CSS changes the shape of the text cursor inside editable elements that indicates a user is typing. It's part of the CSS Basic User Interfaces Module Level 4, which is currently in Working Draft status. As I write, the caret is the little blinking bar that\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\/164823"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=164823"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/164823\/revisions"}],"predecessor-version":[{"id":164891,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/164823\/revisions\/164891"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=164823"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=164823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}