| Jdlrobson | |
| Sep 22 2016, 7:04 PM |
| F4274680: pasted_file | |
| Sep 23 2016, 3:00 PM |
| F4516868: Screen Shot 2016-09-23 at 3.41.26 PM.png | |
| Sep 23 2016, 1:57 PM |
Upon visiting https://www.wikipedia.org/ I notice that all the icons for sister projects are inconsistent sizes ranging from 34px to 47px (commons)
24px by 24px has become the standard across all the other projects and it would be great to make these the same size and promote reuse.
If these were the same size, there wouldn't need to be css specific to each icon and the icons would be portable to other places such as OOjs UI and mw-ui-icon.
The project logos are different sizes because they all have slightly different shapes. The sizes have been adjusted by hand to make them appear to be similar sizes (this probably happened years ago). They are different sizes, but they are constrained to a maximum width of 50px.
I would love to simplify the CSS & make these more portable, but if we were to use the same canvas size for each logo, (let's say 48x48px ) then the circular icons would look much larger than the elongated icons. This is an example of some of the icons constrained to a 80x80px canvas:
Tiny Wikinews, huge Wikiquote. These are all 80x80px icons, yet some look much bigger than others.
I'm not saying the current sizing is great (commons logo looks big) but maybe this issue (sizing & portability) is something we can take into account when we switch these icons to SVG T129634
There are some guidelines somewhere to address this. I think @RHo may have made some? If I remember correctly the idea is for them all to have the same canvas size but within that the gutter can change.
Yes, meat of the comment below, with full discussion in T139351: Rules for Wikimedia icon additions ,
As mentioned in T139347: What icon formats are we going to continuously support?, icons should be contained within a standard bound (or canvas) of say 24x24px or 48x48px.
This will help both enable better control of anti-aliasing of icons (allowing for better pixel-fitting);and for greater consistency in sizes of various icons.
On the second point of standardizing visual perception of circular icons vs square icons, I think we should provide some 'padding' area in icons. So for example, we may create a 20px diameter circle icon centered in a 24x24px canvas, leaving 2px padding all around. For a square icon to look visually similar sized to the circle, it would be a slightly smaller 18x18px size, leaving 3px padding all around.
And then...