Font and Typeface

All in all, there are two biggies: font and typeface. A typeface is a design of all characters and glyphs and numbers and symbols that match the type designer's aesthetic and vision. You cannot use a typeface directly, it's just the blueprint. A font is one particular implementation of the design. A font you can use.

If you think in terms of object-oriented programing, you can think of the typeface as a class and the font as an object. Typeface is the recipe, a font is a specific instance. For example, Avenir is a typeface, Avenir Book is a font. Menlo is a typeface, Menlo Bold is a font. So is Menlo Italic, as are Menlo Regular and Menlo Bold Italic.

As you can imagine a font can be a heavy (bold) implementation of the typeface, or a slanty (italicized) one. Or condensed, or narrow, or a version 2.0 of the original design. For example Helvetica Neue is a new version of the same Helvetica typeface. (Once upon a time in the printing world a font also meant an instance of the typeface of a specific size, like 12pt)

Let's take a look at Menlo:

The screenshot above shows opening the Font Book app on a Mac, finding Menlo, right-clicking and then selecting Validate. In the font validation you can see Menlo.ttc file. TTC stands for True Type Collection.

Collection

So we come to the definition of the next term - a collection. A collection is just a container file for a group of fonts.

Here's the Fonts directory on a Mac, you can see some ttc (true type collection), some ttf (true type font) and otf (open type font)

A font is a specific instance of a typeface and usually lives in a TTF, OTF, etc file. Or optimized for the web as WOFF2 (formerly WOFF). Whereas a collection is a bundle of fonts.

Font-family

In CSS we don't write "typeface" anywhere, but we do use font-family. These are very much synonymous but not quite the same.

For example Avenir Next and Avenir Next Condensed are two font-families but both are derived from the same Avenir typeface (design). There are several fonts within each family, all coming from the same typeface.

In these two particular cases there's one family per one collection, but it's not a rule. For example the fonts that make up the Arial Narrow font-family are spread around in their own TTF files:

What defines which fonts come together in a family? I don't think there's a rule, it's up to the designer or the design studio (a.k.a. a type foundry) to make that call. Could've "condensed" Avenir-based fonts be part of the Next family? Maybe. The common pattern seems to be that the weights (e.g. heavy, bold, regular, thin, ultra thin) and their italics versions together make up a family.

Web font

Also known as a "custom font", the term web font refers to a font that is transfered over the network as a file, as opposed to being read from the file system and being provided by the operating system. Sometimes you need to download two or three fonts to make up the family (e.g. regular, bold, italic)

(Believe it or not, my young padawan, there was a time when you were not able to fetch font files from the network and your only options were whatever is pre-installed on the user's computer. Hence the "custom" word, at least initially)

Font face

OK, so we have a typeface and a font. What's @font-face then, as seen in CSS?

You can think of font face as synonymous to font. It's still a specific implementation of a typeface with its boldness, italicize-ness, size and so on. The @font-face declaration needs a source (src) which is either a local font file or a remote web font file.

In these @font-face declarations you touch the real instances, the fonts. Otherwise you work with the families. Let's see.

CSS

To specify how text is rendered in CSS you either have a block that styles a specific selector in which case you refer to the family...

.hello {
  font-family: Avenir;
}

... or a @font-face where you use a font in a src

@font-face {
  src: url('/SpecialElite-Regular.woff2') format('woff2');
}

CSS: font-family

In the first case you ask for a family. The browser then decides besed on your other CSS (bold, italics) which specific font to use. (It might even "fake" your desired font, if for example you ask for bold, but the operating system only has a regular.)

If you inspect this in your developer tools:

In Chrome you'll get:

Family name: Arial
PostScript name: Arial-BoldMT

In Firefox:

Fonts used: Arial
Arial Bold

And if you do this:

In Chrome you'll get:

Family name: Arial
PostScript name: Arial-ItalicMT

In Firefox:

Fonts used: Arial
Arial Italic

So you can see that the family is always Arial, that's what font-family: Arial asks for. But the specific font used depends on the other specs such as font-weight and font-style. The browser tools are a little cryptic and not always useful (hello Safari, why do you only give us the family?) but you get the picture.

CSS: font-face

Somewhat confusingly in @font-face you also have font-family but this time you decide how to name it. When you have a few fonts of the same family you load them in separate @font-face declarations but you keep the family name the same (e.g. "SoSpecial"):

@font-face {
  font-family: SoSpecial;
  src: url('/SpecialElite-Regular.woff2') format('woff2');
  font-weight: normal;
}

@font-face {
  font-family: SoSpecial;
  src: url('/SpecialElite-Bold.woff2') format('woff2');
  font-weight: bold;
}

/* Later... */

.boo {
  font-family: SoSpecial;
}

CSS local()

In @font-face you can use local() fonts and tweak them. That's the basis of a font fallback technique (hey I have a tool!). When using local() you must specify a font, not a family.

@font-face {
  font-family: fallbackCourier;
  src: local("Courier New Bold");
  ascent-override: 78%;
  descent-override: 29.68%;
  line-gap-override: 0%;
  size-adjust: 92.64%;
}

This is the big distinction and, I think, the point of the whole article:

use families in font-family and fonts in local()

Wrapping up

OK, now you know the terms:

• Typeface: the overall design of all squiggles
• Font: a specific instance of a typeface
• Font face: also an instance of typeface. Has special meaning in CSS.
• Family: a bunch of fonts that make sense together. One typeface may have several families. One family has a several fonts.
• Collection: a file that bundles a bunch of fonts, usually a whole family of them.
• Web font: one you download over the web
• Type foundry: a place where typefaces are born, fonts are forged and families are argued over

What's Arial?

So knowing all of the above, can you answer the questions: what is Arial?

A typeface? A family? A font?

The answer is - all of the above. That's confusing. That's why this article is trying to shed some light on the definitions.

First of all Arial is a typeface. It's a design based on which a number of families are created: e.g. Arial Narrow, Arial Black and ... yup, one simply called Arial. And the Arial font-family consists of a few fonts: Arial Bold (.ttf), Arial Italic, Arial Bold Italic and... yup, one simply called Arial.ttf instead or maybe Arial Regular.

That's true for many of the most common fonts: Times New Roman, Helvetica... They exist simultaneously as typefaces, font-families and fonts. That's common so much so, that when you use local() you expect what you usually type in font-family to just work. E.g. local(Arial), local(Helvetica).

But then you go local(Avenir) and (boom!) it doesn't work in Chrome. Because Avenir is a typeface (and also a family) but not a font. Avenir Roman is a font, Avenir Book is a font, Avenir is not.

Note on variable fonts

A variable font format allows for continuous weights and other "axis". So for example you don't need a separate file for bold vs regular. Based on the definitions discussed in this article, you can see how one variable font file can host a whole family.

TL;DR: Delete BlinkMacSystemFont and -apple-system from all your CSS, replace with system-ui

When you peek under the hood of a popular site, say GitHub.com, you can probably see a font-family declaration like:

font-family: -apple-system, BlinkMacSystemFont, ...[snip]... sans-serif,

Here's a peek into the aforementioned GitHub's source:

-apple-system?

What is this funny looking font? Prefixed with a - even?

From what I can tell at some point (MacOS El Capitan) Apple introduced a lovely font called San Francisco and thought iOS and MacOS UIs should have a consistent modern look. And feel. And font. And so -apple-system was born. Kinda like: dear developer, you don't need to know the exact actual font, just call -apple-system and we'll take care. We may change San Francisco in the future, but don't you worry your pretty head, the generic -apple-system will always work.

And so -apple-system is not a specific font but acts as a generic family for CSS purposes, just like e.g. serif, monospace and sans-serif. It's not a W3C standard generic family keyword, of course. Who has time to go through a standards body? That's why probably the awkward - prefix, just like a non-standard CSS property or value.

El Capitan is ancient history BTW, it was released 2015. This is Safari 9 we're talking. Your site probably doesn't work very well on it. My site (the one you're reading) for example raises an invalid certificate warning in El Capitan (at least in the browserstack's setup). That's how old.

Anyway, moving on.

BlinkMacSystemFont?

At some point (v55) looks like Chrome jumped on the idea. But hey, they can't put an brand name like Apple (-apple-system) in their offering. Hence BlinkMacSystemFont. Blink as in the Chrome's rendering engine, Mac as in Macintosh, System as in -apple-system and Font for good measure.

Chrome 55 is old too, released 2016. Your site maybe doesn't work all that great in it.

system-ui

Eventually some sort of reason came into the picture. Maybe an adult entered the room, I don't know. But a W3C-proper generic family name system-ui came into being to replace both of BlinkMacSystemFont and -apple-system. From my testing system-ui shows up since Safari 11 in High Siera OS. And in Chrome 56.

That's still ancient history. Both browsers were released in 2017. Remember when you tested your site in Safari 11? I don't either.

Firefox also joined the -apple-system madness until version 92 added system-ui too.

Current state

Here's a test page I loaded in a bunch of browsers.

Today's FF and Safari still support -apple-system in addition to system-ui. Both of these generic font families render the same .SF NS font. They are aliases of each other.

Today's Chrome still supports BlinkMacSystemFont in addition to system-ui. Both render the same .SF NS font.

What about Windows?

No Windows users were hurt in this whole Apple-specific debacle. On Windows none of BlinkMacSystemFont or -apple-system ever worked. But system-ui works and renders Segoe UI. Ladies and gentlemen, here's my test page rendered in Edge:

So what's a dev to do?

(If you skimmed the content so far, let me summarize: system-ui was added looong time ago to replace both BlinkMacSystemFont and -apple-system. You don't need these two anymore.)

So.

1. Search all your CSS for occurrences of BlinkMacSystemFont and replace with system-ui (if not already there).
2. Rinse, repeat the same with -apple-system: search all your CSS for occurrences of -apple-system and replace with system-ui (if not already there).

Results! Cleaner, leaner CSS, no outdated remnants of Web history and no more confusion.

If you're not into fonts and just want a nice sans-serif font, use:

font-family: system-ui, sans-serif;

... and move on with your life. This will make you page work in Chrome 1 and even earlier.

Bonus random observations

At some point SF (as in the .SF NS family name) was standing for San Francisco. Now it appears to stand for System Font. No biggie.

.SF NS is a real font (you can actually locate the file SFNS.ttf on your Mac computer) but for some strange reason it cannot be used with local(). It's not a valid family name either (font-family: .SF NS doesn't work). It's a font that is there but not addressable by name. I hope Apple fixes this and let us use it with local() as a nice fallback font for web fonts.

In El Capitan the system font behind the scenes was actually named .SF NS Text. Since Catalina it's .SF NS (no "Text"). Whoop-de-doo.

Chrome 55 that introduced BlinkMacSystemFont also works on Mac OS versions before El Capitan, so before the whole system font debacle. What's a browser to use as a "system" font before the "system" fonts were introduced? Just pick another nice sans-serif. In Yosemite that happen to be a font called .Helvetica Neue DeskInterface (what's with them . dots, may I ask?)

Other generic family names are introduced later, such as ui-monospace and ui-rounded. That's nice, but the "ui" part turned into a prefix rather than a suffix. So we're "forever" cursed to double-guess ourselves... was it system-ui or was it ui-system. Welp.

An article by booking.com reveals a funny thing where some IE (remember IE!?) and Edge versions see the - in -apple-system and decide the whole thing that follows is a non-standard value they can safely ignore. Times New Roman here we come!

Note

The history bits in this post are my deduction of what happened based on testing. If I got something wrong, please correct me

Think of a logo. Instead of an image, you can use a font file where only the characters that make up the name of the company are present. That's pretty extreme as subsettings go, but it may be handy sometimes.

In this site for example, I've subset the web font Special Elite to only contain the characters "H, i, g, h, -, P, e, r, f, o, m, a, n, c, (space), W, b, F, t, s" which are enough to spell the site name "High-Performance Web Fonts" and the logo HPWF.

Here's how the characters look in the tool wakamaifondue.com:

And the glyphs shown in fontdrop.info:

As you can see characters are not the same as glyphs.

A new font is born

So naturally, when I tried to use the same extremely subset font for any other H1 titles, I have missing characters:

For example my subset has no T, A, I, p, (, ) and so on. Probably a bit more obvious with Menlo fallback:

But I kinda like it. Gives you that murdery ransom letter vibe.

And so, by accident a new "font" is born: let's call it Ransom. A combination of extremely subset Special Elite and a fallback.

Good idea? I dunno. But certainly an option

1. Content is ready
2. CSS is ready
3. It appears that some content will indeed need the web font

It's often late enough in the page rendering that the content in question is initially rendered in a fallback font (or not shown at all, depending on font-display). To prevent this you can preload the font using an HTTP header or a link in the head of the document. Like so:

<link
  rel="preload"
  href="https://highperformancewebfonts.com/SpecialElite-Regular-subset.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

This way you warn the browser that the font is going to be needed very soon and the browser can download it early for you.

This article is about the importance of crossorigin part of the code above.

The chunk of time (the initial download of resources) especially resources in the head (known as "tight mode" in Chrome) is critically important. And if you lie to the browser by making it download someting that won't be needed, it will complain. Like so:

The resource https://highperformancewebfonts.com/SpecialElite-Regular-subset.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

We don't want that.

But we do get that if we forget the crossorigin in the link tag. Even if the font is on the same domain.

See for yourself with these couple of test pages:

• With a crossorigin - all peachy
• Without a crossorigin - two console warnings

Here's what the result of omitting the crossorigin looks like:

There are two error messages:

• one complaining that the preload is not used and directly pointing the blame at the crossorigin.
• second one complaining that the preloaded font was unused

Additionally the font is downloaded twice! So the first error message is actually kinda wrong. Found but not used, you say? Well, it's sorta used because it causes the extra download. And we know that because the "initiator" of the first download points to the link preload. (The second download initiator points to the ether, to the end of the html file, past the closing /html)

To summarize

Always add crossorigin, even if the font is on the same domain. If you don't, not only you don't win anything, but you add an extra download at the worst possible time (initial tight-mode downloads)

Browsers

Firefox and Chrome exhibit this behavior. Safari is happy without the crossorigin, when the font is on the same domain at least.

crossorigin value

The proper use is crossorigin="anonymous". The attribute crossorigin without a value is fine. So is crossorigin="crossorigin" or crossorigin="anything your heart desires". They all mean crossorigin="anonymous"

Usually people use rendering text to a hidden "canvas" (e.g. a div) and measuring the expected width compared to a default font.

There's a better way - using the FontFace constructor:

const hasAvenir = await new FontFace('meh', 'local("Avenir Book")').load().then(
  () => true,
  () => false
);

What's going on here?

• meh is just string, useless in this case
• usually we use url() to load an external font file, but here the trick is to use local()
• we're trying to load a local font that goes by the name "Avenir Book"
• the load() method returns a promise where you can return true if the font is available or false if there's a NetworkError exception. (Funny that it's a network exception for a local load, but that's not really important)

local() vs font-family

There are differences between using local('Font name') and font-family: Font name. See this writeup for details.

In practice for example font-family: Avenir works fine across browsers (on systems that have Avenir, e.g. Mac OS), but local('Avenir') may not. At the time of writing, it works in Firefox but not in Chrome. However local('Avenir Book') works in both.

The code above works just like the browser would when using local() for real and not just for testing. If that's what you want (I know I do, for the Fafofal tool) -- great. If not, it's back to measuring widths

Yes, reasonably expected. But that doesn't mean really expected. For example this article points out that even Arial and Times New Roman are not present on some Android distributions.

And, as I found out today (Thanks Barry!) working on this here web site, Courier New is not available on iOS. Let's repeat this again.

Courier.

Arial.

Times New stinkin' Roman!

If these are not "safe", there is no such thing as a web-safe font.

On this site I use a web font for headings and I had a local Courier fallback:

@font-face {
  font-family: fallbackCourier;
  src: local("Courier New Bold");
  ascent-override: 78%;
  descent-override: 29.68%;
  line-gap-override: 0%;
  size-adjust: 92.64%;
}

Now I've added Menlo as a fallback too:

@font-face {
  font-family: fallbackMenlo;
  src: local("Menlo Regular");
  ascent-override: 77.2%;
  descent-override: 30.8%;
  line-gap-override: 0%;
  size-adjust: 92.34%;
}

Note: "Menlo Regular". Because local("Menlo") doesn't work, at least not in Chrome. As with the Avenir debacle, Menlo is a collection of fonts, not a font itself.

Here's a Font Book screenshot to to show the Menlo ttc (c as in collection)

Time to lay this "web-safe" expression (that has been with us since forever) to sleep