Outline Quality

🐸 Make sure your font is ready for production by fulfilling the check-list below. Design is not particularly judged here, we are talking from the point of view of the technical quality aspect of a font, i.e: OS, browsers, apps and printers will be able to read the font file and display it as the designer intended.

Note that some font editors or export tools will partly do the job for you. Always test your exported fonts in different environments, open them in a font editor, or run a Fontbakery report on them, to make sure that everything looks like what you want.

This guide will give users a short introduction to font’s outline from a technical perspective. With that knowledge, we will see how to prepare them so they appear the best on screen.
Background reading:
must→ Overall font files requirements/Glyphsets

Table of contents

Basic terminology

A glyph is a representation of a character in terms of shape and design. In digital type design, we usually draw glyphs using vector graphics; the ones called Bézier curves. The vector graphics have that advantage of preserving their shapes whatever the rendering size, because they are described by points coordinates, that can be scaled up and down without loosing any information. But remember, vectors are just numbers. What you see is the rendering of vectors graphics. On screen, they need to be translated into pixels —this is called the rasterization process— and in print, they need to be translated into points —actual dots.

A Bézier curve is a segment whose length and position is defined by of two points called on-curve points. The curvature of that segment is controlled by additional points called off-curve points (because they are off the curve), or control points (because they control the curvature). Their position is relative to an on-curve point. Hence why they are often represented as small handles linked an on-curve point. A curve-sergment has a curvature and therefore off-curve points, a line-segment is flat and therefore doesn’t need off-curve points.

The number of off-curve points will depend on the curve type. Cubic curves are controlled by two off-curve points, while quadratic curves are controlled by one off-curve point. In some cases, TT curve omit in-between smooth connections, and the segment appears to have two on-curves points and multiple connected off-curve points; but don’t get fooled, these implicit on-curve points will appear after converting to cubic curve.

A path is made of multiple connected segments. That is why the on-curve points are actually called nodes (because they tie segments together). A set of connected path is called a contour. A component is a reference to a glyph inside another glyph. A composite glyph, is a glyph made of components only. The set of contours and components that defines the shape of a glyph is called the glyph’s outline. The font’s outlines are the collection of all the outlines of one font.

A smooth connection is an instruction given to a node, to make inter-dependent (ie. aligned) the two off-curve points. The two connected segments then look like one curve, and the line created by the two handles become the tangent of this curve. That is why a node with a smooth connection is also called a curve-point. If the off-curve points are not aligned, and are not instructed to stay aligned, or if there is no off-curves point at all, then the connection of the two segment can create a corner. Hence the corner-point.

Contours have a direction which is given by the order or the index of the points. For example, for a segment defined by a point 0 (x0,y0) and a point 1 (x1,y1); if y1 < y0 and/or x1 < x0 then the direction of the path is clockwise. The contours direction is fairly important since it gives instructions to the rasteriser to render shapes as full/black (the outer-form) or empty/white (the counter-form). The rule is that the counter-form goes in the opposite direction of the outer-form.

Hinting is an added layer of instruction given to outlines for rasterisers to render a font properly on screens at small sizes; when coordinates of points (usually referred in a plan of 1000 units) have to be scaled down to a grid of few pixels. The hints will help the rasteriser to guess where in this grid the points need to be placed to preserve the legibility of the glyph and the consistency of the font design (horizontal alignments and average stems thickness).

TrueType (TT) curves are quadratic curves which direction is clockwise for the outer-form, and counter-clockwise for the counter-form. In opposition, PostScript(PS) curves are cubic curves which direction is counter-clockwise for the outer-form, and clockwise for the counter-form. TT fonts (.ttf) and PS fonts (.otf) are both OpenType fonts (OTF), but they use different compression and rendering strategies.

To reduce the file size, TT fonts use TrueType compression which makes the most of components: these are glyphs stored to be re-used in other glyphs to avoid duplication of information. PS font use the CFF compression, this is similar to component although not entire glyphs are stored but path (or contours parts). This means that an export to the OTF-CFF format(.otf) will cause the decomposition of the source’s components —as opposed to OTF-TTF format (.ttf).

To improve rendering, Windows’ rasterizer reads TrueType hinting, Apple’s built-in rasterizer ignore most hinting instructions, and Adobe uses its own which prefers PostScript hinting. In short and without further details, TT fonts target Microsoft apps and the web in general, and PostScript fonts target Adobe apps and the printing world in general.

Preparing your outlines: a pre-production process.


On-curve points (nodes)

Off-curve points (handles)



Over-complex outlines

Unless absolutely necessary, avoid over-complicated outline drawing. One example is the excessive use of outside open corners. They may come in handy in many cases, but over-stressing the algorithm responsible for removing them upon generating may lead to adverse effects.

👻 If you do end up using special outline construction, pay extra attention to how those glyphs end up rendered in the final fonts.
This outline construction of the tilde is theoretically possible and looks acceptable in Glyphs but will break the responsible generator filter.
What looks nice in Glyphs leads to this result in the generated fonts.
Attempting to remove the overlaps manually in Glyphs leads to this appearance.

Further reading:
learn Diacritics
must→ QA - Local testing