An icon is kind of “visual shorthand”: a way to leverage peripheral vision and pre-attentive processing so a user can understand a control's purpose in milliseconds.
The user won't learn a UI from icons alone, but once learned, distinct icons speed up recall massively. The problem with the modern trend of hyper-homogenised, uniform icons is that they destroy this advantage. When every icon has the exact same stroke weight, color, and geometric bounding box, they blur into a useless mush.
I go out of my way to avoid icons everywhere possible and mostly have lived icon free since sometime around the turn of the century. I despise icons, but these old Mac icons do tug some strings, I don't hate them and may even like them, I absolutely have some serious nostalgia for the days when they were a part of my life.
obligatory susan kare mention - her icons were amazing.
I started making my own small, monochrome icons for a personal project (https://anachronomicon.coldewey.cc/), trying to make them reasonably small while also intelligible, and it's hard once you go below 24 pixels or so! I haven't stuck to any standard size either, but I might later. 32 seems luxurious to me now.
To me the pinnacle of icons was always the MagicWB [0] / MUI [1] style, even though I never really had MagicWB on my systems. Maybe strange choice of colors (pale blue, pink, orange?), but nice dithering and color interplay to create neat 3D illusion built nicely upon the OS 2.0 look.
You are using font size wrong. I see 13 lines of text per page and most lines has single word on it.
The solution is simple. If you don't know correct font size of every visitor, don't change the font size. Each visitor will have font set according to their preference. I will have set it to medium, my grandma to xx-large, teenager with perfect vision to small, designer with 8k monitors to 150px helvetica.
If you want to retain some control over the font size, use small, medium, large. (e.g. information dense site could use small, average website like yours could use medium, and information sparse websites like wedding announcement could use large).
7 comments
[ 3.0 ms ] story [ 28.2 ms ] threadThe user won't learn a UI from icons alone, but once learned, distinct icons speed up recall massively. The problem with the modern trend of hyper-homogenised, uniform icons is that they destroy this advantage. When every icon has the exact same stroke weight, color, and geometric bounding box, they blur into a useless mush.
I started making my own small, monochrome icons for a personal project (https://anachronomicon.coldewey.cc/), trying to make them reasonably small while also intelligible, and it's hard once you go below 24 pixels or so! I haven't stuck to any standard size either, but I might later. 32 seems luxurious to me now.
[0] https://en.wikipedia.org/wiki/MagicWB
[1] http://www.sasg.com/mui/preview.gif
The solution is simple. If you don't know correct font size of every visitor, don't change the font size. Each visitor will have font set according to their preference. I will have set it to medium, my grandma to xx-large, teenager with perfect vision to small, designer with 8k monitors to 150px helvetica.
If you want to retain some control over the font size, use small, medium, large. (e.g. information dense site could use small, average website like yours could use medium, and information sparse websites like wedding announcement could use large).
body { font-family: Georgia, Serif; font-size: 100%; background: #898; margin-top: .5em; margin-bottom: .5em; }
Font size is 100%, so it will respect your font sizing. You might be doing something weird on your end.