Spend any amount of time designing a Windows Phone app and you'll discover that 12 is the magical number of pixels in the horizontal grid. But what about vertical spacing?

With Windows Phone, the horizontal grid is consistently laid out in 12 pixel wide columns across the screen. Everything is then a multiple of 12: 24, 36, 48, 60 and so on. Jeff Wilcox brings this specification up in his handy Metro design guide for developers.

In that same blog post, Jeff states, "In some situations it may be appropriate to use 6px or 18px numbers (often when spacing text and other elements vertically), but try 12px first, it’s consistent and clear. The magic number of Windows Phone.".

Problem is, 12px as a suggested vertical measure doesn't line up. Given the 800px height of a Windows Phone screen, if you divide 800 by 12, you end up with an unfortunate "66.6" as the number of grid rows. That's not a definitive grid at all.

After some experimentation and testing, I've since discovered that the correct vertical spacing is actually 16px. Not only does 16 divide nicely into 800, but it also cleanly splits the application bar in half (8px top and 8px bottom). Clean, precise and repeatable.

Now, aligning elements vertically on Windows Phone is not a guarantee of consistency for your app software interface; it's more of a helpful aid. Type itself is also not naturally consistent in its presentation, so you should probably use this 16px measure as a general baseline.

If you, like me, design Windows Phone apps in Adobe Fireworks, here's the template that I use, with both grids (12px x 12px and 12px x 16px) intact, that you can download. I've included each for comparison's sake.

Happy designing!