.otf, .ttf

Font files today are typically stored in one of two formats: .otfOpenType and .ttfTrueType. What are these file formats? What kind of information is inside of them?

First, it’s helpful to look at how all files are stored and read by computers. Underneath all digital data is the language of binary codeThe language of computers, represented in 1s and 0s. This is a series of 1s and 0s that computers can understand to mean certain things. For instance, a byteAn arrangement of eight 0s or 1s, or eight consecutive bitsOne 0 or 1, can translate to a number that corresponds to a letter. ASCIIAmerican Standard Code for Information Interchange is one of the standardized ways to make this conversion, where 0100000165 in decimal translates to “A”. Several bytes in a row can therefore make up a word, a sentence, and so on. Or, a byte can tell a computer which pixel to target on a screen, and then the following bytes can designate what red, green, and blue values that pixel should light up to. In programs like Photoshop, each of these RGBRed, green, blue values are limited to the range of 0–255, and the reason is because of binary — a byte can only store up to a value that fits into eight bits, so 2⁸=256. If you pay attention, you’ll notice powers of two popping up all over the place in software hinting at what’s happening underneath the surface.

All files are therefore encodedConvert something into a coded form like binary in binary, and the keys to decodingTake something out of its coded form this data are file extensions, or more broadly file formatsLike JPG images, or PDF files. File formats are the standardized ways we organize binary code to mean certain things. Take what I said earlier about encoding text, where ASCII is one of the standardized ways to make a conversion from a byte to a letter. Similarly, computers need to know which standard to use when reading a file, which is indicated by the file extensione.g. ”.jpg” or ”.pdf”. When a file has this signifier, a program can know exactly how that file is organized and what different sections of the binary contained within indicate.

If we now look at the documentation of how .otf and .ttf file formats organize binary, we can start to see how modern fonts work as well as learn a little history about how these file formats came to be. To start, the .otf specificationDocumentation on how the binary in a file is organized lives on Microsoft’s website.1 Meanwhile, the .ttf specification lives on Apple’s website.2 This is our first glimpse at why there are two file formats and not just one — each was developed by a different company for its own specific needs. Microsoft (along with Adobe) developed OpenType originally to compete with Apple’s closed TrueType format, but Microsoft was eventually able to secure licensing and integrate OpenType technologies into TrueType, a decision Apple allowed in an effort to promote continued development and widespread use of TrueType fonts.3

These skirmishes occurred in the mid-to-late ’90s. Today, Microsoft and Apple (as well as Adobe and Google) usually collaborate on cross-platform font specifications as new designs and technologies emerge.

So what's inside .otf and .ttf files?

We’ll first look at the documentation for .ttf files,4 mainly because Apple’s documentation helps explain how digital fonts are more generally stored (and their specification text is overall much easier to read).

Much like vector illustrationsDigital images made of points and lines instead of pixels in apps like Adobe Illustrator, fonts are stored as bezier curvesA calculated curve between two points. This means that the outline of a letter is actually an equation made up of points and curves that connect those points. A generic form of this equation looks like the following:

p(t) = (1-t)2p₀ + 2t(1-t)p₁ + t2p₂

This equation is the atomic unit for a font — all greater complexity comes from making more points and curves, but not much else. You can do things like intersect the contours made by a bezier curve, or combine glyphsLetters, numbers, symbols, or other characters to make a new glyph, but the basic unit is still the mathematical equation from before. Furthermore, this mathematical equation is then converted from our number system to binary, and that information is stored in the .ttf (or .otf) file.

The contoursSingle or multiple outlines that define a letter’s form of a font, as well as its other properties like its glyph names or metricsMeasurements, such as height or width, are subsequently stored in font tablesHow binary is organized in font files. Font tables are the ways in which the .otf and .ttf binary is organized such that your computer can tell which byte means what. In addition to these tables, both file formats also contain a table directoryLists the locations of font tables in the binary that lives at the beginning of the binary code and includes fundamental information about what the font file contains, such as how many font tables there are.

Besides the contours of a glyph, font tables also provide positional information of how a computer screen should interpret said contours. These properties include details like the minimum and maximum coordinates of the glyph, as well as the glyph’s styleBold, italic, underlined, etc.. These specific properties are stored in the “head” of a .otf font table,5 but there are actually tens of table types that allow for different functionality. For instance, the OpenType specification allows for a “COLR” table entry that supports multi-colored glyphs.6 Recently, variable fonts have become more widely supported across websites and applications, and the information for a variable font’s contours are stored in the “fvar” table entry, also known as the Font Variations Table.7

How does a computer make this font code visible to us?

The challenge of rendering fonts on a pixel screen, also known as rasterizingConverting from points and curves to pixels them, is particularly tricky. This is because fonts are encoded as outlines, not as pixels — a computer has to calculate which pixels are within the bounds of a glyph’s contour, and then decide whether to turn them on, off, or some fraction in between. This process is called instructingFormal name for rasterizing fonts so that they line up correctly with the pixel grid or hintingAnother name for rasterizing fonts glyphs and exists in both the .otf and .ttf file formats.89 For .ttf files, the process is called grid-fittingFinding the best pixels to render a font with, which is an apt name for what is actually happening. Poor instructing could lead to a letter that looks wrong, whether it is totally illegible or has weird artifacts or distortions on its edges. Instruction was especially important on early computer screens, when the density of pixels per inch was much lower and could lead more often to unintelligible text. An example of an early font with excessive hinting instructions is Verdana, although much of this work can be accomplished automatically now.10

Besides information stored within the font file, specific operating systems also make their own decisions about how to render fonts onscreen. Microsoft (author of the OpenType specification) uses a tool called ClearTypeBuilt-in Window’s tool for rendering fonts legibly to render fonts on the Windows operating system.11 ClearType prioritizes legibility over 100% accuracy, making full use of a pixel’s RGB values to antialiasSmooth the edges the text.

Meanwhile, Apple (author of the TrueType specification) takes a much different approach on MacOS. Apple’s philosophy is based in accuracy, which means that as a font scales up, its growth is to be as expected without any alterations for the sake of legibility.12 Similarly to Microsoft though, Apple makes use of antialiasing with a “font smoothing” option on MacOS, but this is a much less aggressive approach than ClearType’s. In the long run, Apple’s approach has seen better results on contemporary computers with high pixel densities, while Microsoft’s approach has perhaps outlived its initial usefulness on low density screens and now results in inaccurate or aesthetically displeasing font rendering. (I should note that this last statement is an opinion!)

. . . how much of this do I really need to know?

Today’s computers are sufficiently advanced such that most people can avoid the nitty gritty of how they actually work. Instead, we are permitted, as both users and creators, to treat our devices like black boxes or magic. Type design software allows for exports to multiple font formats, and most software and operating systems are fairly intelligent when it comes to reading, interpreting, and displaying fonts.

Some mathematical principles are fundamental to typography, like bezier curves, while others are good to know for purposes of using fonts, like hinting. An understanding of binary also helps contextualize why certain values cap at 255, or how various components or properties are organized. It is important to note though that these technologies, as well as their corresponding specifications, are not natural laws — they are continuously evolving and only as good as the software that understands them. Variable fonts and color fonts are recent explorations into what a typeface can be, and who knows what the future holds. Perhaps at some point a font file will contain a singular glyph and the remaining characters will be generated by an AI algorithm. Who knows!

Lastly, the .otf and .ttf file formats are only two of many font formats that exist today, each for slightly different purposes. Web fonts are generally stored as slightly different format called .woff,13 which has already evolved into the .woff2 format.14 Meanwhile, there are variations on the .otf and .ttf formats such as the .otc and .ttc formats, which allow for a collection of multiple fonts to be stored within a single file. At the same time, programs can discontinue support for font formats, which is currently happening with Adobe dropping support in 2023 for an early format called PostScript Type 1 fonts (a predecessor of the OpenType specification).15

Anyone can technically develop their own font format by creating a specification for how file’s binary is organized. The challenge there, as with all data, is having software that can actually understand it. Otherwise, the information is as lost as a dead language.