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 Regular
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.