Metro vs Swiss
メトロ / スイス・スタイル
Metro comes from Microsoft UI and Swiss from Functionalism. Both are read here as style. They are reached for with some of the same intent, which is where they get confused.
Metro
Windows Phone's flat language, which cast type rather than icons in the lead role. Large typography, flat-color live tiles and layouts that run off the edge of the screen transplanted the clarity of transit signage into UI, opening the flat era ahead of iOS 7.
Swiss
.jpg)
Puts order front and center and makes the information itself the protagonist.
| Metro | Swiss | |
|---|---|---|
| Era | 2010–2015 | 1950s– |
| Family | Microsoft UI | Functionalism |
| Kind | Style | Style |
| Cues | Type as the hero / Flat-color tiles / Compositions running off-screen / Chrome eliminated | Strict grid / Sans-serif type / Asymmetry / Objective photography |
| Best used for | Dashboards listing news or weather where borders would only add noise · Indoor wayfinding and signage read from a distance in one word | Making complex information fast to read · Giving an organization rationality and transparency |
| Type | Headings five times body size, kept in a light weight | Neutral sans-serif; be bold with size contrast |
| Composition | Headings running off the edge, tiles in two rectangle sizes | 12-column grid, left-aligned, asymmetric |
| Material | No shadows or borders, black or white ground, saturated flat panels | White space and objective photographs; almost no ornament |
| Caution | Stripping every border and shadow erases the difference between a tappable tile and a plain heading, leaving people guessing where to touch. | Too much tidiness turns anonymous. Keep one strong jump in scale. |