NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

Typography

Different fonts and sizes help create a visual hierarchy for users to scan through their data easily and in a readable manner.

Helvetica Neue and Open Sans are the standard typefaces for all SAP Concur Expense, SAP Concur Travel, SAP Concur Invoice, ConcurGov and for other products hosted on concursolutions.com. For large numbers displayed in the product, Oswald is used. Concur hosts Open Sans and Oswald as they are open sourced fonts. For operating systems that do not have Helvetica Neue, it will be substituted with Helvetica, Segoe UI, or Arial.

Typefaces

  • Helvetica Neue
  • Open Sans (Header 1 Only)
  • Oswald (Large Numbers Only)

Font Sizes

Usage

When styling page components, consider limiting the number of font sizes used on a page. As a rule of thumb, pages should have at most 4 different font sizes. When trying to achieve a certain design, use the helper classes below to achieve a certain look and feel.

<h1>, <h2>, <h3>, ..., <h6> have preset styles as seen in the font size ramp. These should not be used to style elements, change font sizes or used for visual aesthetics. They should be treated as semantic -- not visual -- elements.

Utility Classes

Utility classes help provide additional styling.

Examples

Examples of .lead and .small combinations on various font sizes.

Resources

See also mobile typography for iOS and Android.