Microsoft Surface 1.0 SP1: UX Guidelines - Typography and Iconography - TechNet Articles - United States (English) - TechNet Wiki

Typography
- Selecting

Icons and Objects
Icons as Affordances
- Using Icons

Typography

On-screen legibility is critical for all Microsoft Surface applications. Microsoft Surface has a number of aspects that make its on-screen reading experience unique. When content acts as the interface and uses a minimal amount of user interface elements, on-screen text has greater prominence. You should design content and controls so users can read them from any angle and from all sides, including upside down, because multiple users may read text simultaneously from different sides of the unit.

In the following image of Concierge, bold, simple typography with classic sans serif fonts ensures easy legibility for all users, from all angles, and at most sizes.

You should use fonts that allow for free rotation, off-axis legibility, and arbitrary orientation. This approach typically avoids serif fonts in favor of sans serif fonts with minimal flourishes, flowing outlines, consistent widths, and generous negative space.

The Surface team has successfully used both classic and modern sans serif fonts, such as Arial, Helvetica, and Microsoft Segoe, which render well on the Surface platform.

Selecting Fonts

Should

Evaluate text rendering at different angles before and during development.
Specify all font sizes in pixels, rather than points or em widths. This approach guarantees that font elements will register to full pixel rows at runtime, which helps to increase legibility on the horizontal axis and to preserve enough visual data. It also enables users to rotate objects with no effect on text legibility.
Use fonts of at least 12 pixels in height at all times. Never use a font below 10 pixels. You can scale fonts up slightly to improve legibility.
Avoid using all capital letters and small capital letters. Initial capitals help improve legibility and never convey an aggressive tone.
If the visual brand experience requires serif fonts, set the font height at 20 pixels or higher for maximum legibility.
Typesetting in high-contrast reduces legibility. White text on a black background can create bleed, harsh edges, and a poor reading experience.
Avoid setting text on curved paths. If a screen design recommends text on a curved path as the best approach, make sure to scale the text large enough that users can read it easily.
Remember that users can freely scale most Surface objects and controls. You may need to enforce minimum scaling limits on objects to retain maximum text legibility.
Always test font rendering on a Surface screen rather than a monitor. Make sure to test for legibility under multiple circumstances, such as when users rotate and scale text, to identify angles or sizes that may compromise legibility.
Consider a slight, subtle increase in a font’s x-height to help open the letterforms for easier reading, especially if you need a slightly condensed appearance due to space constraints.

Could

Use condensed fonts with care at small sizes. Their lack of interior negative space within each glyph can create poor legibility.
Improve legibility by duplicating a piece of text, moving it behind the original text, offsetting it by 1 pixel each horizontally and vertically, and filling it with a dark, neutral tone.
Always look for opportunities to place on-screen copy within some other shape to avoid uncontained, floating text. This approach also helps to ensure that an application’s text always has a consistent color, background, or tone behind it to improve legibility.

Iconography

Icons are a staple of the graphical-interface paradigm. They are visual metaphors and compact illustrations that can convey significant meaning in a small amount of space (for example, a printer icon for printing functionality, a floppy disk for saving, and so on). Once users learn their meanings, icons can act as effective shorthand or replace on-screen text.

Icons and Objects

In GUI software applications, icons primarily serve as freestanding graphical shortcuts for functions or menu commands that operate on data (content). And while they can function similarly in Microsoft Surface applications (such as access points and the I’m done button), they frequently serve as controls in an object, or elements within the object remove the need for them.

Icons should be content, or at least closely relate to content. For example, instead of designing an icon control that says “Menu” for a restaurant application, you should design a virtual equivalent of a menu that users will likely understand how to handle: They can scale it to take a closer look, and flick left and right to turn the pages. The concept of super-realism also applies when they order food: instead of touching an “add to your order” button, they simplame="Icons_and_Objects">Icons and Objects

In GUI software applications, icons primarily serve as freestanding graphical shortcuts for functions or menu commands that operate on data (content). And while they can funcy touch the item in the menu itself. In this way, icons and graphical representations of functionality can ensure that Surface experiences remain natural, direct, global in interpretation, and contextually relevant.

Icons as Affordances

Icons enable users to infer functionality and have relevance in Surface applications. To create understated and minimal interface controls, those controls do not always have obvious functions, and small controls may prohibit the use of text. In such cases, you can use bold and iconic illustrations as effective alternatives to textual labels.

In the following image, the map icon in the top center is simple and bold: It reveals functionality to users without calling attention to itself. It is also held within a piece of on-screen content, which helps create a direct and immersive experience.

Users rely on icons to understand the state and functionality of an application or object, but like any tool, you should use icons only when appropriate. In Surface interactions, direct methods of manipulation tend to replace icons. If an application uses icons, they must be universal, immediately recognizable, and easily learned.

Using Icons