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