I am a determined designer seeking a job as a Visual Designer for a multi-disciplinary design team.

Font Vertical Metric Analysis

A Tool For Beginning A Font Design

The Spark

So you have kick-ass character sketches and features outlined for a new font that’s going to shake the contemporary typographic world, but where do you begin taking those sketches and turning them into proportionate letterforms that harmonize?

The first thing I like to do after arriving at a number of characters with form i’m happy with, is to establish the font metrics. For those fresh to this idea, the following metrics are measurements that make up the proportions of a font:

Font Metric Data Points

B = Baseline: the zero point of every font.
X = X-Height: + value measured from the baseline to the top of the lowercase letter x.
C = Capital: + value measured from the baseline to the top of a capital (i.e. H).
A = Ascender: + value measured from the baseline to the top of an ascending letter (i.e. b, d, k, l).
D = Descender: – value measured from the baseline to the top of an ascending letter (i.e. g, p, y).
S = Slant: + degree/angle of the italic form.

Historical Research & Data Preparation

Next, I review source material. I’m thankful to regional calligraphy guilds, Write On Calligraphers and The Society for Calligraphy & Handwriting, for providing me a library of resources and letter samples. Using books, lightboxes, and tracing paper, I meticulously recreated some of history’s most iconic letterforms and grouped them by their era or stylings.

For the analysis, I was particularly interested in analyzing the historic italic handwriting & typefaces and comparing them to the contemporary calligraphy samples of italic letterforms. I was curious to see how the font metrics have changed over time, and it was a goal to use this metric overview as a starting point for the next great italic font design.

Create a JSON Data Object for Each Font to Analyze
JSON DATA OBJ = {
	"name": "Hermann Zapf",
	"date_created": "1965",
	"form": "broad nib italic",
	"xheight": "27",
	"capheight": "39",
	"ascender": "57",
	"descender": "23",
	"slant": "12",
};

A Statistical Approach

FONT METRIC ANALYSIS OUTPUT – 11/16/19
X-Height:
  min: 300
  max: 500
  avg: 400
  freq: 375
  med: 393.75
  range: 200

Capitol Height: 
  min: 462.5
  max: 762.5
  avg: 537
  freq: 525
  med: 653.125
  range: 300
Ascender:
  min: 625
  max: 787.5
  avg: 683
  freq: 712.5
  med: 712.5
  range: 162.5

Descender:
  min: 212.5
  max: 375
  avg: 290.625
  freq: 287.5
  med: 287.5
  range: 162.5

Visual Display Output

The data from my historic italic letter research output something like what you see. I used these output ranges & ratios to create custom guide sheets that I use to sketch letters by hand for my next font design – an italic font for the future.

Ultimately, I aim to build a simple User Interface that will allow users to submit their own font metric measurements to be analyzed and output to a simple visual display.

Font Metric Data Points

Baseline: turquoise
X-Height: red
Capital: blue
Ascender: green
Descender: yellow

Joey Grable’s Portfolio / Console.Blog / Font Metric Statistical Analysis