Smasher Demo

How are we calculating this?

We analyze each font added to FontBase locally using the opentype.js library. We render the text off-canvas and measure key characteristics: stroke width; difference between bold and thin strokes; the relation of "x" letter height to capital letters; width of the letters compared to height; "i" size compared to "w" size. From these calculated numbers, we then build weight, proportion, xHeight and contrast. We also analyze the font's naming table to retrieve the basic info like font name, foundry and style names. No fonts are uploaded to our servers in the process.

How do we determine similar fonts?

Based on the characteristics we retrieve, on each font page, we select the fonts that have all the same parameter numbers. For example, if a font has 0.6 weight, we select fonts from our database that are in the range of 0.5-0.7 weight. We do this with all parameters combined, resulting in a similar font selection.