Style, layout, and typography guidelines for apps for Office

apps for Office

Learn style guidelines for the layout, typography, glyphs, and icons in your apps for Office.

Last modified: April 17, 2014

Applies to: Access app for SharePoint | Excel 2013 | Excel 2013 RT | Excel 2013 SP1 | Excel Online | Outlook 2013 | Outlook 2013 RT | Outlook 2013 SP1 | Outlook for Mac for Office 365 | Outlook Web App | OWA for Devices | PowerPoint 2013 | PowerPoint 2013 RT | PowerPoint 2013 SP1 | PowerPoint Online | Project 2013 | Project 2013 SP1 | Word 2013 | Word 2013 RT | Word 2013 SP1

In this article
Style guidelines
Margins and padding
Typography
Glyphs and icons
Additional resources

Follow these guidelines so that style of your apps is consistent with the overall design philosophy used in Office applications.

Users will understand your app's content and interactions more easily if you follow a consistent pattern for margins, gutters, positioning of common UI, and padding between groups and elements. A consistent silhouette limits distractions and helps users focus on your app's experience.

Task pane app margins

Task pane layout

Task pane layout
Header margins in task pane app

Header margins in task pane app
Content area margins in task pane app

Content area margins in task pane app
Footer margins in task pane app

Footer margins in task pane app

Task pane app padding

Vertical padding between content in a task pane app

Vertical padding between content in a task pane app
Horizontal padding between content in a task pane app

Horizontal padding between content in a task pane app
Horizontal padding between buttons in a footer

Horizontal padding between buttons in a footer

Content app margins

Content app layout

Content app layout
Header margins in a content app

Header margins in a content app
Content area margins in a content app

Content area margins in a content app
Footer margins in a content app

Footer margins in a content app

Content app padding

Vertical padding in a content app

Vertical padding in a content app
Horizontal padding in a content app

Horizontal padding in a content app

Mail app margins

Content app layout

Content app layout
Header margins in a content app

Header margins in a content app
Content area margins in a content app

Content area margins in a content app
Footer margins in a content app

Footer margins in a content app

Mail app padding

Vertical padding in a mail app

Vertical padding in a mail app
Horizontal padding in a mail app

Horizontal padding in a mail app

Mail app vertical scrolling in iOS devices

When you create a mail app that supports tablets or smartphones, if the content in the app pane is longer than the height of the IFrame, currently iOS touch devices (iPads, iPhones) don't always automatically display a vertical scroll bar. To make sure your app scrolls correctly on these devices, follow these guidelines:

  • In the CSS for your mail app, style the html element with height:100%.

  • Define the body element as follows:

    • height: 100%

    • overflow-y: auto

    • -webkit-overflow-scrolling: touch (to support inertial scrolling)

Segoe UI is the signature UI font for Office and Windows 8 and is the recommended font for apps. The recommended sizes below are designed to align with Office host applications. Use scale in typography to create hierarchy. Use no more than three font sizes in one view and be sure that the font sizes used are noticeably different in scale.

Tag

Image

Font-family

Font-size

Font-weight

H1

H1

Segoe UI Light

26px

lighter

H2

H2

Segoe UI Light

18px

lighter

H3

H3

Segoe UI

12px

600

Body

Body

Segoe UI

12px

normal

Links within app

Links within app

Segoe UI

12px

normal

Links to outside of app

Links outside of app

Segoe UI

12px

normal

Tabs

Tabs

Segoe UI

12px

normal

Controls, labels

Controls, labels

Segoe UI

12px

normal

Buttons

Buttons

Segoe UI

12px

normal

For frequently used commands, use standard icons or glyphs to help users learn the meaning of the graphic through repeated use - such as a gear icon for settings or a question mark for help. For commands that are only used occasionally, use buttons or glyphs with text labels.

Showing a text button on the left and a settings gear icon on the right

Showing a text button on the left and a settings gear icon on the right
Standard graphics

Usage

Graphic

Within or adjacent to a search box

Search icon large

Search icon small

Links to a settings page

Settings icon

Use where items in a tab menu are truncated

Truncated tabs icon

Indicates that there are options

Options icon

Loading graphic

Loading graphic

Dismisses a dialog or toast message

Dismiss dialog or toast icon

Back button when a simple text string is not sufficient

Back button icon
Show:
© 2014 Microsoft