HomeStarbucks Pattern Library

Typography

Typeface

SoDoSans

Weights

We use "Regular", "SemiBold" and "Bold".

Symbols

When we need to include trademarks or other symbols into copy, include the symbol without the <sup> tag.

With <sup> tag:Sign up for Starbucks® Rewards

Without <sup> tag:Sign up for Starbucks® Rewards

SoDoSans

This is xxs text. This is xxs semibold text. This is xxs bold text.

This is xs text. This is xs semibold text. This is xs bold text.

This is sm text. This is sm semibold text. This is sm bold text.

This is md text. This is md semibold text. This is md bold text.

This is lg text. This is lg semibold text. This is lg bold text.

This is xl text. This is xl semibold text. This is xl bold text.

This is xxl text. This is xxl semibold text. This is xxl bold text.

Contextual Examples

Detail, action & voice

When used consistently type can convey detail, action & voice to our users within a variety of scenarios. Good typography conveys informative details and available actions without overwhelming a user’s cognitive load or adding superfluous tedium to a given interaction.

Typography being used in a laptop UI screenshot of Order feature.

Persistent order

Good typography directs users by providing persistent order and an intelligible flow no matter what language is being utilized. This text will talk more specifically about the examples being animated at right.

Typography being used in a mobile UI screenshot of Order feature.
Typography being used in a mobile UI screenshot of Order feature.

Implementation

So what’s next?

Implementing typography in our app is done in two ways. For headlines or otherwise non-body text, we use a flexible component called <Heading>. Otherwise, we use CSS utilities to style text.

HeadingsType Styling