ux.artu.tv » Blog Archive » 24 Weeks of Windows Phone Metro Design | #16 Typography

24 Weeks of Windows Phone Metro Design | #16 Typography

 24 Weeks of Windows Phone Design Index

Twitter   

Typography is one of the Metro Design Principles. The principle is formally “Celebrate Typography” but I always remove the word Celebrate thinking it’s a nice adorner but nothing more :) Typography can stand on its own. We’ve mentioned before that in Metro everything seems to be about typography. Microsoft talks a lot about it and so does everyone in the community. I would not however, say that Typography is the most important aspect of Metro. Metro is a comprehensive language where Typography is important but it’s not the most important or the only way to express things. I wanted to mention this to kick off this article just so that when you think of Metro you do not only think of typography. Think of photography, infographics, animation, input controls and more. All this said, the reason Typography is important in Metro is because typography offers a particularly extensive and expressive range of tools to convey structured information. This is the key: structured information.

Typography uses different tools like weight, size, color, font family, line height, alignment and others to help you convey structured information. Here is another key takeaway here: traditionally when designing websites or mobile apps, developers tend to make all text the same size and the same type. In Metro you do not do this. Not all data is the same. There is high priority data and medium and low priority data. There are hierarchy levels and these need to be expressed using one or many of the above mentioned typographic tools. So if I have the following pieces of data… I need to ask myself which of these are more important, and those I emphasize with typographic size, weight and color and/or other mechanisms.

structuredinfomation_typography1.png

Another aspect to consider when doing typography in Windows Phone is line height. Check out the following examples. Proper line height management is one of the most common problems we’ve seen in lists.

lineheight_typography.png

Finally, the out of the box font family provided my Microsoft is Segoe. Segoe is simply that, the out-of-box option for you to use but it is not a requirement for you to use it. The Metro design principle is not “Always use Segoe”. It is Celebrate Typography. And there are many ways of doing so. Use any font type that you like. You can use both sans serif and serif fonts (serif means adorners). I personally love sans serif fonts like Swiss, Helvetica or Futura but serif fonts like Baskerville or Bodoni are great too when used properly. This is one of those areas where I’m paying to attention to the Metro Design Principles. If I were to follow the Metro Design Language then I’d feel more constrained to using Segoe but remember the Principles are always first. This also applies to Windows 8. You will hear Microsoft asking you to use specific fonts but it is not a restriction to use others if you like and to my knowledge they will not reject apps that use say, Helvetica, instead of Segoe. Of course Microsoft prefers not to pitch Helvetica because they own Segoe and that helps them maintain consistency but also because Apple uses Helvetica and Helvetica is included as an out of the box font in iOS and OSX devices. But again, coming back to the Metro Design Principles, inspired in Swiss design and International Typographic Style, we can use whatever makes sense to us.

Check out these couple samples that show using both serif and sans serif types to convey information yet they both follow the same principles that inspired Metro.

swiss-graphic-design-142.jpg

vignelli-poster-2609-final-530px.jpg

Leave a Reply