Guidelines

Typography

Text is the primary way that users digest content and accomplish work, so it’s important to use good typographic principles to establish a clear visual hierarchy and to maximize legibility.

Salesforce Sans

At the heart of good typography is a good typeface. We started from the ground up, partnering with Monotype, to design one that reflects our brand and personality, while also maintaining versatility to address diverse applications, from massive billboards to miniscule UI text.

Salesforce Sans is the result: a friendly, professional, and modern typeface with four weights. Salesforce Sans is available to partners and developers in our ecosystem to use in conjunction with the Design System.

Salesforce Sans

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Type Sizes

We use different type sizes and weights to convey a visual

The quick brown fox jumps over the lazy dog.

Heading Large

The quick brown fox jumps over the lazy dog.

Heading Medium

The quick brown fox jumps over the lazy dog.

Heading Small

The quick brown fox jumps over the lazy dog.

Heading Label

The quick brown fox jumps over the lazy dog.

Body Default

The quick brown fox jumps over the lazy dog.

Body Small

For more information about these styles, check out our CSS Text Utilities.

Line Height

In the context of an enterprise application, the need for longform text is quite rare. More often, application design involves many small bits of text that all represent the user’s data. This text is spaced intentionally to maintain distinction between different types and rows of data.

As a result, we take a pragmatic approach to spacing and line height by resetting all margins and paddings to 0, and allowing the line-height property for all text to inherit a globally defined ratio of 1.5 of the text size. This allows designers and developers to easily opt-in to specific text spacing by leveraging our CSS Text and Spacing Utilities.

We do provide a longform text CSS utility, which will result in our recommended vertical text rhythm for optimizing a balance between readability and space efficiency.