Metropolis UI Fonts

From RAD Studio
Jump to: navigation, search

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

Updated Tile.png

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)

GridViewFontSm.png

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)

GridPanelSM.png

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)

SplitPaneFontSM2.png

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)

SplitPaneFont2SM2.png

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


See Also