MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

FIGURE 6-2 The same app as Figure 6-1 reimagined with one possible application of Windows app design, where
most of the chrome has disappeared, leaving much more space for content. An alternate design could emphasize
images much more than text.
Even where typography is concerned, Windows app design encourages the use of distinct font sizes,
again called the typographic ramp, to establish a sense of hierarchy. The default WinJS
stylesheets—ui-light.css and ui-dark.css—provide four fixed sizes where each level is proportionally
larger than the previous (42pt = 80px, 20pt = 40px, etc.), as shown in Figure 6-3. These proportions
allow users to easily establish an understanding of content structure with just a glance. Again, it’s a
matter of encouraging habit and muscle memory, and Microsoft’s research has shown that beyond this
size granularity, users are generally unable to differentiate where a piece of content fits in a hierarchy.
Figure 6-3 The typographic ramp of Windows Store app design, shown in both the ui-dark.css (left) and ui-light.css
(right) stylesheets.
236