{"id":132,"date":"2020-03-05T13:00:00","date_gmt":"2020-03-05T13:00:00","guid":{"rendered":"https:\/\/demos.canvaswp.com\/news-blog\/2020\/03\/05\/optical-effects-in-user-interfaces\/"},"modified":"2020-03-05T13:00:00","modified_gmt":"2020-03-05T13:00:00","slug":"optical-effects-in-user-interfaces","status":"publish","type":"post","link":"https:\/\/demos.canvaswp.com\/news-blog\/2020\/03\/05\/optical-effects-in-user-interfaces\/","title":{"rendered":"Optical Effects in User Interfaces: An Illustrated Guide"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Mathematically centred is rarely visually centred, and every designer discovers this the first time they place a play triangle inside a circle. The fixes are old, well documented and almost never taught.<\/p>\n\n<h3 class=\"wp-block-heading\">The corrections that matter most<\/h3>\n\n<p class=\"wp-block-paragraph\">Circles need to overshoot the cap height of the letters beside them. Triangles need to shift toward their visual mass. Pure black text on pure white reads heavier than the same weight reversed, so reversed type wants a lighter cut.<\/p>\n\n<p class=\"wp-block-paragraph\">Type designers have compensated for all of this for centuries. Interface work inherited the problems without inheriting the vocabulary, which is why so many icon sets look subtly unbalanced at small sizes.<\/p>\n\n<p class=\"wp-block-paragraph\">None of these adjustments are large. Most are one or two pixels, and all of them are the difference between a set that looks drawn and a set that looks placed.<\/p>","protected":false},"excerpt":{"rendered":"<p>Our eyes are weird and often mislead us. But if you know the peculiarities of human vision, you can construct better designs. Type designers use optical tricks to draw readable, well balanced fonts, and the same tricks help anyone who crafts the way people and computers interact.<\/p>\n","protected":false},"author":51,"featured_media":199,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[47,60],"class_list":["post-132","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech","tag-modern","tag-parallax"],"_links":{"self":[{"href":"https:\/\/demos.canvaswp.com\/news-blog\/wp-json\/wp\/v2\/posts\/132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demos.canvaswp.com\/news-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demos.canvaswp.com\/news-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demos.canvaswp.com\/news-blog\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/demos.canvaswp.com\/news-blog\/wp-json\/wp\/v2\/comments?post=132"}],"version-history":[{"count":0,"href":"https:\/\/demos.canvaswp.com\/news-blog\/wp-json\/wp\/v2\/posts\/132\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demos.canvaswp.com\/news-blog\/wp-json\/wp\/v2\/media\/199"}],"wp:attachment":[{"href":"https:\/\/demos.canvaswp.com\/news-blog\/wp-json\/wp\/v2\/media?parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demos.canvaswp.com\/news-blog\/wp-json\/wp\/v2\/categories?post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demos.canvaswp.com\/news-blog\/wp-json\/wp\/v2\/tags?post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}