Open mdtauk opened 1 year ago
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 |
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
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.