{"id":763,"date":"2011-08-22T11:48:51","date_gmt":"2011-08-22T16:48:51","guid":{"rendered":"http:\/\/somadesign.ca\/?p=763"},"modified":"2011-08-22T20:03:52","modified_gmt":"2011-08-23T01:03:52","slug":"improve-windows-type-rendering-with-ttfautohint","status":"publish","type":"post","link":"http:\/\/somadesign.ca\/2011\/improve-windows-type-rendering-with-ttfautohint\/","title":{"rendered":"Improve Windows Type Rendering With ttfautohint"},"content":{"rendered":"

In a stroke of genius, Wern\u00ader Lem\u00adberg has start\u00aded the ttfau\u00adto\u00adhint project<\/a>, which repur\u00adpos\u00ades FreeType<\/a>\u2019s auto\u00adhint\u00ading sys\u00adtem to auto\u00admat\u00adi\u00adcal\u00adly hint True\u00adType fonts for improved Win\u00addows ren\u00adder\u00ading. While no auto\u00adhin\u00adter will be able to match the eye and skills of a man\u00adu\u00adal hin\u00adter<\/a>, ttfau\u00adto\u00adhint pro\u00advides real world improve\u00adments, some\u00adtimes dramatically.<\/p>\n

For exam\u00adple, I\u2019m work\u00ading as a con\u00adtrac\u00adtor on a project using the clas\u00adsic VAG<\/span> Round\u00aded font. 13px bold looks great in Pho\u00adto\u00adshop comps and Mac browsers, but fails hor\u00adri\u00adbly under Win\u00addows. I decid\u00aded to run VAG<\/span> Round\u00aded Bold through ttfau\u00adto\u00adhint 0.2 to see if it would offer improve\u00adments. In short: wow. In the screen\u00adshots below, ttfau\u00adto\u00adhint goes head-to-head with the Fontsquir\u00adrel gen\u00ader\u00ada\u00adtor<\/a>\u2019s auto\u00adhint\u00ading (which I believe is pow\u00adered by Font\u00adForge<\/a>).<\/p>\n

Ren\u00adder\u00ading modes are shown in the cap\u00adtions. Click for full size. (I\u2019m restrict\u00aded to screen\u00adshots because the font is only licensed for the client site.)<\/p>\n

<\/a>

Stan\u00addard (grayscale)<\/p><\/div>\n

<\/a>

GDI<\/span> ClearType<\/p><\/div>\n

<\/a>

DirectWrite ClearType<\/p><\/div>\n

As you can see, there\u2019s a dra\u00admat\u00adic<\/em> improve\u00adment in all 3 Win\u00addows ren\u00adder\u00ading envi\u00adron\u00adments. 11px-13px sizes move from awful, with com\u00adplete\u00adly closed coun\u00adters, to supris\u00ading\u00adly read\u00adable. At 14px, the coun\u00adters open up with stan\u00addard hint\u00ading, but clos\u00ader inspec\u00adtion reveals oth\u00ader defects such as no sep\u00ada\u00adra\u00adtion between the body and dot of the i <\/strong>and j<\/strong> char\u00adac\u00adters. The improve\u00adments are even more dra\u00admat\u00adic under Stan\u00addard (grayscale) antialias\u00ading, which looks ter\u00adri\u00adble below 18px. Even under DirectWrite ClearType, ttfau\u00adto\u00adhint pro\u00adduces supe\u00adri\u00ador results (although a true test would also pro\u00advide a com\u00adplete\u00adly unhint\u00aded ver\u00adsion to see what the DirectWrite ras\u00adter\u00adiz\u00ader is capa\u00adble of on its own).<\/p>\n

The only real down\u00adside is a mod\u00adest file size increase. I haven\u2019t test\u00aded across mul\u00adti\u00adple fonts, but in this case our font jumped from 49kb to 63kb. I con\u00adsid\u00ader it an excel\u00adlent trade-off for such improved rendering.<\/p>\n

So, you want to use it? Well, first you should sup\u00adport the project<\/a>. Cur\u00adrent\u00adly you need to com\u00adpile ttfau\u00adto\u00adhint, but with our sup\u00adport, Wern\u00ader will build a GUI<\/span> ver\u00adsion for the com\u00admand line-pho\u00adbic. If you\u2019re on a Mac and want to com\u00adpile, I put togeth\u00ader an instal\u00adla\u00adtion script<\/a>.<\/p>\n

Edit: <\/em>In an email exchange, Wern\u00ader point\u00aded out that Dave Cross\u00adland<\/a>\u2014who has done much of the ttfau\u00adto\u00adhint promotion\u2014had the actu\u00adal idea to use FreeType for hint\u00ading, although Wern\u00ader still deserves mas\u00adsive praise for the exe\u00adcu\u00adtion. Wern\u00ader also point\u00aded out that VAG<\/span> Round\u00aded is a good show\u00adcase font, and that ttfau\u00adto\u00adhint will not per\u00adform such strik\u00ading results in all circumstances.<\/p>\n","protected":false},"excerpt":{"rendered":"

In a stroke of genius, Wern\u00ader Lem\u00adberg has start\u00aded the ttfau\u00adto\u00adhint project, which repur\u00adpos\u00ades FreeType\u2019s auto\u00adhint\u00ading sys\u00adtem to auto\u00admat\u00adi\u00adcal\u00adly hint True\u00adType fonts for improved Win\u00addows ren\u00adder\u00ading. While no auto\u00adhin\u00adter will be able to match the eye and skills of a man\u00adu\u00adal hin\u00adter, ttfau\u00adto\u00adhint pro\u00advides real world improve\u00adments, some\u00adtimes dra\u00admat\u00adi\u00adcal\u00adly. For exam\u00adple, I\u2019m work\u00ading as a [\u2026]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"footnotes":""},"categories":[8],"tags":[145,146,147,69,71],"class_list":["post-763","post","type-post","status-publish","format-standard","hentry","category-design","tag-hinting","tag-truetype","tag-ttfautohint","tag-typography","tag-web-fonts"],"_links":{"self":[{"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/posts\/763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/comments?post=763"}],"version-history":[{"count":3,"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/posts\/763\/revisions"}],"predecessor-version":[{"id":773,"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/posts\/763\/revisions\/773"}],"wp:attachment":[{"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/media?parent=763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/categories?post=763"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/somadesign.ca\/wp-json\/wp\/v2\/tags?post=763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}