Metropolis UI Fonts
Go Up to Developing Metropolis UI Applications
Metropolis UI style applications created in RAD Studio use the Windows 8 Segoe UI font by default, in accordance with the Windows 8 UI guidelines.
Note: Segoe UI is the standard Windows 8 UI font. The Segoe UI font family has been shipping with Windows operating systems since Windows 7. Segoe UI will be used if your application is run on a Windows 7 or Windows 8 machine, or on an earlier system if you have installed the Segoe UI fonts (from here)
If you create a Metropolis UI application from scratch, or if the fonts are changed during development, you can use the following guidelines to set the font and font size to match the Windows 8 UI guidelines.
| Controls | Font and Font Size Setting |
|---|---|
|
Tile Button
|
Title: Segoe UI Light, 20 pt Title Description: Segoe UI Semi Light, 11 pt TileButton Name: Segoe UI Regular, 9 pt |
|
Grid application template: GridView (Main page)
|
Main Header (Title): Segoe UI Light, 42 pt Header Subtitle (Group Title): Segoe UI Light, 20 pt Item Title: Segoe UI Regular, 11 pt Item Subtitle: Segoe UI Regular, 9 pt |
|
Grid application template: DetailView (Panel)
|
Main Title: Segoe UI Light, 42 pt Item Title: Segoe UI Light, 20 pt Item Subtitle: Segoe UI Light, 11 pt Main Text: Segoe UI Regular, 11 pt |
|
Split Pane application template: GridPaneView (Left panel)
|
Main Header (Title): Segoe UI Light, 42 pt Item Title: Segoe UI Regular, 11 pt Item Subtitle: Segoe UI Regular, 9 pt Item Description: Segoe UI Regular, 11 pt |
|
Split Pane application template: SplitPaneView (Right panel)
|
Item Title: Segoe UI Semilight, 20 pt Item Subtitle: Segoe UI Semilight, 11 pt Item Description (text): Segoe UI Semilight, 11 pt |
|
Labels |
Application Title (applicationtitle): Segoe UI Light, 42pt App Toolbar text (below the round toolbar buttons): Segoe UI Regular, 9 pt App Dialog: Segoe UI Regular, 35 pt FlipView Title: Segoe UI SemiLight, 35 pt Flyout Label/message text: Segoe UI Semilight, 11 pt Inline Error label: Segoe UI Semilight, 11 pt Media Player Label Text: Segoe UI Regular, 11 pt Message Bar Title: Segoe UI Semilight, 35 pt Message Bar Text: Segoe UI Regular, 11 pt |
|
Checkbox |
Segoe UI Regular, 11 pt |
|
Radio Button |
Segoe UI Regular, 11 pt |
|
Command Button |
Main: Segoe UI Semilight, 11 pt Subtitle: Segoe UI Semilight, 11 pt (usually, this font color is lighter or gray) |
|
Context Menu Popup (same for ListBox): |
Segoe UI Regular, 11 pt |
|
Date/Time Picker (scrollable drop down – carousel behavior) |
Segoe UI Regular, 11 pt |
|
Button |
App Dialog Button: Segoe UI Semibold, 11 pt Flyout Panel Button Text: Myriad Pro Regular, 11 pt Message Button Text: Myriad Pro Regular, 11 pt Flyout Panel Button Text: Myriad Pro Regular, 11 pt |
|
Flyout Panel |
Panel Header Text/Title: Myriad Pro Regular, 20 pt Flyout Label/message text: Segoe UI Semilight, 11 pt Flyout Panel Button Text: Myriad Pro Regular, 11 pt |
|
Inline Error |
Label: Segoe UI Semilight, 11 pt |
|
Media Player |
Label Text: Segoe UI Regular, 11 pt |
|
Message Bar |
Title: Segoe UI Semilight, 35 pt Message Bar Text: Segoe UI Regular, 11 pt Message Button Text: Myriad Pro Regular, 11 pt |
|
Password Box + other Windows 8 Edit Controls |
Text inside box: Segoe UI Regular, 11 pt |
|
Push Button |
Segoe UI Regular, 11 pt |
|
Toggle Menu popup (ability to multi-select with checkmarks) |
Segoe UI Regular, 11 pt |
|
Tool Tips |
URLs : Segoe UI SemiLight, 9 pt |
|
Regular Text |
Segoe UI Regular, 9 pt |
