1

It seems to me that if your stroke width is odd (e.g. 1), wouldn't it make more sense to have an odd number of pixels so you could perfectly center lines and be aligned to pixels?

However, I've never seen anybody ever recommend using an odd-numbered grid.


Here's an example. If I know I want this icon to always be this size (when that's within my control) and I need it to align to the pixel grid, why is 17x17 not better than 18x18? enter image description here

6
  • Generally, it's because they are easier to divide if you need to output different sized icons, for example 256/2=128, 128/2=64, 64/2=32, 32/2=16.
    – Billy Kerr
    Mar 27, 2023 at 10:25
  • On the other hand, if you use an uneven number, you can't have an icon which is split perfectly in 2 halves or 4 quarters and you can't center a 2 px stroke. So there's pros and cons no matter what you choose. If you are making your own app or game and can make the math add up with icons with uneven dimensions you are free to do that. It's not like there's a law against it.
    – Wolff
    Mar 27, 2023 at 15:18
  • @BillyKerr well if you design the smallest possible icon first then it is not a problem.
    – joojaa
    Mar 27, 2023 at 15:43
  • @Wolff, My assumption with the question is for a 1px stroke. I know there's no law against it but it is unnerving that I cannot find your sentiment on any icon guide even after looking for it. I'm just trying to make sure I'm not missing something. Mar 27, 2023 at 16:08
  • 1
    @Wolff, sorry if I sounded defensive :) - that was also not my intention. I didn't read your comment as condescending at all. Just wanted to clarify. Mar 27, 2023 at 16:28

2 Answers 2

1

This is only true if you think that the stroke is the basic primitive. If you mainly work with filled shapes then you want to end up on the even gridpoints.

Let us give names to these two ways of working. If you think that the line is the base primitive then your primarily designing items that are stroked. Lets call this stroke priority. If you think that eventually everything is a outlined thing then your designing with outline (shape) priority. and if you belive that the stroke is just accidental and the center spine of the stroke is the true data then your designing with line priority (Engineering applications typically work this way).

Theres nothing wrong with these worldviews. It is not the whole truth. In this case it is typical for people in the graphic design industry to follow outline priority as ther base mode of operation. So it is natural that the tool is geared for this work (in fact for a long time illustrator denied other way of looking at things in its toolset).

When you draw the outlines you want to hit the grid. And the canonical solution for shape priority thinkers is to use a stroke that is on the side of your line (So illustrator has an option for line inside or outside but that only works for closed lines. sigh Just No).

When you draw with stroke priority your situation is as you describe when you have a odd sized stroke. Except if you have a stroke type that just ends at the vertex. In which case you need to hit both center and grid. Offcourse for a even stroke you want to hit the grid.

And again line priority people dont care if they do the want to be on the grid.

Second thing is if you design largest icon first its easier to divide even numbers. But seems to me that for same reason people have different drawing priorities they can also thinkbit the other way around. If you start with smallest icon you dont end with this problem. But it is impossible to center your design at smallest scale.

So depends what you do and how you think about the world.

1
  • Okay just to summarize: most icon guides on the internet seem to share this outline-priority bias and don't tend to delve into the nuances. If the icon set one is dealing with has a stroke priority, and that stroke has an odd-numbered width, it makes sense to have an odd-numbered grid. Thanks for confirming, I felt crazy reading these guides. Mar 27, 2023 at 16:17
0

Usually, 8 point grid is used in the design. This approach allows you to keep the consistency of layouts, and accessibility and allows you to create a hierarchy in layouts.

There is also a 4-point grid, which is a modification of even grids.

Besides, you can also use an odd grid. For example, there are 5 and 7-point grids. Which option selected depends on your needs and ideas.

1
  • 1
    Hi. I don't think this is what is being asked here. The question is about designing icons to fit a pixel grid, for making pixel perfect icons.
    – Billy Kerr
    Mar 27, 2023 at 10:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.