Introduction to italics, part two

 » Read part one of this post.

This post will be about setting up your italic workspace, as well as an outline of what lies ahead.

How does an italic font relate to the regular style?

An italic font almost always shares the same vertical metrics as its roman counterpart. That means that they have the same x-height, capital height, etc. Otherwise, the italic font might rightly be regarded as a completely separate typeface from the roman. Horizontal metrics and actual letterforms, at least for the lowercase alphabet, deviate significantly, as discussed. In fact, an italic font is meant to provide contrast with the roman style.

How do italic fonts work?

Technology wise, italic fonts aren’t really that different from roman fonts. Italics are drawn just like any roman font, in rectangular em boxes. Italic–roman pairing in apps does require a font to be flagged as ‘Italic’, though we’ll worry about that when we get to font packaging. One very helpful thing to do is to specify the italic slant in the Font Info dialog (accessible in fontforge from Element → Font Info) This will cause fontforge to draw the italic slants as guidelines in the glyph panel, which can be immensely helpful when you’re drawing your italics. Supposedly it also lets you constrain your vertical motion to the italic slant when drawing, though this functionality appears to be broken in fontforge at the moment. The slant value is also used by word processors to slant the cursor when italics are being used.

Strategies for setting letter spacing: part two

In the last post, we resolved the sidebearings of three letters—‘n’, ‘o’, and ‘v’, each representative of a class of letter shapes. These sidebearings can now be assigned to related characters with congruent sides. The sidebearings of the ‘n’ also work for the ‘m’ and the ‘i’ (but not necessarily letters like ‘l’ which has a taller stem and no head serif on the mean line). Since the left side of the ‘n’ is the same as the left side of the ‘r’, the left sidebearing of the ‘r’ can be taken from the corresponding sidebearing on the ‘n’. The same goes for the right side of the ‘h’, which matches the right side of the ‘n’. In Floribunda the right side of the ‘a’ also matches the ‘n’, but this is not always true.

The sidebearings on the ‘o’ can inform the ‘e’ and ‘c’ (the right sidebearings might need tweaking) and the bowls of the ‘b’, ‘p’, ‘q’, and ‘d’. The ‘v’s sidebearings set the sidebearings of the ‘w’ and the ‘y’.

Strategies for setting letter spacing: part one

At this point, all twenty-six lowercase letters have been drawn and packaged into a font file, but they lack any horizontal metrics, so they all print in their own em squares if you try to type with it.

Text credit: Wikipedia: Sun

We have to set the sidebearings (basically the width) of each letter to get the text to print more like this (again, capital letters and punctuation have been stripped since Floribunda doesn’t contain them yet) :

How to deal with font extremas

I don’t know about you, but this is definitely my least favorite font error. If your glyph outlines aren’t constructed in just the right way, fontforge will complain about missing “extremas”. But what are extremas anyway?

An extrema is a special kind of point that helps define the edges of a glyph. The word is Latin—technically a single extrema is called an extremum, with extrema being the plural. But the term has become so common among type designers, that extrema and extremas have become the terms used to describe these points in a glyph outline.

An extrema is just a curve’s minimum or maximum in the xy coordinate plane. This is just like finding the maximum of a parabola or some other curve, except applied to bézier curves.

Each bézier segment of a glyph’s outline (read: each segment between two points, not the entire glyph outline) must be a one-to-one function*—i.e. it has to pass both the horizontal and vertical line tests. A bézier segment in a font shouldn’t change direction in either the x or the y direction—otherwise it should be split into two one-to-one segments. A handy (but not foolproof) way of checking this is looking to see if the curve fits into the rectangle determined by its endpoints (though an ‘s’ shaped curve can pass this test and still not be one-to-one).

The curve on the left is acceptable—it doesn’t change direction in the x or y axis. The curve in the middle folds back on itself, so it needs to be split in two (right).

Why is this a thing? Well apparently it helps with hinting, by letting the renderer know the bounding boxes of the glyph outline. It also makes it easier to measure stems and set sidebearings, since you can measure distances between points instead of vague spots along a curve. But the truth is, most renderers get along fine without any extremas. No vector illustration program requires extremas on its paths. Extremas are just extra points on the ends that help protect glyph outlines, since fonts undergo much more heavy-duty scaling and rasterizing than most other forms of vector art. Think of them as protective bumpers on your letters that keep your font from getting distorted by dumb renderers.

Keeping your letters in line

It's very important in type design to make sure all your letters are the same height. Otherwise, subtle irregularities might accumulate, and you might not notice if a letter is getting taller or shorter than it should be. This is why you should set up fontforge guidelines early in your design process.

The most important guideline to set is the meanline. This is the height that most of the lowercase letters should reach to. The meanline should align with the top edge of the lowercase ‘v’ or any other flat-topped lowercase letter. You set the meanline in fontforge by dragging down from the ruler at the top of the glyph window. Make sure you round the guideline to an integer!

You should also set the over and undershoot guidelines—use a round letter like ‘o’ or ‘e’ to determine where it should go.

The round parts of every curved letter—that includes the ‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘g’, ‘h’, ‘m’, ‘n’, ‘o’, ‘p’, ‘q’, ‘r’, ‘s’, ‘t’, and ‘u’—should touch these lines. So should any pointy letters like ‘v’ and ‘w’, which should have an undershoot, and any letter with a head serif including ‘i’ and ‘j’, which should have an overshoot. In theory, pointier shapes should under/overshoot more than curved shapes, but the bevel on the vertex of the ‘v’ makes this necessary. However, I do have my sharp head serifs extend three font units beyond the curve overshoot.

You should also put guidelines into place for the ascenders and the descenders, and any other useful heights.

From typeface to font—part two: Font metrics and importing into fontforge

 Part one »

Since I drew the glyphs in a vector program, Inkscape, the letters are technically already digitized. If I had drawn them out on paper I would have to scan and then trace the glyphs. But before we can copy and paste glyphs into a font, we must first understand exactly how a font deals with all those little em rectangles.

Fonts subdivide ems into an arbitrary number of font units which they use as their internal coordinate system. For a truetype font (one that ends in .ttf), each em is typically broken down into 1024 or 2048 font units. In the newer opentype format (.otf), each em usually contains 1000 font units, though this isn’t a requirement.

The origin of a font’s coordinate system is usually displaced some distance upwards, giving rise to negative coordinates. The x-axis is used as the baseline of the typeface. Typically, the displacement is between one quarter and one fifth of an em unit, so a font’s em rectangle might extend all the way up to 780 font units, and all the way down to –220 font units, giving a total height of one thousand font units. Letter parts can be found outside of this range—the descender of a ‘p’ might reach a coordinate of –235 font units, but if the text is set with no leading, the descender will intrude into the next line's em rectangles.

Vertical metrics of Proforma. Proforma has an ascent of 0.8 ems and a descent of 0.2 ems.

The app we’re going to use to put the glyphs into a font is called FontForge. It’s free and open source and at the time of writing, still being actively developed (after a period of dormancy). I won’t go over how to install it as there are plenty of guides on how to do so. I recommend building fontforge from its source code. It's easier than it sounds and the build guide holds your hand every step of the way. Plus the precompiled fontforge packages tend to be very old and buggy, so building from source is a good way of ensuring freshness.