the fonts…
About the family #
| The four faces in numbers, read from the font files |
|---|
Try it #
As CSS
With letter spacing other than zero, Chrome leaves out the joins whatever the toggles say. It also leaves out the contextual rotation unless font-feature-settings names calt, as this box does (it names every feature).
The features #
Every feature the fonts carry, read from their GSUB and GPOS tables. Each example is live: the same text with the feature off, then on.
How it was made #
Strokes to outlines
Nothing here was drawn as an outline. Every letter in the engine is a set of pen strokes: a skeleton path, the angle of the nib, how hard it presses. The exporter (crates/letter/examples/fontgen.rs) asks the engine for each form as the nib swept along its strokes, in one particular writing, with the hand's small differences of slant, proportion and placing. It takes the union of those pieces (i_overlay) and fits the outline with smooth curves: cubic least squares, kept to within about half a font unit of the ink and split at the true corners, then converted to the quadratic curves of TrueType (kurbo).
Where a letter has fewer than three shapes, the exporter writes its canonical form again with a different seed. These further writings (a.w1, a.w2) are the same letter with the hand's small irregularities, and they give the contextual rotation enough shapes to choose from.
Spacing and kerning
Spacing comes from the engine's optical spacing: for every ordered pair of forms it reports how far apart it would set them. That is split into a right side for the first and a left side for the second (a median polish over the lower case; capitals are judged after capitals, figures after figures), which become the advance widths and side bearings. What is left over is the kerning, grouped into classes.
Tables and features
The features are generated as an Adobe feature file and compiled with fea-rs; the other tables are built with write-fonts. Everything is read from the engine, so new forms and joins appear in the fonts when they are regenerated, and the output is deterministic.
The marks are glyphs of their own, traced the same way, and their anchors are where the engine puts a mark over a letter. An accented character points at a composite glyph for programs that do not shape text; a shaper takes it apart into the letter and its mark, so the letter keeps all its forms.
This page reads the finished font files back (crates/letter/examples/fontdata.rs, with ttf-parser) and checks each form it shows by shaping it with rustybuzz, the Rust port of the shaper Chrome and Firefox use.
What the fonts cannot do that the live engine does
The files #
To install on a Mac, double-click a .ttf and press Install in Font Book, or copy it into ~/Library/Fonts.