How to Make a Font

Terminology

Typeface: The character list Font: A typeface at a given size and weight Font Family: Typeface at varying weights Weight: Bold, Regular, Thin, etc. Character: A single element of a font Glyph: The representation(s) of a given character.

Styles

Serif, Sans Serif, Slab Serif Antiqua/Old Style/Black Text Cursive: Joined handwriting typefaces Script: More formal than cursive

Variations

Condensed Italic: Redesign of Roman typeface, not merely slanted

Weights

Roman: Regular weight of a typeface

Views

Oblique/Slanted: Tilted standard typeface

Design

Body: Invisible space occupied by a character Axis/Stress: Line drawn through the middle of a character, from it’s thinnest top and bottom point (in a serif O) Baseline Ascender Descender Cap Height x-Height/Midline Kerning: Design level letter spacing, dictates how far individual letters are spaced from one another

Typesetting

Tracking/Letter Spacing: Adjustment done in web design / typesetting where the spacing is adjusted aside from default kerning Leading/Line Spacing: Spacing between lines Word Spacing: Distance between two words

Rendering

Rasterization - involves Anti-Aliasing and Hinting

CSS

Units

Absolute Units: cm in pc = pixel pt = 1/12th of a px

Relative Units: px: Magical unit that adjusts to screen size em: Relative width of the point size ex: Relative to the x-height

Variables

font-size line-height letter-spacing font-kerning (Usually specified in quality fonts)

Tips

1. Create a brief for what you want out of the font
2. Design font on paper first
3. Use control characters to help design (lowercase=n, o; uppercase=H, O)
4. Switch to PC by uploading your sketch
5. Use a font editor and create the glyphs
6. Test the font in typing mode, at different sizes and in paragraphs

Kerning

1. You have to kern each letter individually
2. Kerning is all about feeling
3. Test kerning when size changes
4. Practice Game: https://type.method.ac/
5. Letters to keep an eye on
   1. Slanted Letters: A, K, V, W, Y
   2. Letters with arms or cross-strokes: F, T, L
   3. Letter combinations: W or V + A; F or T + a lowercase vowel
6. Two straight lines need the most space: II > IO > OO
7. Try flipping the letters upside down, so you can see the spaces unbiased

Hinting

Happens automatically, but can be set manually in font editors with TrueType instructions e.g. SNAGW (Set Angle Weight), MDAP (Move Direct Absolute Point)

Design Basics

• Words must be spaced more than letters, to form distinct units.