Skip to the fonts
Portfolio
David Hatleydesign · AI/ML · generative tools

No. 13 / 16 · DisplaySpecimen · 2026-10-27

Cap 700X 500Base 0Desc −256Outline

A heavy, bouncy display face that never sets the same letter twice in a row.

Glyphs 108Styles 1Kerning calt, 3 cutsUPM 1000Cap 700x 500WOFF2 38.6 KBTTF 132.6 KBSizes anyChecksum 0DB6
00Type tester

Try it

Wrongo bongo hopscotch

72 px · alternates on · click the text to edit it

01Construction

How it is built

Every letter and figure has three cuts, each turned, nudged and scaled a little differently from a seed. A contextual-alternates feature (calt) cycles through them, so 'oooo' sets three different o's before it repeats.

Underneath it is Hoop at 150 units with slightly squared bowls, so the bounce sits on a steady skeleton.

A vector face: it works at any size. The tester and the waterfall use the house steps.

PLATE 13.1 · CONSTRUCTION · HOPSCOTCH o270 ON-CURVE · 90 OFF-CURVE · QUADRATIC
Baseline 0x-height 500Cap height 700Descender −2561234
  1. NodeAn on-curve point at (92, 36). 270 in this glyph.
  2. HandleAn off-curve point at (57, 386). Quadratic curves: one handle per curve. 90 here.
  3. Advance565 units wide: 19 of space on the left, 19 on the right.
  4. One of three cutsThis o is the base cut; calt swaps in .alt1 and .alt2 so a run never repeats.
Plate 13.1. Hopscotch o, drawn from the built font file: every square is a node and every ring a handle the outline really has.
02Spacing

How it fits

PLATE 13.2 · SPACING · HOPSCOTCHTHREE CUTS · 62 GLYPHS
w · w.alt1 · w.alt2
r · r.alt1 · r.alt2
o · o.alt1 · o.alt2
n · n.alt1 · n.alt2
g · g.alt1 · g.alt2
b · b.alt1 · b.alt2

123 The sample, set by the font’s own calt rules (2 chain rules, 13 swaps in 22 letters)

  1. Cut 1 · baseThe glyph the cmap names. It follows a space or an .alt2.
  2. Cut 2 · .alt1calt swaps it in after a base cut. Drawn in cobalt.
  3. Cut 3 · .alt2calt swaps it in after an .alt1, then the cycle starts again.
Plate 13.2. Hopscotch sets three cuts of every letter and figure in turn. The sample above is shaped with the font’s own GSUB rules.
03Waterfall

Every size it is drawn for

120 pxWrongo bongo hopscotch
72 pxWrongo bongo hopscotch
48 pxWrongo bongo hopscotch
32 pxSphinx of black quartz, judge my vow.
25 pxSphinx of black quartz, judge my vow.
20 pxSphinx of black quartz, judge my vow.
16 pxSphinx of black quartz, judge my vow.
04Character set

All 108 characters

Char
o
Code point
U+006F
Glyph
o
Advance
565
LSB · RSB
19 · 19
Contours · points
2 · 360

Uppercase · 26

Lowercase · 26

Figures · 10

Punctuation and symbols · 46

05In use

Good at

Sticker72 px

Hello hello!

Sign48 px

Fresh sprouts daily

06Download

Get Hopscotch

TTF for desktops, WOFF2 for the web, or the zip with both, the licence and a readme. Free for anything, commercial included, under the SIL Open Font License 1.1.

CSS · put the .woff2 next to your stylesheet
@font-face {
  font-family: "Hopscotch";
  src: url("Hopscotch-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

h1 { font-family: "Hopscotch", sans-serif; }