Hello,
I need multiple version of the same glyph for 16, 24 and 32 px (pt?). It is not just “dumb” scaling, there are subtle tweaks between sizes. How would I reach similar effect to this google preview. If you drag optical size slider the icons getting bigger (and more detailed) while staying aligned to pixel grid.
Do I need to make size masters with bigger/smaller glyphs? Do the glyphs need to be resized to the same size?
What is the best glyph setup for this case?
Why?
Are you sure you want to do that? You have no control over the pixel placement on machines you do not control. It will match the pixels in maybe 5% of the cases.
Cause displays made of pixels and we love our icons crisp. It is for internal use in the company’s apps. As long as I know the pt size at which the the glyphs will be rendered as they drawn (ie pixel perfect) it will be fine. I am very interested in the masters setup for the case.
Designing different pixel sizes is tricky. If you need a lot pixel aligned you need to draw them manually. So I would make four masters for each pixel size. Draw the smallest and biggest master first. Then interpolate the middle ones anda just to the grid.
To find out how to set up the masters, you can have a look here: Creating a Pixel Font | Glyphs or in the tutorial you linked to.
Well that is not a problem, I have all of them drawn already for various sizes (as svg). My main problem is masters setup:
It will not work the way you intend it because font renderers are more tricky because they have other priorities than shape fidelity.
What I would try if my life depended on it, is make the icons as tall as the em size, or adapt the UPM value to the icon height, and place the drawings on the baseline. Take that as a starting point for further experimentation. And test test test in the target environment.