# Font Jargon

Typeface, font-face, font-family, font collection, web font... do all of these just mean _font_? And what _is_ a font exactly? Let's take a minute to define some words more precisely, at least their use in web development context (as opposed to traditional printing). After all, unambiguous terms always help our understanding of a concept.

## 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:

![Menlo collection](/i/posts/def-menlo2.png)

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)

<img src="/i/posts/def-dir.png" alt="Fonts directory" width="300"></img>

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_.

<img src="/i/posts/def-avenir-next.png" alt="Avenir Next" width="250"></img>

<img src="/i/posts/def-avenir-next-condensed.png" alt="Avenir Next Condensed" width="300"></img>

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:

<img src="/i/posts/def-arial-narrow.png" alt="Arial Narrow" width="300"></img>

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_...

<pre class="prettyprint">
.hello {
  font-family: Avenir;
}
</pre>

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

<pre class="prettyprint">
@font-face {
  src: url('/SpecialElite-Regular.woff2') format('woff2');
}
</pre>

### 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:

<div style="text-align: center; border: 1px solid orange; font-family: Arial; font-weight: bold">font-family: Arial; font-weight: bold</div>

In Chrome you'll get:

<pre>
Family name: Arial
PostScript name: Arial-BoldMT
</pre>

In Firefox:

<pre>
Fonts used: Arial
Arial Bold
</pre>

And if you do this:

<div style="text-align: center; border: 1px solid orange; font-family: Arial; font-style: italic">font-family: Arial; font-style: italic</div>


In Chrome you'll get:

<pre>
Family name: Arial
PostScript name: Arial-ItalicMT
</pre>

In Firefox:

<pre>
Fonts used: Arial
Arial Italic
</pre>

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"):

<pre class="prettyprint">
@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;
}
</pre>

### 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!](/tools/fafofal)). When using `local()` you must specify a _font_, not a _family_.

<pre class="prettyprint">
@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%;
}
</pre>

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_.<i class="circle"><s></s></i>