improving rendering of icon font on low resolution screens

Nina Botthof

I was asked to create an icon font to be used on industrial machines with a touch screen display, as well as in normal computer applications. The machine displays have different resolutions, but most of them are low resolution black/white LCD screens that do not have sub pixel rendering. As you can imagine, the icons are not rendered nicely – uneven stroke thickness and distorted shapes.

They don’t have a design system that dictates font sizes, so the icons will potentially be used at any size.

Is there any feasible way to improve the rendering of the icons?

Jasper de Waard

You could try to use a heavy amount of TrueType hinting (https://glyphsapp.com/learn/hinting-manual-truetype-hinting), but it sounds to me like they might actually need bitmap fonts (one for every size they need) for the LCD screens. Depending on the backend of the screens, they might not even be able to read TryeType hints. Either way it's likely going to take a lot of work to make your icons render well. Good luck!

John Butler

I seem to recall Verdana was itself designed “backwards” starting from bitmaps, then drawing the curves “around” the bitmaps so they would grid-fit more exactly when rendered. I’d be surprised if such a process were not also originally used for Webdings.

If they need actual outline fonts, I would start with the exact pixel sizes of the crappiest B&W screens they use. Draw the icons in pixel form in the smallest text size they want in that screen, then draw the curves around the pixel icons and unitize the widths to multiples of pixel widths.

Scaling to larger sizes from a smaller master size target probably yields less hinting demand than the other way round.

Petr van Blokland’s VijfZeven text font was also in this vein.

Paul van der Laan

Hi Nina!

John’s advice makes sense. But it’s still important to remember that the amount of TrueType hinting in Verdana is unsurpassed. Verdana (and Georgia) must have cost a fortune in terms of engineering.

You need to ask whether these machines can handle hinted TrueType fonts. In that case I recommend to have these fonts hinted in a dedicated hinting application such as Microsoft VTT. Otherwise – as Jasper pointed out – the best solution would be bitmap fonts.

We have some experience in this field. Drop me an email if you need more help or advice.

Nina Botthof

Thank you all for your ideas!

Jasper de Waard said:

You could try to use a heavy amount of TrueType hinting (https://glyphsapp.com/learn/hinting-manual-truetype-hinting), but it sounds to me like they might actually need bitmap fonts (one for every size they need) for the LCD screens.

Yes, I thought about TrueType hinting too, but was put off, when I read that it is not recommended for icon fonts.
Looks like I misinterpreted this  –  they state that unhinted fonts use more antialiasing which is better to preserve shapes. Since there is no antialiasing with these screens, it could be valid to use hinting. Though probably very timeconsuming.

Jasper de Waard said:

Depending on the backend of the screens, they might not even be able to read TryeType hints. Either way it's likely going to take a lot of work to make your icons render well. Good luck!

Hm … I’ll probably have to find this out with some test files first. Thanks for pointing this out!

John Butler said:

If they need actual outline fonts, I would start with the exact pixel sizes of the crappiest B&W screens they use. Draw the icons in pixel form in the smallest text size they want in that screen, then draw the curves around the pixel icons and unitize the widths to multiples of pixel widths.

Scaling to larger sizes from a smaller master size target probably yields less hinting demand than the other way round.

That’s an interesting Approach! It does sound logical to reduce the amount of hinting needed.

Paul van der Laan said:

You need to ask whether these machines can handle hinted TrueType fonts. In that case I recommend to have these fonts hinted in a dedicated hinting application such as Microsoft VTT. Otherwise – as Jasper pointed out – the best solution would be bitmap fonts.

Well … The introduction text for VTT is anything but encouraging. 🙈
https://learn.microsoft.com/en-us/typography/tools/vtt/#is-visual-truetype-the-right-tool-for-you

Paul van der Laan said:

We have some experience in this field. Drop me an email if you need more help or advice.

Thank you, that is very kind! ☺️

Mike Duggan

If it comes to using VTT, I can give some advice also