Harshpreet Hand

Type tester

Write something

Click the sheet and type. Letters change between variants as you go, like real handwriting.

Your text stays in this browser only.

From the notebook

The same sentence, twice

Top: a photo of page 5 of the notes. Below: the same words typed in the font.

A conceptual model that describes how data is communicated over a network. It is a 7 layer model. First introduced in 1970s. Made by ISO.

Quirks worth keeping

What makes it my handwriting

These habits turned up again and again across the pages, so the font keeps them.

• i

  Ring dots

  i and j get a small open circle, never a dot.

• l

  Looped l

  The l is always a loop, never a straight stick.

• d

  Curled d

  The d's stem curls back at the top, almost like ∂.

• r

  The looped r

  A small curl at the foot. For a plainer r, turn on ss01.

• t

  Half-crossed t

  The crossbar only goes to the right of the stem.

• &

  Crossed-leg &

  A loop on top with the legs crossing below.

• 2

  Curled 2

  The bottom of the 2 starts with a small curl.

• →

  Margin arrow

  The hook-headed arrow from my margins. Type → (U+2192).

Contextual alternates · calt

Three of every letter

Each letter was picked three times from different pages. The font rotates through them, so double letters like “ll” and “ee” never look stamped.

Character set

Every character

How it was made

From notebook photos to a font

1. Separate the ink. On each page photo the blue pen was isolated from the paper, the ruled lines, the red margin and the text showing through from the back.
2. Find the letters. Each page was split into words and letters, and 704 words were transcribed by hand. That gave 2,479 labelled letters.
3. Pick the typical ones. For each letter, the samples were scored by how close they are to that letter's usual shape and how sharp the photo was. The best three became the variants.
4. Redraw with one pen. Each letter was reduced to the path of the pen, smoothed, and redrawn with a round nib. Regular uses a 57-unit nib and Bold an 88-unit nib.
5. Fill the gaps. Letters that are rare in the notes (G, J, X, some punctuation and accents) were built from parts of the hand: the C, the ring dot, the comma, the x.
6. Build the font. The letters were traced to curves, spaced and kerned from their outlines, and given OpenType features that rotate the variants.

Use it

Add it as a theme

Put the font files next to harshpreet-hand.css, import that CSS, then set data-theme="handwritten" on the page.

@font-face {
  font-family: "Harshpreet Hand";
  src: url("/fonts/HarshpreetHand-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Harshpreet Hand";
  src: url("/fonts/HarshpreetHand-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

[data-theme="handwritten"] {
  font-family: "Harshpreet Hand", "Segoe Print", cursive;
  font-size: 1.15em;      /* x-height is 0.44em, so size up a little */
  line-height: 1.6;       /* room for the long g / y loops */
  color: #1f2f8c;         /* ballpoint blue */
  background: #f7f8fc;
  font-feature-settings: "calt" 1, "kern" 1;
}

dist/ · HarshpreetHand-Regular.woff2 · HarshpreetHand-Bold.woff2 · .woff · .ttf · harshpreet-hand.css