Giter VIP home page Giter VIP logo

Comments (5)

twardoch avatar twardoch commented on May 27, 2024 2
  1. The belief that the "naked" cubic outlines are space-saving as opposed to quadratics is a widespread myth that has little support in reality. The old SVG Font format, which can represent both quadratic and cubic glyphs (even in the same font) in plain text offers a common ground for comparison. If I convert an OTF of Source Sans Pro Regular into SVG, it’ll be about 1.1 MB, while an SVG made out of a TTF is 1.2 MB. So the difference is quite small. This is because quadratics use more on-curve points but less off-curve points while cubic use less on-curve points but more off-curve points. So it kind of balances each other out (the cubics are about 8% smaller but that’s it).
  2. In OpenType, cubics are stored in a "CFF" font table (in an OTF font) and quadratics are stored in a "glyf" table (in a TTF font). The "glyf" table is completely linear, very straightforward and uses almost no compression. The "CFF" table on the other hand uses extensive compression by itself. In a way, you could say that that TTFs are not compressed while OTFs are already compressed.
  3. WOFF2 applies a very aggressive modern compression algorithm (Brotli) which is much more effective than the built-in OTF compression. If you convert a TTF into WOFF2, the flat "glyf" table gets compressed very efficiently using Brotli, but if you convert an OTF into WOFF2, then the Brotli compression does not yield much saving (or even none) for the "CFF" table, because that table is already compressed.

So, since the new WOFF2 Brotli is more effective than the old CFF compression, .ttf.woff2 often end up smaller than the .otf.woff2.

from source-sans.

albell avatar albell commented on May 27, 2024 1

Thank you. Works great. Quick questions:

  • Can you maybe put that link up in the master readme for the next guy/gal?
  • For web work are there subtle functional or compatibility differences between an "otf.woff" and a "ttf.woff"? I thought WOFF and WOFF2 were their own distinct formats. Is it more like a compression layer?
  • In that link, why are the "otf.woff2" files significantly larger that the "ttf.woff2" files? I thought OTF allowed cubic bezier curves instead of just quadratic bezier, which would be typically space-saving. Generally it's supposed to be the other way around, right?

from source-sans.

miguelsousa avatar miguelsousa commented on May 27, 2024

Try these files and let us know how it goes.

from source-sans.

albell avatar albell commented on May 27, 2024

@twardoch Thank you, very illuminating. Is there any compatibility or feature set reason to not just use the smaller "ttf.woff2" then? For modern evergreen browsers, is there any scenario in which an author would prefer the slightly larger "otf.woff2" file?

from source-sans.

twardoch avatar twardoch commented on May 27, 2024

Well, OTF-based or TTF-based fonts (regardless of whether they’re “naked” or in WOFF or WOFF2) render differently in small sizes on systems that use hinting, a font-internal mechanism that tells the system how to optimize the fonts on small screen sizes — because the hinting languages differ completely between OTF and TTF.

On Mac OS X, iOS and newer Android versions, you won’t see much difference, but on Windows, you will. The older the Windows, the more difference. The differences won’t be seen in larger sizes but they will be in small sizes. If you target a particular minimal OS, just make a test page comparing the OTF- and TTF-based WOFF2 in a few small sizes and see if you prefer any of these variants. It’s not possible to say upfront, in general, which one will look better.

from source-sans.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.