The Compact Font Format (CFF); A Brief Excursion Into OpenType; Featured Font: Gilbert

We’re back in typography wonk territory in this week’s TT installment, taking an in-depth look at the modern font format you very likely use multiple times every day. Hopefully, it will demystify what’s in those font files y’all love to hoard.

TL;DR

This is an AI-generated summary of today’s Drop.

Perplexity has stopped including links, so I guess I have to go back to the prompt drawing board to coax that back out of it.

1. The Compact Font Format (CFF) specification is a font format that is designed to compactly represent one or more Type 1 or CID-keyed fonts. This section explains what Type 1 and CID-keyed fonts are and how they differ from CFF. It also discusses the advantages of using CFF, such as its ability to encode different kinds of fonts efficiently. The primary resource being covered is the CFF specification.

2. A bit of font generation: a brief excursion into OpenType. This section explains how CFF is used to describe fonts and how it differs from TrueType outlines. It also includes information on how to create an OpenType wrapper around a CFF font and how to map keyboard characters to font glyphs. The primary resource being covered is a GitHub repository that provides a hands-on overview of the Compact Font Format table.

3. Featured Font: Gilbert. This section talks about the Gilbert font, which was created to honor the memory of Gilbert Baker, the creator of the iconic Rainbow Flag. It explains what color fonts are and how they are stored as SVG data inside OpenType font files. The primary resource being covered is the Type With Pride website, which provides a free download of the Gilbert font.

The Compact Font Format (CFF)

The Compact Font Format (CFF) specification is a font format that is designed to compactly represent one or more Type 1 or CID-keyed fonts.

Before we continue, I should probably elaborate a bit on those two font types.

Type 1 fonts are a font format that was introduced by Adobe in 1984 for use with its PostScript page description language. They were widely used within desktop publishing software and printers that could use PostScript. Type 1 fonts are also known as PostScript, PS1, T1, Adobe Type 1, Multiple Master, or MM (not confusing at all, right?).

They consist of two files: one containing the outline fonts and another containing a bitmap representation of the font in at least one point size. Type 1 fonts used a simplified set of drawing operations compared to ordinary PostScript, but added “hints” to help low-resolution rendering. However, Type 1 fonts have become obsolete and are no longer supported by Adobe products. Adobe phased them out of its products and will no longer support authoring content with Type 1 (this purge happened in January of this year). Most operating systems and browsers do not support Type 1 fonts anymore as well.

A CID-keyed font is a postscript (or OpenType) font designed to hold Chinese, Japanese and Korean characters efficiently. More accurately, a CID font is a collection of several sub-fonts each with certain common features—one might hold all the latin letters, another all the kana, a third all the kanji. CID keyed fonts do not have an encoding built into the font, and the characters do not have names. Instead the font is associated with a character set and on each character set there are several character mappings defined. These mappings are similar to encodings but allow for a wider range of behaviors.

Unlike previous font formats, CFF allows multiple fonts to be stored together in a unit called a FontSet (fancy term for a family of fonts). The CFF format is designed to be used in conjunction with Type 2 charstrings for the character description procedures. Type 2 charstrings are a method for compact encoding of glyph procedures in an outline font program.

Those charstring operators are divided into seven groups, classified by function:

• Path construction

• Finishing a path

• Hints

• Arithmetic

• Storage

• Conditional

• Subroutine

The path construction operators are used to define the shape of the glyph, while the finishing operators are used to close the path and prepare the glyph for rendering. The hint operators are used to improve the rendering of the glyph at low resolutions.

Arithmetic operators perform mathematical operations, such as addition and multiplication.

Storage operators store and retrieve data from the charstring.

Conditional operators perform conditional branching, while the subroutine operators define and call subroutines.

The base CFF specification has been upgraded to CFF2. It differs from the original CFF in that it is intended to be used purely in the context of an OpenType font as an ‘sfnt‘ table with the tag CFF2. It also adds new operators that allow it to represent the data for a variable font (we’ve discussed those in previous TT Drops), which includes representations for several different variants of each glyph that can be blended to produce an intermediate instance.

CFF2 also uses uint8, uint16, and uint32 data types instead of Card8 (1-byte unsigned number), Card16 (2-byte unsigned number), and Card32 (4-byte unsigned number) data types used in CFF. Additionally, CFF2 uses cubic (3rd order) Bézier curves to represent glyph outlines, whereas CFF uses quadratic (2nd order) Bézier curves.

Microsoft has an excellent web version of the CFF[2] spec.

A Brief Excursion Into OpenType

“A bit of font generation: a brief excursion into OpenType” (GH) provides an more “hands on” overview of the Compact Font Format table described in the first section. In the event you skipped over that wall of text, the CFF table is a font representation used in OpenType fonts.

The post explains how CFF is used to describe fonts and how it differs from TrueType outlines. It also discusses the advantages of using CFF, such as its ability to encode different kinds of fonts efficiently. It further includes information on how to create an OpenType wrapper around a CFF font and how to map keyboard characters to font glyphs.

You will learn tons from this site, and have a better technical appreciation for what you see on your glowing rectangles every day. If you can grok a bit of javascript, this file shows just what comprises the CFF table.

Featured Font: Gilbert

(This first ❡ is 100% stolen from Type With Pride)

On 31 March, 2017, Gilbert Baker, the creator of the iconic Rainbow Flag, sadly passed away. Mr. Baker was both an LGBTQ activist and artist, and was known for helping friends create banners for protests and marches. To honor the memory of Gilbert Baker, NewFest and NYC Pride partnered with Fontself to create a free font inspired by the design language of the iconic Rainbow Flag, the font was named ‘Gilbert’ after Mr. Baker.

The section header is an example of Gilbert Color Bold Preview5, and the color is baked into the font itself. WTF Color Fonts?!?. Yes, color fonts.

(These next three ❡ are stolen from the colorfonts.wtf link in the previous paragraph.)

A color font file is actually just a regular font file that embeds additional data to display more graphic properties than the contour shapes of a character.

Color fonts are now generally stored as SVG data inside OpenType font files. This SVG (Scalable Vector Graphics) format can hold vector shapes with color or gradients, and may also include bitmap images – thus leading to bitmap fonts.

So color fonts are now officially referred as OpenType-SVG fonts.

The non-colorful version of Gilbert Bold Preview5 has a super cool vibe, and both are joined at the hip with their cousin font that is designed to be used in animation contexts. But, animation-ready fonts are a discussion for another Drop.

FIN

If you design something awesome with Gilbert, or try your hand at creating your own font, drop a note! ☮️