For those who have worked with icon fonts before: overshoots or no overshoots?

Diana Ovezea

Have you  ever run into the overshoot issue when having clients use fonts that also have icons? Would you include overshoots for the round icons? I can argue both ways:

1. pro overshoots: things LOOK better at larger sizes

2. con overshoots: if the client turns icons to outlines and tries to fit them in a box, the round and sharp icons (with overshoots) will be too large. 

PS. Some of the icons are UI icons, like a shopping cart, menus, geometric forms.
Thanks in advance

Alex Visi

Diana Ovezea said:

if the client turns icons to outlines

Then you never know what can happen next 

Helmut Wollmersdorfer

Over- or undershoot in relation to which line? 

The opticons I use have the height (32) of the corresponding text line (34) and are placed in a navigation element (dark red) of height 50.



Thus it makes maybe a difference, if the icon font is designed for menus or for inline text. For inline it's maybe better to align them visually with \M or \O. For menus full height, which allows them "icon only" in a quadratic frame e. g. for smartphones.

Thomas Phinney

It’s complicated. 

As we all know, overshoots are necessary to make round things, and especially sharp pointy things, look as big as square/rectangular things. As displays get to be higher resolution, this is increasingly true even at increasingly small sizes. Especially for icons which tend to have a larger minimum size than text.

If the icons need to never go below the font baseline, you could take that into account and make the largest-overshoot icon glyphs sit on the baseline—meaning square glyphs float a bit above that. But in your case, it seems the glyphs are part of a font that also supports regular text, which you’d like to work with….

Seeing as font tech is quite into letting things like descenders and overshoots go below the baseline, that is not a problem for the font, per se—it is about client use cases. Really quite a lot depends on the client’s use-case scenarios. If they need to clip at the baseline for some reason, you need to know that. Preferably you will have a substantial dialog with the client so they can understand why such clipping might be a problem, and you can understand whether it is non-negotiable and why.

If you are including icons in an otherwise normal font “for everyone,” and not beholden to a specific client, then it is tougher. Personally, I would be inclined use overshoots and size and position the icons to work well with the text elements.

That said, if you have an existing font and also want to solve the client problem, or want to have it both ways…perhaps you make an alternate font in which all the icons are shifted vertically higher by an amount that makes them “safe” for baseline clipping issues. Or add a stylistic set or something that does that vertical shift, within the base font.