I'm trying to add icons to a website, and getting the text size and icon size to correctly lineup is a bit of an issue.
So I've looked into the Windows Style Guide as well as icon sets available to download and noticed that they mostly seem to follow a sizing structure of 16x16, 24x24, 32x32, 48x48, 64x64 and so on.
Firstly I want to ask why have the above sizes been chosen and why are they multiples of 8? For example, why not have 15x15, 25x25 etc.
Is there a best-practice guide anywhere to using icons and icon text correctly?
Back in the early days of Windows, video cards were monochrome or, if
you were lucky, 16-color. These were all planar video modes, the
mechanics of which were discussed earlier. Now imagine copying a
bitmap to the screen where both the bitmap and the screen are planar.
If the starting coordinates of the destination was an exact multiple
of eight, then the bitmap could be copied via block transfer
instructions. On the other hand, if the destination was not a perfect
multiple of eight, you had to do a lot of fancy bit shifting to get it
onto the screen.
This is the source of the CS_BYTEALIGNCLIENT window class style. With
this style set, the window manager will try to position the window so
that the x-coordinate of the client rectangle's upper left corner sits
at a perfect byte boundary of video memory. If you were running at a
1bpp video mode (monochrome or 16 color), this meant that the
x-coordinate was a multiple of eight. By positioning the window this
way, a bitmap copied to the upper left corner of the client rectangle
would be copied via fast block transfer instructions.
If you look at dialog box dimensions from Windows 95 or earlier,
you'll find that they are nearly always a multiple of 32 DLUs in
width. Since four horizontal DLUs equal one average character width,
you had to keep your dialog width a multiple of 32 to ensure that the
final dialog size was a multiple of eight.
Keeping bitmap widths such that they represented exact byte boundaries
was important for performance on the machines of the day. Copying
blocks of pixels around was typically performed in three major steps:
A thin vertical strip from the left edge of the bitmap to the first
byte boundary, then the bulk of the bitmap up to the last byte
boundary, and finally a thin vertical strip from the last byte
boundary to the right edge. If you kept your eyes open, you could
actually see these three stages of drawing occurring. (Like I said,
machines of the day weren't all that fast.) Keeping things byte
aligned and at byte width meant that the two thin vertical strips had
zero width and therefore could be optimized out.
Apple also specifies that you should create 16x16, 32x32 and 128x128 versions of your icons. Like Windows, the OS will accomodate other sizes, but you won't get the best results.
Source: http://blogs.msdn.com/b/oldnewthing/archive/2005/08/23/455089.aspx
