---
source: https://www.makingsoftware.com/chapters/how-to-make-a-font
title: "How to make a font."
author: "DAN HOLLICK"
captured: 2026-07-14
---

# How to make a font.

By DAN HOLLICK

![Font data for the letters Abc.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fhero.png&w=3840&q=75)

Let's get this out of the way - I'm not a type designer. I've never made a typeface, it's way too much work. And this is coming from a guy writing a hundred thousand words about software.

On the face of it, a font is just a collection of vectors for each character and making a font is just the process of painstakingly drawing those vectors. But creating the actual glyphs is sort of the easy part, there's so much more to consider when you have to make those individual characters work with each other, at different sizes, cases and weights.

╌╌╌╌

### [What is a font?](https://www.makingsoftware.com/chapters/how-to-make-a-font#what-is-a-font)

Type designers are very sensitive about terminology so let's spend some time getting the lay of the land. In practice, people use the terms font and typeface interchangeably but a [**typeface**^29^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-typeface) is the family - Garamond, in all its weights and styles - and a [**font**^11^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-font) is a specific instance: Garamond Roman at 12pt, or Garamond Bold Italic.

From a technical perspective, a font file is a structured database made up of tables. Only one of the tables in this database contains the outline data for each [glyph^12^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-glyph), which is what we typically think of as the font.

![The structure of an OpenType font file.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Ffont-01.png&w=3840&q=75)

The other tables contain all the stuff that actually makes the font render correctly, like spacing metrics that define how much room each character takes up, [kerning^15^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-kerning) tables that adjust spacing for specific letter pairs, [hinting^13^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-hinting) instructions for rendering at small sizes, and metadata like the font's name, license, and supported languages.

The format of this container has evolved significantly over the decades. In the early days of digital type, Adobe created **PostScript Type 1** fonts in 1984. These used cubic [Bézier curves](https://www.makingsoftware.com/chapters/drawing-curves)^↗^ to describe glyph outlines and became the professional print standard. But they were limited - each font file could only hold 256 glyphs (not nearly enough for many languages) and required two separate files to work.

![Glyph data for 'R' using cubic Bézier curves.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Ffont-02.png&w=3840&q=75)

Apple responded in the late 1980s with **TrueType**, which used quadratic [Bézier curves^4^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-bezier-curve) instead. Quadratic curves are simpler (three control points instead of four) but require more points to achieve the same shapes. TrueType's big advantage was its built-in hinting system, which gave type designers precise control over how glyphs snapped to the pixel grid at small sizes. Microsoft adopted TrueType for Windows, and it quickly became ubiquitous.

![Glyph data for 'R' using quadratic Bézier curves.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Ffont-03.png&w=3840&q=75)

In the late 1990s, Microsoft and Adobe joined forces to create **OpenType** - a unified format that could contain either TrueType or PostScript outlines. OpenType was a massive step forward: it supports up to 65,536 glyphs per font (enough for full [Unicode^30^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-unicode) coverage across dozens of languages), and it introduced layout tables that enable advanced typographic features like [ligatures^17^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-ligature), small caps, stylistic alternates, and contextual substitutions, all embedded directly in the font file.

The most recent evolution is [**variable fonts**^31^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-variable-font), which pack an entire design space into a single file. Instead of shipping separate files for Light, Regular, Medium, Bold, and Black, a variable font defines one or more axes - weight, width, slant, optical size - and [interpolates^14^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-interpolation) between master designs at runtime. You can request any point along those axes, not just the predefined stops. This is a huge win for the web, where loading five separate font files for different weights means five separate network requests.

![Variable fonts can be interpolated between any of the weights.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Ffont-04.png&w=3840&q=75)

If we dig into the contents of an OpenType font file we can get a sense for just how complex a font is. First we have the glyph tables which have a different format depending on the flavor of font, either TrueType (`.ttf`) or vanilla OpenType (`.otf`).

TrueType-flavored fonts use `glyf` and `loca` tables. The `glyf` data is a series of points that describe the shape of the glyph using quadratic Bézier curves. Each point has two parameters: an `x,y` position and a flag that indicates if the point is on a curve or if it's a control point.

![TrueType uses a quadratic Bézier format that can fill in missing anchor points between control points.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Ffont-05.png&w=3840&q=75)

This format is kind of clever. If there are two consecutive on-curve points, that's a straight line. If we have an on-curve → off-curve → on-curve sequence, it forms a quadratic Bézier segment, where the off-curve point is the control point. If there are two consecutive off-curve points, the [rasterizer^21^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-rasterization) inserts a virtual on-curve point halfway between them, which allows us to construct the Bézier segment without explicitly storing every anchor point.

The `loca` table simply stores the byte offsets for each glyph so the system knows exactly where one glyph ends and another begins.

![The LOCA table stores byte offsets for each character.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Ffont-06.png&w=3840&q=75)

OpenType-flavored fonts use either a `CFF` or `CFF2` table to store the glyph data. Instead of storing points, a glyph is described by a sequence of drawing operators such as `rmoveto`, `rlineto` or `rrcurveto`. These operators use numbers from a stack to move the draw point the correct amount, very similar to the SVG path data format. Because the numbers are relative, they are smaller and more easily compressed.

![OpenType flavor glyphs use drawing instructions very similar to SVG paths.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Ffont-07.png&w=3840&q=75)

The `CFF2` format is a modern version of this designed for variable fonts, which adds offsets for the base characters depending on the weight, width or optical size. When the system draws a variable glyph it processes the base points and then adds offsets from these tables based on the current settings.

![Variable fonts store offsets from the base which can be used to interpolate at any point between them.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Ffont-08.png&w=3840&q=75)

The glyph data is translated to actual characters using a `cmap` table which maps them to Unicode character codes. When you type an A your computer recognizes that as `U+0041` and looks up the glyph for that character code in the font file.

![The CMAP table stores a mapping between Unicode code points and the font's internal glyph IDs.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Ffont-09.png&w=3840&q=75)

The `head` table is a header that contains metadata like the version, global bounding box and the grid scale in Units Per em (UPM). The UPM defines how many font units correspond to one [em square^10^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-em-square) in the font's design space and allows the renderer to scale the glyphs correctly for different sizes. Typically, this value is 1000 for CFF fonts or 1024 for TrueType fonts.

![The HEAD table defines the unit system for the Em square.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Ffont-10.png&w=3840&q=75)

Next we have the `hhea` table which is a header that stores the global metrics for the horizontal languages (ltr and rtl). This stores stuff like the maximum [ascender^2^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-ascender) and [descender^9^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-descender) heights and recommended [leading^16^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-leading) distances as well as the Max Advance Width, which is the widest glyph in the file. There's an optional vertical version of this table, `vhea`.

![The HHEA table defines the necessary global heights and widths.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Ffont-11.png&w=3840&q=75)

We also have a `hmtx` table (`vmtx` for vertical languages) that stores all the specific per-letter spacing data. They define three critical spatial zones mapped to every single glyph in the font: Advance Width / Height, Left Side Bearing (LSB) and Right Side Bearing (RSB).

![Every glyph has its own width and sidebearings.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Ffont-12.png&w=3840&q=75)

The [Advance Width^1^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-advance-width) is basically like the bounding box for each letter and is pretty crucial for the system to allocate space accurately when constructing a [text run^27^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-text-run). The LSB is the amount of left padding in the bounding box and RSB is the right padding, which is usually calculated using the width and the LSB.

There are a few other tables that store the memory requirement for the font (`maxp`) and the textual information related to the font (`name`), but the last really important table is the `OS/2` table. Its name originally comes from the OS/2 operating system from the late 1980s but today it's used for storing all the information a given operating system or application needs to render the font.

This is where the font weight and width ranges are stored as well as the family style (e.g., Serif, Sans-Serif, Script, Monospace). It also contains the optical alignment information the renderers need to align the text, the [x-height^32^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-x-height) and [cap height^6^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-cap-height).

More importantly, this table contains a bunch of cross-platform metrics for the font. Because different platforms have different ways of rendering a font they can draw different clipping boundaries. This table has some platform-specific metrics to make that work on Windows, macOS and the web consistently. It also contains the `cmap` table we spoke about earlier.

### [Text shaping](https://www.makingsoftware.com/chapters/how-to-make-a-font#text-shaping)

When your computer lays out some text it goes through a bunch of steps that we generally call [text shaping^28^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-text-shaping).

![The process of text shaping.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fshaping-01.png&w=3840&q=75)

Before any actual glyphs are rendered, your computer needs to know how to lay out the text by dividing it up into chunks called *runs*. A single run is a segment of text that shares the same font, size, color and language. If anything changes, like an italicized word in a sentence, the run ends and a new run is started.

![Text is segmented into runs which group together chunks with the exact same properties.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fshaping-02.png&w=3840&q=75)

Characters are generally classifiable into *strong* and *weak*. A strong character is one that strongly belongs to a specific alphabet, like Latin "A" or Greek "Δ", and they tell the renderer what language it belongs to. Weak characters are things like spaces, numbers, and punctuation (like "?" or " "). They don't belong to any specific language and so they don't cause a run to be stopped.

![A character strongly associated with a language can cause a new run to be created but weak characters don't.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fshaping-03.png&w=3840&q=75)

These runs are important because the computer treats them as completely isolated from each other. If a Greek letter is in Run #1 and a Latin letter is in Run #2, the computer cannot create smooth spacing (kerning) between them, because it refuses to look across the border of a run.

After the text has been divided into these runs, each run goes through a 4-step process. The first step is the dictionary lookup, where it takes the Unicode value for A `U+0041` and uses the `cmap` table to get a Glyph ID for that character.

![The CMAP table holds the mapping from Unicode code points to the font's internal ID structure.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fshaping-04.png&w=3840&q=75)

It then takes that ID and checks the `GSUB` table to see if it needs to make any substitutions to that character based on context. For example, if you type the letters "f" and "i" next to each other, this step automatically swaps those two individual boxes for a single, beautifully merged "fi" ligature box.

![The GSUB table stores instances where we can replace a series of glyphs with a single glyph, known as ligatures.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fshaping-05.png&w=3840&q=75)

After that, it needs to apply any specific spacing rules for pairs of letters using the `GPOS` table. If it sees a capital T next to a lowercase "o", the `GPOS` table tells it to slide the "o" leftward so it sits snugly underneath the crossbar of the "T". This is context-aware kerning for letter pairs.

![The GPOS table stores kerning pairs, among other things.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fshaping-06.png&w=3840&q=75)

Up until this point, the computer has actually just been moving invisible, empty geometric boxes around but the final step is to actually render the glyphs in those boxes by fetching the data associated with each ID and drawing it at the selected scale. Remember that each glyph has a specific set of [sidebearings^23^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-sidebearing) that place it in this box.

![Each glyph ID points to a set of glyph data used to render the character.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fshaping-07.png&w=3840&q=75)

When you use a variable font all that happens is the weight is determined at the beginning of this process, before the text is sliced into runs, basically selecting that weight as the font.

This whole process is quite similar to the way HTML and CSS are laid out by your browser. The Unicode text is the raw HTML content, the font selection and colors are the CSS styling, and the 4-step process is the browser building the layout blocks and painting them onto your screen.

### [Font hinting](https://www.makingsoftware.com/chapters/how-to-make-a-font#font-hinting)

Earlier I mentioned that TrueType's big advantage was its built-in hinting system and now we know enough to explain what that actually means. Our glyphs are drawn on a grid of ~1000 units but when text is rendered at small sizes, that entire coordinate system gets squeezed into a handful of pixels.

![At lower resolutions our glyph starts to lose its shape.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fhinting-01.png&w=3840&q=75)

At 11px, a stem that is 100 units wide works out to just over one pixel and it almost never lands cleanly on the pixel grid. One stem of an H might rasterize as a single crisp column of pixels while the other smears across two gray ones, making the letter look blurry and lopsided.

Hinting is a set of instructions stored in the font that distort the outlines at specific sizes so they snap to the pixel grid before being rasterized. The goal isn't to preserve the true shape of the letter, it's to betray it slightly in exchange for crispness - rounding stems to whole pixel widths, forcing both stems of an H to be identical, and keeping the x-height consistent across every letter on the line.

![Hinting manipulates the glyph information to to produce crisper text at low resolutions.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fhinting-02.png&w=3840&q=75)

The two flavors of font handle this very differently. TrueType hints are literally tiny programs, stored as bytecode in the `fpgm`, `prep` and `glyf` tables and executed by a little virtual machine inside the rasterizer. This gives the type designer control over every pixel at every size, and in the era of low-resolution CRTs that control really mattered - fonts like Verdana and Georgia were hand-hinted pixel by pixel, which is a big part of why they were so readable on the screens of the time.

![Lowercase 'a' in Verdana at different sizes / resolutions.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fhinting-03.png&w=3840&q=75)

CFF-flavored fonts take a declarative approach instead. Rather than programming the exact result, the font just marks where the important features are - the positions and widths of the stems, plus a set of horizontal alignment zones called blue zones for the baseline, x-height and cap height - and leaves the actual grid-fitting decisions to the rasterizer.

Hinting matters a lot less than it used to. High-resolution displays mean stems are several pixels wide and anti-aliasing smooths over the rest, so macOS ignores most hinting entirely and just renders the faithful outline. Most fonts today are hinted automatically by the font editor or tools like ttfautohint, and hand-hinting has become something of a lost art.

## [The language of type](https://www.makingsoftware.com/chapters/how-to-make-a-font#the-language-of-type)

Because type design is actually an incredibly old craft, it has its own language of terminology used to describe the various parts and properties of a typeface. In fact, most of these names and concepts come from the physical medium we used long before computers needed to render letters.

The word font itself comes from the French *fondre*, "to melt/cast", and a font was originally a complete casting of a typeface in one particular size. Each letter was called a sort and they were stored in cases, with the capitals stored in the upper case and the other letters stored in the lower case because they were used more and it was closer.

![A lot of type terminology comes from the physical origins of type setting.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Flanguage-01.png&w=3840&q=75)

Typesetters would use thin strips of lead to space rows of letters apart, which is where we get the term leading to describe line spacing. Kerns were pieces of a letter that overhung the metal body to compensate for spacing and now we use kerning to describe the digital process of letter spacing.

Anyway, there are a lot more terms that have very specific meanings in type design.

### [Sizing and proportions](https://www.makingsoftware.com/chapters/how-to-make-a-font#sizing-and-proportions)

Each glyph is designed in a bounding box area called an *Em* and when we discussed the contents of the font file earlier, you'll remember that we set the unit scale (Units Per em) for this area, typically at 1000. Everything we'll come to define is based on this coordinate system.

![The em square sets the unit scale for drawing our letterforms.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-01.png&w=3840&q=75)

When your font is displayed at 14px on a screen, it's that em square that occupies those 14 pixels in height (for a lot of complicated reasons, it's almost never 14 actual screen pixels). When the font size increases, that em square is scaled up but the coordinates remain the same because they are relative.

The 0,0 value for this coordinate system is not in the top or bottom left like you might think. In fact, it's defined by where we put the [*baseline*^3^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-baseline), which is a horizontal line that anchors the alignment for the whole typeface. Generally, we want the baseline to be about three quarters of the way down the em grid (this is for Western alphabet fonts - I don't know anything about how this works for other alphabets).

![The baseline sets the 0 value for the y-axis.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-02.png&w=3840&q=75)

From there we need to set the basic heights of the typeface starting with *cap height*, the height of the capital letters, which is usually set using the capital H because it has a flat top and a simple shape (E or I work for the same reasons).

![Setting the cap height based on the letter H.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-03.png&w=3840&q=75)

It's tempting to think that this defines the upper limit of how tall any letter can be but it's really just an alignment point and many letters purposefully [*overshoot*^20^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-overshoot) it. Rounded letters like O, C, G, Q, S and pointed letters like A and V often slightly overshoot the cap height and the baseline so that they are optically aligned to the grid, rather than mathematically aligned.

![To optically align some letters we purposefully overshoot the alignment guides.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-04.png&w=3840&q=75)

The next really important height is the *x-height* which sets the height for all the lowercase letters, typically defined by the letter x but occasionally o or n. Setting the x-height might be one of the most consequential decisions when making a typeface because it sets the apparent visual size. Generally, the x-height is set between 60-75% of the cap height.

![The x-height sets the height range for lowercase letters.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-05.png&w=3840&q=75)

There's a strong correlation between x-height and the legibility of a typeface, with taller x-heights being easier to read because they allow more space for the differentiating details of each letter to be seen.

Typefaces with taller x-heights actually appear larger at the same font size. There's a really famous example of this with Mrs. Eaves, a typeface designed by Zuzana Licko for the Emigre type foundry, which has a distinctively small x-height of 57%. They later released Mrs. Eaves XL, a version with a much taller x-height of 72%, and when you compare them at the same font size the difference is quite astonishing.

![Mrs. Eaves and Mrs. Eaves XL.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-06.png&w=3840&q=75)

Notice how the smaller x-height doesn't necessarily result in a narrower overall width for a word, because more horizontal space is required to keep the letters distinct. There's also a diminishing return to x-height size because it becomes difficult to distinguish ascenders and descenders. Of course, there's been some [research](https://jov.arvojournals.org/article.aspx?articleid=2191906) into this and it turns out the optimal x-height is around 0.3° of visual arc, after which reading speed begins to decrease.

![Words per minute vs x-height in degrees. Original chart by Gordon E. Legge Charles A. Bigelow](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-07.png&w=3840&q=75)

Arc is a way of measuring how much of your field of view an object takes up, in degrees, which depends on both how big and how far away something is - removing all the variance caused by pixel size and density.

![Visual arc depends on the size and distance of an object.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-08.png&w=3840&q=75)

In the study they used a distance of 40cm. Practically, this means that typefaces with x-heights outside of this optimal range need to be either larger or closer to have the same legibility as typefaces within this range.

![You can increase the arc size by increasing the font size or shortening the distance.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-09.png&w=3840&q=75)

Anyway, the next heights we need to define are the *ascender* and *descender* which set the alignment points for lowercase letters that need to project past the x-height in either direction. For both of these we want to set them using a letter that commonly has a clean vertical [stem^24^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-stem) so we don't have to contend with overshoots of complicated [terminals^26^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-terminal). For ascenders, we can use h, d, b, or l and for descenders p or q.

![Setting the ascender and descender heights.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-10.png&w=3840&q=75)

Just like with any of the other heights we defined, a lot of our letters will actually slightly overshoot these lines to optically balance the letter relative to others. f and g are examples of letters that tend to overshoot because of their curved segments.

![Letters can always overshoot alignment points to maintain optical balance.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-11.png&w=3840&q=75)

There are other heights we need to define too. The figure height for numerals, which is usually the same as the cap height. The small cap height, if the font includes small capitals, which is typically somewhere between the cap height and x-height. The accent/diacritic height which defines the height of letters with accents, which often extend past the cap height or ascenders. The superscript and subscript positions which define how the baseline shifts and how the glyph should be scaled.

![Defining small capitals height, accent height and baseline and the subscript and superscript offsets.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-12.png&w=3840&q=75)

So far, we've only defined the height scale of our font but our letters have different widths if we are making a proportional font (a [monospaced^19^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-monospaced) font is one where each letter has the same width). We touched on this a bit earlier but the overall width that a letter takes up is called the *advance width* which is calculated by adding the left sidebearing, the glyph width, and the right sidebearing. Sidebearings are sort of like margins we add to each letter to space it away from other letters and maintain an optical balance, not to be confused with kerning which we'll get to later.

![Sidebearings are spacing we add to individual letters.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-13.png&w=3840&q=75)

Like we saw with Mrs. Eaves, sidebearings are influenced a lot by the x-height. A smaller x-height usually requires extra spacing around lowercase letters to ensure they are legible. There are exceptions to every rule and condensed fonts tend towards having narrower advance widths overall.

![Smaller x-heights often require larger sidebearings to maintain rhythm.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fsizing-14.png&w=3840&q=75)

### [Weight and contrast](https://www.makingsoftware.com/chapters/how-to-make-a-font#weight-and-contrast)

I think we can all intuitively understand that the weight of a font is a measure of how thick the glyphs are but there isn't any sort of standardization around what constitutes a *regular*, *semi-bold* or *bold* font weight, or even that they are called those terms. The closest thing there is to a standard is on the web with the default (regular) weight being mapped to weight 400 in CSS and bold mapped to weight 700. Aside from that, it's a bit of a free-for-all.

Fortunately there are some ways to measure the weight of a font, a useful one being the ratio between the x-height and the vertical stem thickness, described by type designer Charles Bigelow. A typical regular weight will have a ratio somewhere in the neighborhood of 1:5-1:6, meaning the x-height is about 5-6 times the thickness of the vertical stems.

![We can measure weight as a function of x-height.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fweight-01.png&w=3840&q=75)

If we imagine this on our em grid, a typical x-height might be about 500 units (0.5em) and so a regular font stem width would be about 100 units. Using this ratio, Bigelow also describes that different weights should be 1.3-1.5 times this ratio to be visually distinct enough. This means the next weight up should have a stem width of ~130 units and the next weight down should have a stem width of ~70 units.

![To make different weights distinct we aim for 1.3-1.5 times thicker strokes.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fweight-02.png&w=3840&q=75)

This creates a linear scale of thickness between weights and another type designer, Luc(as) de Groot, suggests a progression that interpolates non-linearly, almost like an easing curve. None of these are rules though and you are free to do whatever you want.

![The weight progression of Inter.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fweight-03.png&w=3840&q=75)

We don't tend to keep all our stems the same thickness and the difference between vertical stem thickness and horizontal stem thickness is called [**contrast**^7^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-contrast). A typeface has a high contrast if this difference is large and low contrast if this difference is small. If all the strokes are the same thickness, we call this a [monolinear^18^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-monolinear) typeface.

![Contrast is a measure of difference between stroke widths.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fweight-04.png&w=3840&q=75)

That being said, even in monolinear typefaces, strokes will have slightly different thicknesses based on their direction and curvature. This is because of something called the thickness illusion where horizontal lines appear thicker than vertical or diagonal ones, even if they have the same actual thickness. To optically balance the strokes, horizontal stems are usually thinned out slightly.

![To compensate for the thickness illusion, horizontal lines need to be thinned out.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fweight-05.png&w=3840&q=75)

This problem, and the idea of contrast, isn't limited to just straight lines like stems but also to the circular shapes we call [**bowls**^5^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-bowl). To create a bowl that appears optically consistent with the rest of the typeface, we need to ensure that the thickest part of the curve is thicker than our vertical stem thickness. Likewise, the thinnest parts of the curve should be thinner than the horizontal stem weight.

![We apply a similar compensation to bowls and curves.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fweight-06.png&w=3840&q=75)

While contrast refers to the degree of difference between stroke weights in our typeface, [**stress**^25^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-stress) refers to the direction or axis this difference occurs at. Type design has roots in calligraphy and stress comes from the way a pen changes its stroke thickness based on pressure or speed. Type designers like for each letter to look like it was made by the same implement, so the axis of stress should be consistent throughout each letterform.

![Stress is the angle of contrast.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fweight-07.png&w=3840&q=75)

Type design is all about the process of optically aligning the different shapes of the letterforms to make them seem balanced and cohesive. Most letters occupy a roughly square shape and so, to optically appear the same size, rounded and triangular letters like O, A, or V undershoot the baseline and overshoot the cap height.

![To make letters of different shapes appear aligned and balanced, we can overshoot the alignment lines.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fweight-08.png&w=3840&q=75)

Another one of these tricks involves the optical center of double-story glyphs like E, B, or S. If we drew the crossbar of the H at the mathematical center it would appear too low so we adjust the midpoint for all double-story glyphs upwards.

![Optically centering the crossbars on double-story glyphs.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fweight-09.png&w=3840&q=75)

But now we have a slight issue with glyphs like E and B where this adjustment is obvious. To counteract it, we need to make the width of the lower story wider than the upper story.

![Optically balancing the off center crossbars with wider lower stories.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fweight-10.png&w=3840&q=75)

### [Anatomy of a letter](https://www.makingsoftware.com/chapters/how-to-make-a-font#anatomy-of-a-letter)

So far we've talked about stems and bowls but there is a name for every conceivable part of a letter. Let's start with the one you already know, the [**serif**^22^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-serif) which is the name for the little feet that attach at the bottom or top of a stem. Some serif typefaces counteract the illusion that they are bending slightly by curving the horizontal segment inward, known as a **cupped** serif.

![EB Garamond has curved cups to counteract its large serifs.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fanatomy-01.png&w=3840&q=75)

Serifs can be **bracketed**, which is when they have a curved support joining them to the main stroke, or unbracketed. They can also be **wedged**, when their end is thinner than their start, or **slab**, when they have uniform thickness, or **hairline**, where they are uniform but very thin.

![Various serif types.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fanatomy-02.png&w=3840&q=75)

A more general term for the end of a stroke is a **terminal**. In a serif typeface, these terminals might have embellishments like **teardrops**, **balls**, **flares**, **shears**, or **calligraphic** ends, and they can also be bracketed to the main stroke.

![Various terminal types.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fanatomy-03.png&w=3840&q=75)

If a vertical serif appears just on the top of a letter, like a G or S, we call this a **beak**. Sometimes a serif typeface will have little serifs at the join between two strokes and these are called **spurs**. If there is a horizontal serif just to one side of a vertical stem, like on the number 1, we call this a **flag**.

![Flags, beaks and spurs are common embellishments for serif typefaces.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fanatomy-04.png&w=3840&q=75)

If a stroke finishes below the baseline, we call this a **tail**. Sometimes, we can replace the tail with a flourish called a **swash**. For open letters, like c or e, they can have curved or tapered terminals called **finials**.

![Tails, swashes and finials.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fanatomy-05.png&w=3840&q=75)

The fully or partially enclosed part of a letter is called a [**counter**^8^](https://www.makingsoftware.com/chapters/how-to-make-a-font#definition-counter), unless it's a lowercase e, in which case we call it an **eye**, or a double-story lowercase g, in which case we call it a **loop**. In that case, the loop is joined to the upper story with a **link**, which could also be finished in an **ear**.

![Counters, loops, links, eyes, and ears.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fanatomy-06.png&w=3840&q=75)

The dots on top of an i or j are called **dots** or **tittles** and the curved top of an f is a **hook**. The curved join between vertical stems on letters like n or m is called a **shoulder**. The diagonal stem in a k or R is called a **leg** and horizontal stems that are only attached at one end, like in E, are called **arms**.

![Dots, hooks, shoulders, arms, and legs.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fanatomy-07.png&w=3840&q=75)

The cinched center of a double-story letter like B, R or K is called a **waist** and the curved vertical stroke in s or 8 is called a **spine**. The short vertical stem before the opening of G is called a **throat**.

![Waists, lobes, spines and throats.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fanatomy-08.png&w=3840&q=75)

It's not all anatomical references; horizontal strokes joining to vertical stems are called **crossbars**. When two diagonal strokes join near the bottom we call it a **vertex** and when they join near the top we call it an **apex**.

![Crossbars, apexes, and vertexes.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fanatomy-09.png&w=3840&q=75)

### [Spacing](https://www.makingsoftware.com/chapters/how-to-make-a-font#spacing)

A great proportion of the work that goes into designing a typeface goes, not into designing the glyphs, but into perfecting the negative space between them. Spacing has an outsized effect on how readable a typeface feels. If letters are spaced too sparsely, it creates whitespace rivers that make the word hard to parse. When they are spaced too densely, it makes the letters indistinct.

![Letter spacing has an outsized effect on readability.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fspacing-01.png&w=3840&q=75)

A well-spaced typeface has a visual rhythm between letters and between words, which makes scanning the text much easier. A common way to describe this is that at arm's length a line of text should have an even gray color but in reality it should be stripey in a predictable way.

We think about spacing in pairs of letters and the goal is for every pair to have the same optical space between them. In general this means that letters that have more negative space need to have tighter spacing to account for that. Negative space in a letter is often related to the size of the counters, and so type designers have a saying, "spacing matches counters".

![Bolder weights have less negative space and therefore need tighter spacing.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fspacing-02.png&w=3840&q=75)

We only really have two tools at our disposal here: sidebearings and kerning. Sidebearings, you'll remember, are spacing built into each letter, but kerning is a specific spacing we apply to pairs of letters that need extra adjustments like AV. Ideally, we want to only use kerning when sidebearings have failed us.

![Kerning is an offset applied to specific letter pairings.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fspacing-03.png&w=3840&q=75)

Because setting the sidebearings of every letter is kind of a pain, there's a method for doing this developed by Walter Tracy. The core idea is that we can more or less categorize letters into groups and use the same sidebearings for them. We start with H and O because one is extremely straight and the other is extremely rounded.

![Start by spacing for the OH pairing.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fspacing-04.png&w=3840&q=75)

We adjust their sidebearings while testing them in various combinations, like "HHHOOHHH" and "OOOHHOOO", until the rhythm of the stems looks regular and unified. Then we do the same for o and n, which are the lowercase examples of the most rounded and most squared letters.

![Start by spacing for the no pairing.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fspacing-05.png&w=3840&q=75)

Once we have the sidebearings for these two sets of letters, we can apply them to all the other letters using a formula that changes depending on the shape. Basically, we take the sidebearing value from the letter that's most similar. For a B, we take the left sidebearing from H because of the flat sides and the right sidebearing from O because of the rounded sides. Obviously this falls down with diagonal letters like A or w but those can all be spaced by hand.

![Using the left sidebearing from H and the right sidebearing from O.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fspacing-06.png&w=3840&q=75)

The way you test that this spacing is correct is by setting each letter in between every other letter and looking for obvious disruptions to the visual rhythm. There'll be tons of pairs where sidebearings are insufficient to overcome some spacing issues, like with Ti where the i needs to be nudged closer to fit under the overhang of the T. This is what kerning is for.

![Testing spacing requires looking at every possible combination of letter pairs.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fspacing-07.png&w=3840&q=75)

Kerning is really just a spacing offset that is saved into the `GPOS` table for a specific pair of letters and is fetched when the text runs are being calculated. We covered this earlier, but when the renderer goes to work out how wide a given glyph box is, it checks the `GPOS` table to see if there are any kerning offsets that it needs to apply.

Now you can imagine it is a massive pain to kern all the common pairs of letters. Luckily OpenType supports class-based kerning, where we can apply kerning to groups of letters that are similar. More specifically we can actually group letters by side. So D, E and F could go into one class, because they all share straight left edges and so can share the same kerning rules with letters that come before them.

![We can use kerning classes to make the process of kerning much easier.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fspacing-08.png&w=3840&q=75)

### [Designing letterforms](https://www.makingsoftware.com/chapters/how-to-make-a-font#designing-letterforms)

After all of that groundwork we can finally start talking about drawing our glyphs and, fair warning, this is the *draw the rest of the owl* part of this piece. We simply don't have enough time to cover what it actually takes to design every glyph and so we need to speed run it a bit.

So how does a type designer actually begin making a typeface? Not by starting at A and working through to Z. Just like with spacing, we can start with some control letters that will expose fundamental choices about stress, contrast, proportion, and personality that can be adapted to other letters. For uppercase, typically O and H/E are used.

The O is particularly important in a serif typeface. It establishes the stress (oblique or vertical), contrast (thick-thin ratio), and proportion (wide circle or narrow oval) that every other round letter must follow.

![The O defines a lot of the character of the typeface.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fletterform-01.png&w=3840&q=75)

The C is roughly an O with a slice removed. The G adds a crossbar. The Q adds a tail. The D closes the right side with a vertical stem. Get the O wrong and the entire typeface falls apart.

![The O forms the basis for other rounded letters but we often need to make adjustments.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fletterform-02.png&w=3840&q=75)

Some designers use an H for the squared letter, but an E is slightly more useful because of its terminals and the fact that it's narrower than an O or H and so establishes the proportion system. Often, the three horizontal arms of the E are deliberately different lengths: the bottom arm is the longest, the top arm is medium, and the middle arm is the shortest. As mentioned earlier, we also need to raise the middle arm above the vertical center slightly.

![The E contains a lot of optical balance adjustments that will be inherited by other letters.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fletterform-03.png&w=3840&q=75)

We use the decisions we make with H and E to apply to other square letterforms. L and F will be similar to E in size but with some slight adjustments made to account for the extra openness, whereas T will be a similar width to H.

![We need to make some optical adjustments to account for differences in openness.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fletterform-04.png&w=3840&q=75)

For uppercase, letters are organized into groups with similar structures. Round forms (O, Q, C, G, S) share curves and proportions. Square forms (E, F, H, I, L, T) share stem weights and horizontal elements. Diagonal forms (V, A, W, X) share angle relationships. And there are combination groups like the round-square (D, B, P, R) and diagonal-square (M, N, K, Z, Y).

The lowercase a, e, g, n, and o are typical starting points for the same reasons as O and E, where they force us to make decisions that will be applied to other similar letters. A common test word is "hamburgefontsiv" - it contains most of the frequently occurring lowercase letters and exposes how different shapes interact.

Again, designing the o is important for all the other rounded, bowl-shaped letters. The amount of contrast, the angle of stress, and proportions of the bowl all need to be consistent across a, c, e, p, d, b, q, and g.

![The o forms the basis of all rounded lowercase letters, applying adjustments for joins and counters.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fletterform-05.png&w=3840&q=75)

The o will have the widest bowl out of all of these. Because c and e are open, they have more negative space and we need to make them narrower to compensate. Similarly, the characters that include a bowl and a vertical stem will typically intersect the bowl at a point that creates a visible notch called a relief, rather than meeting at the vertical point of the bowl.

The n forms the basis for m, h, and u and needs to be slightly narrower than the o to account for the open counter at the bottom. Similar to p or d, the n has a notch where it meets the vertical stem, although it is typically bigger. The r is similar to the n but we have to lower the notch even more to compensate for the open side.

![The n forms the basis for m, h, u and r.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fletterform-06.png&w=3840&q=75)

Broadly, this is the process. Designing a control letter and using that to tweak other letters with related shapes, adjusting where necessary but maintaining the character of the typeface throughout. We can group the lowercase Latin letters based on their shape.

![Lowercase letters categorized by shape.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fletterform-07.png&w=3840&q=75)

The one letter that is quite hard to classify is the lowercase "a" with its double-story design and counter that is open on the left. It's tempting to steal its arch from the shoulder of the n because they should be similar widths but we typically need to make some adjustments as it doesn't taper in the same way. We also need to figure out the height of the lower story bowl, typically around 55-65% of the x-height.

![The lowercase a borrows some of the shoulder from an n and the double-story height used in e.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fletterform-08.png&w=3840&q=75)

Outside of shape, we can also categorize letterforms by their proportions which helps us maintain the visual color and rhythm across a sentence.

![Categorizing lowercase letterforms by proportions.](https://www.makingsoftware.com/_next/image?url=%2Ffonts-and-vectors%2Fhow-to-make-a-font%2Fletterform-09.png&w=3840&q=75)

╌╌╌╌

Listen, I know there's tons more to cover there and while I am tempted, I suspect the percentage of people reading this who actually want to design their own typeface rounds to 0. I think there's enough to give you a sense for just how complex it can be and why type designers are such fun at dinner parties.

Specific thanks to [Adam Twardoch](https://www.twardoch.com/), one of the managers of FontLab, for his guidance on this chapter.

## Glossary

^1^[Advance Width](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-advance-width) — The total horizontal space a glyph occupies, calculated by adding the left sidebearing, the glyph width, and the right sidebearing.

^2^[Ascender](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-ascender) — The part of a lowercase letter that extends above the x-height, as in b, d, or h, and the alignment line that sets its height.

^3^[Baseline](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-baseline) — The horizontal line that letters sit on, anchoring the alignment for the whole typeface and defining the zero value of the vertical axis.

^4^[Bézier Curve](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-bezier-curve) — A parametric curve defined by control points, used extensively in vector graphics and fonts to create smooth, scalable curves using linear interpolation.

^5^[Bowl](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-bowl) — The curved stroke that encloses the rounded part of a letter, as in O, b, or p.

^6^[Cap Height](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-cap-height) — The height of the capital letters above the baseline, usually set using a flat-topped letter like H.

^7^[Contrast (type design)](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-contrast) — The difference between the thickest and thinnest strokes in a typeface, typically between the vertical and horizontal stems.

^8^[Counter](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-counter) — The fully or partially enclosed negative space inside a letter, as in o, e, or n. Counter size heavily influences a typeface's spacing.

^9^[Descender](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-descender) — The part of a lowercase letter that extends below the baseline, as in p or q, and the alignment line that sets its depth.

^10^[Em Square](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-em-square) — The bounding box each glyph is designed within, whose coordinate system is set by the font's Units Per em (UPM) value, typically 1000. When text is set at a given size, it's the em square that is scaled.

^11^[Font](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-font) — A specific instance of a typeface, such as Garamond Bold at 12pt. In digital type, a font file is a structured database of tables containing glyph outlines, spacing metrics, and rendering data.

^12^[Glyph](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-glyph) — The visual representation of a character in a font, including its shape, spacing, and any variations for different sizes or styles.

^13^[Hinting](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-hinting) — Instructions embedded in a font that control how glyph outlines snap to the pixel grid, keeping text crisp and legible at small sizes.

^14^[Interpolation](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-interpolation) — The process of calculating intermediate values between two known values. In color, interpolation is used to create smooth gradients between colors.

^15^[Kerning](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-kerning) — A spacing adjustment applied to specific pairs of letters, like 'AV', to correct gaps or collisions that sidebearings alone can't fix.

^16^[Leading](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-leading) — The vertical spacing between lines of text, named after the strips of lead typesetters used to space rows of metal type apart.

^17^[Ligature](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-ligature) — A single glyph that replaces a sequence of characters that would otherwise collide or look awkward, such as the merged 'fi' pair.

^18^[Monolinear](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-monolinear) — A typeface whose strokes all have the same visual thickness, with little to no contrast.

^19^[Monospaced](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-monospaced) — A font in which every glyph has the same advance width, as opposed to a proportional font where widths vary per letter.

^20^[Overshoot](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-overshoot) — The small amount by which rounded or pointed letters extend past alignment lines like the baseline or cap height so they appear optically aligned with flat letters.

^21^[Rasterization](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-rasterization) — The process of converting vector graphics or 3D geometry into a raster image (a grid of pixels) that can be displayed on screen.

^22^[Serif](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-serif) — The small foot-like stroke that finishes the ends of stems in some typefaces. Typefaces with serifs are called serif typefaces; those without, sans-serif.

^23^[Sidebearing](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-sidebearing) — The built-in spacing on either side of a glyph, like a margin, that separates it from neighboring letters. Together with the glyph width, the sidebearings make up the advance width.

^24^[Stem](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-stem) — The main vertical or diagonal stroke of a letterform, such as the two vertical strokes of an H.

^25^[Stress](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-stress) — The angle or axis along which the contrast of a letterform occurs, inherited from the way a calligraphic pen varies stroke thickness.

^26^[Terminal](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-terminal) — The end of a stroke that doesn't finish in a serif, which may be embellished with teardrops, balls, flares, or other shapes.

^27^[Text Run](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-text-run) — A segment of text that shares the same font, size, color, and language, processed as an isolated unit during text shaping.

^28^[Text Shaping](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-text-shaping) — The process of converting a string of characters into positioned glyphs, including mapping code points to glyph IDs, applying substitutions like ligatures, and adjusting spacing.

^29^[Typeface](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-typeface) — A family of letterform designs sharing a common visual style across all its weights and styles, like Garamond or Helvetica. Distinct from a font, which is a specific instance of a typeface.

^30^[Unicode](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-unicode) — A universal character set that assigns a numeric code point to characters from many writing systems. Encodings such as UTF-8 define how those code points are stored as bytes.

^31^[Variable Font](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-variable-font) — A font that packs an entire design space into a single file, interpolating between master designs along axes like weight, width, or optical size to produce any in-between style at runtime.

^32^[X-Height](https://www.makingsoftware.com/chapters/how-to-make-a-font#term-x-height) — The height of the lowercase letters, typically defined by the letter x. It sets the apparent visual size of a typeface and strongly affects legibility.

╌╌ END ╌╌