{"id":3721,"date":"2021-03-04T03:39:16","date_gmt":"2021-03-04T10:39:16","guid":{"rendered":"https:\/\/fontstruct.com\/news\/?p=3721"},"modified":"2021-03-16T14:31:19","modified_gmt":"2021-03-16T21:31:19","slug":"opentype-downloads-with-cff-outlines","status":"publish","type":"post","link":"https:\/\/fontstruct.com\/news\/2021\/03\/04\/opentype-downloads-with-cff-outlines\/","title":{"rendered":"OpenType Downloads (with CFF outlines)"},"content":{"rendered":"<p>Note: This blog post is about a FontStruct feature which is currently exclusive to <a href=\"\/patron\/subscribe\" target=\"_blank\" rel=\"noopener noreferrer\">FS Patrons<\/a>.<\/p>\n<p><a href=\"https:\/\/fontstruct.com\/news\/wp-content\/uploads\/2021\/03\/contours-cff-ttf.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3722\" src=\"https:\/\/fontstruct.com\/news\/wp-content\/uploads\/2021\/03\/contours-cff-ttf.png\" alt=\"CFF vs TrueType contours\" width=\"925\" height=\"535\" data-wp-pid=\"3722\" \/><\/a><\/p>\n<p>Today we\u2019re excited to introduce a new kind of download for our Patron FontStructors: OpenType font files using <abbr title=\"Compact Font Format\">CFF<\/abbr> outlines with the .otf filename suffix.<\/p>\n<p>All FontStruct downloads have been OpenType font files for quite a while now, but OpenType fonts can contain different kinds of \u201coutline\u201d (in FontStruct, the outlines are the actual brick shapes).<\/p>\n<p>Hitherto, we have only offered downloads with TrueType outlines. From today, we\u2019re also offering CFF outlines.<\/p>\n<p>CFF outlines differ from TrueType in several ways, including:<\/p>\n<ol>\n<li>(mostly) Smaller file sizes.<\/li>\n<li>(often) More accurate and economical description of curves. For example, rounder circles.<\/li>\n<li>(optionally and experimentally) \u201cfixed point\u201d coordinates, which may facilitate more accuracy of detail for certain downloads.<\/li>\n<\/ol>\n<h3>Smaller File Sizes<\/h3>\n<p>The new CFF downloads will often be smaller than their TrueType counterparts. For example, the illustration shown below uses the font <a href=\"https:\/\/fontstruct.com\/fontstructions\/show\/646574\/zporty_eye_fs\" target=\"_blank\" rel=\"noopener noreferrer\">\u201czporty eYe\/FS<\/a>\u201d by <a href=\"https:\/\/fontstruct.com\/fontstructors\/198352\/elmoyenique\" target=\"_blank\" rel=\"noopener noreferrer\">elmoyenique<\/a>. This has a font file size of <strong>444K<\/strong> for the TrueType download, and only <strong>162K<\/strong> for the CFF \u2013 that\u2019s much less than half the size. File size is important, as fonts take up memory and large fonts can crash software. Some downloaded FontStructions are <em>very<\/em> large!<\/p>\n<h3>More Accurate and Economical Curves<\/h3>\n<p>In a CFF file, curves are represented using two control points (these curves are called \u201ccubic b\u00e9ziers\u201d), as opposed to the TrueType outline format which represents curves using single control points (\u201cquadratic b\u00e9ziers\u201d). For many FontStructions this difference may not be noticeable, but in some cases you will find that CFF outlines are more accurate. For example, you can see the distinction clearly in the case of circular bricks, especially when you use a great number of small circles in your design:<\/p>\n<p><a href=\"https:\/\/fontstruct.com\/news\/wp-content\/uploads\/2021\/03\/circles-cff-ttf.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3726\" src=\"https:\/\/fontstruct.com\/news\/wp-content\/uploads\/2021\/03\/circles-cff-ttf.png\" alt=\"CFF vs TTF\" width=\"925\" height=\"535\" data-wp-pid=\"3726\" \/><\/a><\/p>\n<p>Some of you may have noticed the dough-like melting which afflicts FontStruct\u2019s circle bricks in TrueType downloads. Many years ago, <a href=\"http:\/\/luc.devroye.org\/oh\/oh.html\" target=\"_blank\" rel=\"noopener noreferrer\">Luc Devroye shamed FontStruct on this point<\/a>, and quite right too! Things have improved in the intervening time, but CFF outlines now give us our best, and most reliable circles ever!<\/p>\n<h3>Fixed Point Coordinates<\/h3>\n<p>We\u2019ve also added an option to create CFF outlines with \u201cfixed point\u201d coordinates. I\u2019d like to stress that this is quite an unusual format variant. As far I as I know, it\u2019s seldom employed in professional type production.<\/p>\n<p>In a standard OpenType font, all the contour points are placed on a grid of possible positions, the resolution of which is called the \u201cem square\u201d. Roughly speaking, if you have an em square of 1000, then all your contour points must sit on a 1000 x 1000 unit grid. \u201c<a href=\"http:\/\/designwithfontforge.com\/en-US\/The_EM_Square.html\" target=\"_blank\" rel=\"noopener noreferrer\">Design with Fontforge<\/a>\u201d has <a href=\"http:\/\/designwithfontforge.com\/en-US\/The_EM_Square.html\" target=\"_blank\" rel=\"noopener noreferrer\">a good page<\/a> explaining the em square format.<\/p>\n<p>OpenType fonts with TrueType outlines traditionally use an em square of 2048 or 1024 (the former is the default for FontStruct) while OpenType with CFF outlines generally have an em square of 1000 (Although it can be more. We\u2019re trying 2000 as FontStruct\u2019s default for CFF.)<\/p>\n<p>Crucially, all the points in your designs have to sit <strong><em>exactly<\/em><\/strong> on the intersections of this notional grid. So, in a standard OpenType font, despite it being an infinitely-scalable vector format, there are very clear and finite limits as to where your points can sit. You can position a point at exactly a grid coordinate of (100,100), but not at (100.5, 100.5). i.e. You can only have integer (whole number) coordinates.<\/p>\n<p>From today, FontStruct also gives you access to an option, allowed by CFF, which overcomes this limitation. You can choose to define your coordinates as \u201cfixed point\u201d numbers. This will not affect your design work the FontStructor, but it will affect accuracy when it comes to converting your design to a font file. Using fixed point numbers, the font generator can position points more \u201cfreely\u201d, at 100.5, 100.5 or even 100.3333, 100.3333 etc. if it needs to.<\/p>\n<p>To be honest, I\u2019m not sure how useful this fixed-point coordinate option will prove to be, but considering how complex and detailed some FontStructions are, it may help in exceptional cases. We will see!<\/p>\n<p>It\u2019s important to note, that if you do opt for fixed-point coordinates, this will make your download sizes <em>significantly<\/em> larger.<\/p>\n<p>For background on this topic, I recommend the seminal article by <a href=\"https:\/\/blog.typekit.com\/2015\/10\/01\/smoother-curves-with-decimal-coordinate-values\/\" target=\"_blank\" rel=\"noopener noreferrer\">Read Roberts at Typekit<\/a>.<\/p>\n<h3>Download Configuration<\/h3>\n<p>To support our new download format, we\u2019ve added some additional download configuration options to the FontStruction pages, and also one important option on your <a href=\"https:\/\/fontstruct.com\/private\/user\/settings\" target=\"_blank\" rel=\"noopener noreferrer\">personal settings<\/a> page.<\/p>\n<p>On your <a href=\"https:\/\/fontstruct.com\/private\/user\/settings\" target=\"_blank\" rel=\"noopener noreferrer\">personal settings<\/a> page, you can opt to allow any of your shared designs to be downloaded <strong><em>by others<\/em><\/strong> as OpenType fonts. You can also override this setting on a FontStruction-by-FontStruction basis.<\/p>\n<p>On the FontStruction page, you can access the new options by clicking on \u201cAdvanced Settings\u2026\u201d<\/p>\n<p><a href=\"https:\/\/fontstruct.com\/news\/wp-content\/uploads\/2021\/03\/new-download-settings.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3729\" src=\"https:\/\/fontstruct.com\/news\/wp-content\/uploads\/2021\/03\/new-download-settings.png\" alt=\"New Download Settings\" width=\"925\" height=\"353\" data-wp-pid=\"3729\" \/><\/a><\/p>\n<p>\u2013 Here you will find a couple of familiar options along with some new ones.<\/p>\n<p>You can now choose to:<\/p>\n<ul>\n<li>Share alternate formats (i.e. OpenType CFF) with other users (only if you are sharing the FontStruction for download of course). This setting overrides the global setting from your personal settings page.<\/li>\n<li>Choose an em Square for TrueType and CFF downloads from a list of sensible options.<\/li>\n<li>Use fixed point coordinates. (experimental)<\/li>\n<\/ul>\n<p>Interested in using CFF downloads today? Not a patron yet? <a href=\"\/faq\/88\">Learn more \u2026<\/a><\/p>\n<p>Happy FontStructing!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: This blog post is about a FontStruct feature which is currently exclusive to FS Patrons. Today we\u2019re excited to introduce a new kind of download for our Patron FontStructors: OpenType font files using CFF outlines with the .otf filename suffix. All FontStruct downloads have been OpenType font files for quite a while now, but [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3721","post","type-post","status-publish","format-standard","hentry","category-news"],"_links":{"self":[{"href":"https:\/\/fontstruct.com\/news\/wp-json\/wp\/v2\/posts\/3721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fontstruct.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fontstruct.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fontstruct.com\/news\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/fontstruct.com\/news\/wp-json\/wp\/v2\/comments?post=3721"}],"version-history":[{"count":13,"href":"https:\/\/fontstruct.com\/news\/wp-json\/wp\/v2\/posts\/3721\/revisions"}],"predecessor-version":[{"id":3764,"href":"https:\/\/fontstruct.com\/news\/wp-json\/wp\/v2\/posts\/3721\/revisions\/3764"}],"wp:attachment":[{"href":"https:\/\/fontstruct.com\/news\/wp-json\/wp\/v2\/media?parent=3721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fontstruct.com\/news\/wp-json\/wp\/v2\/categories?post=3721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fontstruct.com\/news\/wp-json\/wp\/v2\/tags?post=3721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}