fontsketch
PT

Gallery

Fonts made with fontsketch

Four fonts built with the fontsketch engine, free to download under the MIT license. Each one shows a different way in: pen strokes, a variable weight axis, geometric shapes and SVG icons.

Quill Hand

Handwriting · 170 glyphs

Ação! Handwriting that types itself.

Every glyph

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789&?!àãçéêíóõú

Pen strokes drawn on the fontsketch stage, expanded with a soft felt pen, accents built from components.

WOFF214.8 kBTTF35.8 kBOTF62.5 kBWOFF19.1 kB

Quill Hand Variable

Variable, wght 100 to 900 · 170 glyphs

From Thin to Black

Every glyph

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

The same strokes expanded with a thin and a heavy pen: two compatible masters, one variable font file.

WOFF231.7 kBTTF74.2 kB

Compass Display

Geometric display · 45 glyphs

GEOMETRY WITH A COMPASS

Every glyph

ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789&?!

Rings, bars and arcs placed with the fontsketch API, with lowercase mapped to the capitals.

WOFF22.9 kBTTF6.8 kBOTF5.9 kBWOFF4.0 kB

Atelier Icons

Icon font · 16 glyphs

  • .at-starU+E000Star
  • .at-heartU+E001Heart
  • .at-checkU+E002Check
  • .at-closeU+E003Close
  • .at-plusU+E004Plus
  • .at-arrow-rightU+E005Arrow right
  • .at-downloadU+E006Download
  • .at-searchU+E007Search
  • .at-homeU+E008Home
  • .at-cameraU+E009Camera
  • .at-sunU+E00ASun
  • .at-moonU+E00BMoon
  • .at-pen-nibU+E00CPen nib
  • .at-brushU+E00DBrush
  • .at-letterU+E00ELetter A
  • .at-bookmarkU+E00FBookmark

Sixteen icons mapped to the Private Use Area from U+E000, with a CSS class for each one.

WOFF21.6 kBTTF3.3 kBOTF3.3 kBWOFF2.3 kB

How it was made

Compass Display is a good example of building a font from code. Each letter is a list of shapes, and the engine does the rest: it fixes contour direction, writes the TrueType and CFF outlines, adds kerning and compresses the web formats.

compass-display.mjs
  A: [620, () => [bar(70, 0, 310, 700), bar(310, 700, 550, 0), rect(170, 170, 450, 290), poly([[245, 640], [375, 640], [310, 720]])]],
  B: [560, () => [rect(60, 0, 190, 700), rect(60, 570, 330, 700), rect(60, 310, 330, 440), rect(60, 0, 330, 130), sector(330, 505, 195, 65, -90, 90), sector(330, 220, 220, 90, -90, 90)]],
  C: [650, () => [sector(370, 350, 330, 200, 45, 315, 350, 220)]],
  D: [640, () => [rect(60, 0, 190, 700), rect(60, 570, 260, 700), rect(60, 0, 260, 130), sector(260, 350, 320, 190, -90, 90, 350, 220)]],
  E: [520, () => [rect(60, 0, 190, 700), rect(60, 570, 460, 700), rect(60, 290, 400, 410), rect(60, 0, 470, 130)]],
export function buildCompass() {
  for (const [name, [adv, fn]] of Object.entries(COMPASS)) {
    core.addGlyph(font, { name, unicodes, advanceWidth: adv, contours: fn() });

Want a font of your own? Start from Quill Hand in the studio on the home page, or follow the guide on turning your handwriting into a font.