IntegerStemFinder

Michael Rafailyk

Another stem interpolation (and extrapolation) calculator with the ability to adjust instances after interpolation and easily find the closest integer (or closest to integer if decimal) stem or sidebearing. The idea of editable instances is inspired by a comment of Abraham Lee. The idea of finding the closest integer stem or sidebearing is inspired by a comment of George Thomas. The progression formulas are taken from a comment of Linus Romer and from a comment of Abraham Lee.

Links

Online version:
michaelrafailyk.github.io/IntegerStemFinder

Video demonstration:
youtube.com/watch?v=yZbrtoCHoXE

Project page on GitHub:
github.com/michaelrafailyk/IntegerStemFinder

Features

• Interpolate linearly (between masters, multiple masters setup supported).
• Interpolate with a progression (extreme masters only).
• Extrapolate linearly (multiple masters setup supported).
• Switch any weight to master.
• Hide any weight from axis.
• Drag the weight by the handle/line to change its position.
• Adjust instance after interpolation.
• Find a closest integer stem or sidebearing.
• Switch between accurate and rounded stems and sidebearings.
• See a visualization of stems and sidebearings.
• Compare interpolation strategies using sets.

A complete list of features:
github.com/michaelrafailyk/IntegerStemFinder?tab=readme-ov-file#features

Colors

Black – master.
Green – instance.
Blue – adjusted instance.
Gray – hidden weight.

Defaults

Default weights and their parameters could be predefined in an array in a JavaScript file. Here you can set default axis configuration, such as: amount of weights; weight position (axis range is from 0 to 1000) and name; weight is master, instance, or hidden; stem and sidebearing values for masters.

defaults: [
	{position: 0, name: 'Hairline', hidden: true},
	{position: 100, name: 'Thin', master: true, stem: 20, sidebearing: 82},
	{position: 200, name: 'Extra Light'},
	{position: 300, name: 'Light'},
	{position: 400, name: 'Regular'},
	{position: 500, name: 'Medium'},
	{position: 600, name: 'Semi Bold'},
	{position: 700, name: 'Bold'},
	{position: 800, name: 'Extra Bold'},
	{position: 900, name: 'Black', master: true, stem: 220, sidebearing: 50}
]

Implementation

Implemented using HTML + CSS + JavaScript. I'm not very familiar with Java, but I know JavaScript a little better, and also I like an idea that it could be accessed from any device connected to internet. To run it offline, download all three files, place it in one directory, and open the index.html file in any browser. However, I recommend using the online version as it will receive updates if any errors are found.

License

MIT License. You are free to fork / copy / download / modify this tool without any permission. In the case of modifications, all the functions and actions are commented and explained inside the JavaScript file.

John Hudson

Very nice.

Is Abraham’s progression documented somewhere? I’ve never used it, and am struck by how different it is from all the others.

Michael Rafailyk

I'm not sure what the initial source of Abraham formula is, but I saw it implemented in steminterpolation by Linus Romer, and in Insert Instances by Rainer Erich.

George Thomas

Abraham's progression and its origin is explained here:

https://typedrawers.com/discussion/1991/proper-weight-instance-progression-for-a-multiple-master

John Hudson

Thanks, George. I understand the difference now: Abraham is approaching weight progression in terms of significant distinction between neighboouring weights, versus the others looking at proportional progresssion across the weight range.

AbrahamLee

John Hudson said:

Very nice.

Is Abraham’s progression documented somewhere? I’ve never used it, and am struck by how different it is from all the others.

The progression I came up with is based on two observations:
1. The instances are noticeably different on the "light" end of a linear/equal progression
2. The instances are noticeably different on the "heavy" end of an exponential progression

So, the progression I came up with starts linear and ends up exponential. One consequence of this is that the middle of the range tends to be slightly less different from its neighbor. If one reverses this blend, which is what the "Impallari" progression is, going from exponential to linear, then the the extremes are less different and the middle is more different. There's no clear winner here as each has its trade-offs.

One example I have found in the wild (and I haven't really looked much) which follows a similar progression as I proposed is the font family "Traction" published by Schriftlabor, which was released around the same time as I came up with the mathematical form of the progression, though I have no idea if there was any influence, or just coincidence.

Thomas Phinney

I have a typeface close to release, that follows closer to the Abraham Lee proportions than anything else.

But in this case, it is the result of wanting something else, but needing to anchor the regular to a “historical regular,” which is heavier than one might otherwise get, given the number of steps and the weights of the extremes. So the progression is what I would consider unusual, or less optimal, as a result.

John Hudson

needing to anchor the regular to a “historical regular”

I have been in this situation a couple of times, but approached it slightly differently: I did a Luc(as) progression across the whole weight range, and then scaled the progression on either side to relocate the calculated regular to the location of the historical regular.

Kent Lew

Question: Why is it that when I view the online tool, the line connecting the instances remains level in all views, rather than showing a curve as in your video demo? I checked in three different browsers and twiddled various parameters, but the line remains flat. (The distribution changes as expected, just not the slope of the line.) What am I missing?

John Hudson

One of the things I like most about this tool is the visualisation of the stem weights and their distances to each other, along the bottom. I have almost always used Luc(as)’s equation, but looking at this visualisation the virtues of the Schneider progression are much more obvious to me than they have been in more abstract calculation tools and graphs.

Michael Rafailyk

Kent Lew said:

Question: Why is it that when I view the online tool, the line connecting the instances remains level in all views, rather than showing a curve as in your video demo? I checked in three different browsers and twiddled various parameters, but the line remains flat.

Hi Kent. Sorry for the confusion, that's not a browser support issue, that's a functionality that temporarily disabled. Originally, that graph displayed the weight user coordinates (relative to design coordinates), something like the axis setup curve in FontLab. But the problem is the most people (who tested it) thought that the graph displayed the stem thickness curve, like other stem calculators. So it was a bit confusing what people were actually seeing, and I temporarily disabled that feature. I'm currently looking for a way to display the stem thickness curve graph (which people expecting to see). It requires a bit more advanced implementation (with SVG / Canvas graph drawing). If (or when) I do, I'll bring this (updated) functionality back. If I don't, then I'll probably update all the preview pictures and videos so as not to confuse people.