Font Workshop!

pixel-art drawing of author. headshot. by alifeee QR code linking to https://alifeee.co.uk/font-workshop/
https://alifeee.co.uk/font-workshop/
  • Why I like fonts
  • Specifics about fonts
  • Specifics about FontForge

Why I like fonts

Book cover of "Why Fonts Matter" Book cover of "Script Fonts"

They have feelings

A history of typefaces

A history of typefaces

A history of typefaces

A history of typefaces

A history of typefaces

How many fonts do you encounter in a day?

How about in a minute?

Why I like fonts

They are personal

This brings me joy

Fonts by Tom7

Screenshot of Tom7's font website
http://fonts.tom7.com/

Fonts by CloFont

Screenshot of Clofont's font website
http://clofont.free.fr/

Why I like fonts

I can use them!

  • Websites
  • Documents
  • Custom Font Defaults (Notepad, Browser)
  • Printing & laser-cutting
  • Digital greetings cards

Computers are still customisable!

How to design a font

It's easy to get lost in design

Font design can be a Trap, but I find it a rather pleasant one.

from https://fontforge.org/docs/

https://fontforge.org/docs/

Practical definitions

  • Characters & glyphs
  • Splines, lines, & paths
  • Points & the em-unit

http://designwithfontforge.com/

Design based definitions

  • construction
  • x- to cap-height proportion
  • ascender height & descender depth
  • width, width regularity, & variability
  • weight & slant
  • contrast & angle of contrast, weight distribution
  • stems, joins, & bowls
  • terminals, speed, & regularity
  • flourish, serif, & decoration

https://fontforge.org/docs/tutorial.html

Practical guides for specific situations

How to use FontForge

Context

Picture of writing on wall that says "Kiran: Builder" and a phone number Black and white picture of writing on wall that says "Kiran: Builder" and a phone number letter A, white on black letter A, black on white

FontForge Windows

  • Overview ("Bitmap Window")
  • Drawing ("Outline Window")
  • Preview ("Metrics Window")

FontForge Windows: Bitmap

"The Overview"

FontForge bitmap window, showing lots of letters, some filled in.

FontForge Windows: Metrics

"The Preview"

FontForge Metrics window, showing a preview of the font.

spacing, kerning

FontForge Windows: Outline

"The Drawing"

FontForge outline window, showing a half-drawn letter A, and Bezier points.

baseline, cap height, x-height, ascender height, descender depth

FontForge outline window, showing a half-drawn letter A, and Bezier points. annotated view of the FontForge outline window from their docs
https://fontforge.org/docs/ui/mainviews/charview.html

How to make letter forms

  • Digitally drawing them
  • Modifying them
  • Tracing them

Tracing

"rough and ready"

FontForge outline window, showing an outline of a letter A. FontForge outline window, showing a letter A, with lots of Bezier points. FontForge outline window, showing a letter A, with fewer Bezier points than the previous image.

Let's make a font!

  • Sketch some letter forms!
  • Try starting with "o" and "n"!
  • Draw some more letters, like "adhesion" or "videospan"!
  • Digitize them!
  1. Do you want to digitally draw letters, or trace them?
  2. What sort of "vibe" might you be going for?
  3. Do you want to have upper- and lowercase letters? Numbers? Symbols? It's ok just to have a subset.
QR code linking to https://alifeee.co.uk/font-workshop/
https://alifeee.co.uk/font-workshop/

Let's make a font!