Question: Why an em and character size of 500 for icon fonts?

[mdtauk]

I was taking a look at the various Icon font versions of these FluentUI System Icons.

I was wondering why the value of 500 was chosen, when it is not divisible by the various icon sizes other than the 20px and 40px ones. Doesn't this lead to a lack of precision, with TrueType Fonts unable to use fractional node placements?

Maybe I am mistaken with understanding the process. A cursory glance at the code sees the 500 value being explicit, as well as a "normalize" flag/option.

[mdtauk]

Here are the "stroke thickness" values with 500em 500 / iconSize = size of each pixel	IconSize	1px equivalent	Regular stroke thickness	Filled stroke thickness
12	41.667	1 = 41.667	1.5 = 77.501
16	31.25	1 = 31.25	1.5 = 46.875
20	25	1 = 25	1.5 = 37.5
24	20.833	1.5 = 31.250	2 = 41.666
28	17.857	1.5 = 26.786	2 = 35.714
32	15.625	2 = 31.250	2.5 = 39.063
48	10.417	2.5 = 26.043	3 = 31.251

---

OpenType and TrueType fonts would typically use an em value between 1000/1024 or 2048

---

A value of 600em would appear to fall more comfortably on a grid, within the font's em design space.

IconSize	1px equivalent	Regular stroke thickness	Filled stroke thickness
12	50	1 = 50	1.5 = 75
16	31.25	1 = 37.5	1.5 = 56.25
20	30	1 = 30	1.5 = 45
24	25	1.5 = 37.5	2 = 50
28	21.429	1.5 = 32.144	2 = 42.858
32	18.75	2 = 37.5	2.5 = 46.875
48	12.5	2.5 = 31.25	3 = 37.5

---

A value of 1680em would increase precision in the conversion.

IconSize	1px equivalent	Regular stroke thickness	Filled stroke thickness
12	140	1 = 140	1.5 = 210
16	105	1 = 105	1.5 = 157.5
20	84	1 = 84	1.5 = 126
24	70	1.5 = 105	2 = 140
28	60	1.5 = 90	2 = 120
32	52.5	2 = 105	2.5 = 131.25
48	35	2.5 = 87.5	3 = 105

[mdtauk]

Image Examples - Font glyph images have the grid set to match 1px equivalent values

size=12 Glyph

figma icon size 12

---

size=48 Glyph

figma icon size 48