{"id":143,"date":"2016-10-08T03:18:23","date_gmt":"2016-10-08T03:18:23","guid":{"rendered":"http:\/\/www.simon-li.com\/design-and-code\/?p=143"},"modified":"2020-06-30T15:10:56","modified_gmt":"2020-06-30T15:10:56","slug":"a-small-trick-that-can-make-web-typography-look-better","status":"publish","type":"post","link":"http:\/\/www.simon-li.com\/design-and-code\/a-small-trick-that-can-make-web-typography-look-better\/","title":{"rendered":"A Small Trick That Can Make Web Typography Look\u00a0Better"},"content":{"rendered":"<p>Today I would like to share a small trick that can make typography on your website look a bit better. This trick is used across a lot of major websites, including Apple, AirBnB, Medium, Hulu etc.<\/p>\n<p><!--more--><\/p>\n<p>Add the following two CSS properties to the html tag or body tag of your website.<\/p>\n<pre>-webkit-font-smoothing: antialiased;\r\n-moz-osx-font-smoothing: grayscale;<\/pre>\n<p>By default, many browsers nowadays smooth fonts using subpixel antialiasing. Though it can give you higher contrast and sharper text, it also makes the font look slightly bolder and leads to the color fringing problem. Adding the above CSS code will enable Chrome, Safari and Firefox to smooth the types on your webpages on the level of pixels instead of subpixels. It will decrease the contrast a bit, eliminate the color fringing problem and make the font look a bit smoother. (Lower contrast is usually desired if you want to create a more vintage look and feel.)<\/p>\n<p><figure id=\"attachment_146\" aria-describedby=\"caption-attachment-146\" style=\"width: 658px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/10\/jordan-subpixel.jpg\" alt=\"Before: font smoothing on subpixel\u00a0level\" width=\"658\" height=\"577\" class=\"size-full wp-image-146\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/10\/jordan-subpixel.jpg 658w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/10\/jordan-subpixel-300x263.jpg 300w\" sizes=\"auto, (max-width: 658px) 100vw, 658px\" \/><figcaption id=\"caption-attachment-146\" class=\"wp-caption-text\">Before: font smoothing on subpixel\u00a0level<\/figcaption><\/figure><\/figcaption>\n<\/figure>\n<figure id=\"attachment_145\" aria-describedby=\"caption-attachment-145\" style=\"width: 658px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/10\/jordan-pixel.jpg\" alt=\"After: font smoothing on pixel\u00a0level\" width=\"658\" height=\"577\" class=\"size-full wp-image-145\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/10\/jordan-pixel.jpg 658w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2016\/10\/jordan-pixel-300x263.jpg 300w\" sizes=\"auto, (max-width: 658px) 100vw, 658px\" \/><figcaption id=\"caption-attachment-145\" class=\"wp-caption-text\">After: font smoothing on pixel\u00a0level<\/figcaption><\/figure>\n<p>The difference is subtle, but it can really add this nuanced faded feel to your text which makes your readers want to touch it using their hands.<\/p>\n<h4>References<\/h4>\n<p>Font-Smooth MDN: <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-smooth\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" data-href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-smooth\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-smooth<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today I would like to share a small trick that can make typography on your website look a bit better. This trick is used across a lot of major websites, including Apple, AirBnB, Medium, Hulu etc.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[87],"tags":[15,13],"class_list":["post-143","post","type-post","status-publish","format-standard","hentry","category-visual-design","tag-design","tag-typography"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":5,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/143\/revisions"}],"predecessor-version":[{"id":470,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/143\/revisions\/470"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=143"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}