Sizing icons to feel at home inline with text
My guidelines for setting the size of icons and emojis like glyphs of a typeface
Typography and iconography, together at last.
I’ve observed that it’s an acquired skill to adjust the size of icons that sit inline with text.
In games, you see this combination a lot, especially with icons that represent virtual currencies. Often, the icons are too big for the space, so I came up with a few ground rules to make sure they are properly sized and feel at home.
The basic tenet is that since they are probably placed to represent a word or concept, the string needs to read like a phrase or sentence. The icon should be sized appropriately so the sentence isn’t broken up into pieces when read out loud.
The star icon feels good here.
Enter: Gestalt principles.
They are laws of perception that describe how humans naturally group things, recognize patterns, and simplify what we’re looking at. They’re an essential part of any design tool kit, and I consider them the foundation of how to organize information to be easily and quickly understood.
There are many of them, but proximity, similarity, and continuity (along with lots of squinting with eyes unfocused) are applied here.
Things closer to each other are naturally perceived as grouped.
The Law of Proximity
group related elements closer together so they’re perceived as related
the spacing between elements of a group should be smaller and tighter than the spacing from any other elements, including the padding and margins around the walls of their container (i.e. the button boundaries itself)
Here, similarity seems to override proximity. What do you think?
The Law of Similarity
elements that have similar superficial style are perceived as belonging together (like colour, but also size)
The Law of Continuity
placing things along a continuous path leads us to perceive them as flowing together in a particular direction, like a dotted line, instead of as separate objects
like how text flows (in english, anyway) from left to right in a line
Sizing
Using some of the Gestalt principles described, it may make sense to size an inline icon to match the size of the typeface it’s nestled into. This works great as a starting point, but we need to make some tweaks so that they make sense optically instead of just mathematically.
Overshoots
I use the concept of overshoots to guide the sizing of inline icons. As described in the Google Fonts glossary: in type design, overshoots are the parts of a letterform that extend above or below the vertical dimensions of flatter glyphs. These parts include pointy bits like the bottom of a V or the top of a capital A, or rounded bits like the top and bottom of an O.
Overshoots highlighted using a serif typeface. Figure borrowed from the Google Fonts.
This is because different shapes may be the same height, but they don’t all take up the same amount of optical space. If you’ve ever tried to place a diamond and a square next to each other and have them feel matched like a pair, you’ve probably felt the need to enlarge the diamond slightly so the pointy bits shoot over the vertical extends of the square.
By overshooting the corners a little, the diamonds and squares on the right appear more equal in size.
When we apply this to something like a coin icon, you’ll see that it doesn’t quite feel right to match the size exactly to the typeface, but when we size it to have a bit of an overshoot, it feels perfect.
So, there we have it. Gestalt principles are applicable to even the tiniest spaces.