Text container used for any text element such as paragraphs, headings, and lists. Establishes vertical spacing and optimizes the reading experience
The CdrText
component is a simple wrapper for text elements. Using the CdrText
component ensures your text elements inherit the default styling from the Cedar CSS reset. Styling can be applied by either using the modifier
property in conjunction with the text utility classes, or by applying a custom CSS class which uses one of the text mixins from cdr-tokens
.
Note that the text utility file (distributed as @rei/cedar/dist/style/text.css
and @rei/cedar/dist/style/cdr-text.css
) is over 100kb in size. Usage of the text utility classes and CdrText
modifier property may impact the bundle size and performance of your application. For projects that are customer facing or which have performance constraints should not load the text utility file or cdr-text
CSS file and instead apply text styling using the text mixins from cdr-tokens
. Code samples on this page include examples of both the modifier/utility and text mixin usage.
A heading helps users to identify and create a hierarchical structure within a page. Headings are typically the largest text on the screen and should be short and include important information. Cedar headings include a serif and a sans-serif option.
Serif headings, set in REI Stuart, work best in larger sizes (cdr-text-heading-serif-600 and above). However, it’s also available for areas where space is limited but an important distinction or callout needs to be made, such as a card title or aligning to marketing collateral.
<template>
<cdr-text class="custom-heading-class">
When you gear up, we give back
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-heading-class {
@include cdr-text-heading-serif-1200;
}
</style>
Serif strong headings, set in REI Stuart with a greater font weight than serif, work best in larger sizes (cdr-text-heading-serif-strong-600 and above). It’s recommended to use serif strong headings very minimally throughout the page and should generally be reserved for important page titles, in cases where type overlays an image, or in situations where additional emphasis is needed.
<template>
<cdr-text class="custom-heading-class">
When you gear up, we give back
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-heading-class {
@include cdr-text-heading-serif-strong-1200;
}
</style>
Sans headings, set in Graphik, should play a supporting role to serif headings. Sans headings work best in smaller sizes (cdr-text-heading-serif-strong-600 and below). Sans headings are not recommended for page titles or other prominent placements. Instead, use serif or serif strong headings.
<template>
<cdr-text class="custom-heading-class">
When you gear up, we give back
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-heading-class {
@include cdr-text-heading-sans-600;
}
</style>
<h1>
to <h6>
, typographic styles set up a visual hierarchy created within CSS that helps to establish the order of importanceCedar does not offer pre-styled responsive headings. Instead, construct responsive headings by defining a heading style for specific breakpoints. For instance, if the heading style is cdr-text-heading-serif-900 @lg, @md, and @sm sizes, set the heading style to cdr-text-heading-serif-800 at the @xs size. This helps to create optimal readability, spacing, and proportions for various breakpoint sizes. An examples in practice:
<template>
<cdr-text class="custom-heading-class">
When you gear up, we give back
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-heading-class {
@include cdr-text-heading-serif-900;
@include cdr-xs-mq-only {
@include cdr-text-heading-serif-800;
}
}
</style>
Subheadings give support or add meaning to a heading, and are intended to be paired with headings. Never position a subheading on a page without pairing it with a heading style. Because subheadings are supportive, they should always be smaller in size than the heading they reinforce.
Sans-serif subheadings are set in Graphik. They are intended to be paired with serif or serif strong headings. Pairing a sans subheading with a sans heading is also acceptable.
<template>
<cdr-text class="custom-subheading-class">
When you gear up, we give back
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-subheading-class {
@include cdr-text-subheading-sans-600;
}
</style>
Heading and subheading combinations should have the appropriate contrast and hierarchy. Headings should always be larger than the accompanying subheading.
Serif headings should only accompanied by sans subheadings.
<template>
<cdr-text class="custom-heading-class">
When you gear up, we give back>
<cdr-text class="custom-subheading-class">
Treat yourself to sweet gear
</cdr-text>
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-heading-class {
@include cdr-text-heading-serif-strong-900;
}
.custom-subheading-class {
@include cdr-text-subheading-sans-500;
padding-top: $cdr-space-one-and-a-half-x;
}
</style>
Sans headings also work best with sans subheadings.
<template>
<cdr-text class="custom-heading-class">
When you gear up, we give back>
<cdr-text class="custom-subheading-class">
Treat yourself to sweet gear
</cdr-text>
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-heading-class {
@include cdr-text-heading-sans-600;
}
.custom-subheading-class {
@include cdr-text-subheading-sans-300;
padding-top: $cdr-space-one-x;
}
</style>
Body styles work best for long-form copy like articles, customer reviews, or legal messages. Body styles have a generous line height and wider letter spacing for optimal reading. For tighter, more compact styles, use utility styles.
<template>
<cdr-text class="custom-body-class">
Cross-country skiing (sometimes called classic skiing) encompasses several styles, from touring or racing on groomed ski tracks to gliding through deep backcountry snow.
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-body-class {
@include cdr-text-body-500;
}
</style>
Body strong is also intended for long-form copy but should be used minimally. Use body strong styles when emphasizing a subset of copy and never for the entire length of copy.
<template>
<cdr-text class="custom-body-class">
Cross-country skiing (sometimes called classic skiing) encompasses several styles, from touring or racing on groomed ski tracks to gliding through deep backcountry snow.
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-body-class {
@include cdr-text-body-strong-500;
}
</style>
Body styles should be used for:
Max-width for paragraph containers is 634px or line length should not exceed 75 characters per line
Use standard (dark) text colors on light backgrounds for article text
<abbr>
element, or link to a definition or glossaryBody styles include a set of strong options: cdr-text-body-strong-500
, cdr-text-body-strong-400
, and cdr-text-body-strong-300
. However, there might be times when a set of words within a sentence needs to be bold. In those cases, use the generic cdr-text-strong. The set of strong options have a lighter font weight than the generic cdr-text-strong.
Utility styles are used to communicate functionality or descriptive information. Shorter content is a good candidate for the more condensed and compact utility styling. Utility styles should not be replaced with headings. While headings help group and categorize content, utility styles help to label elements or give users information on how to take action. Cedar utility styles are available in both serif and sans serif (opens new window) options. Additionally, each utility style has a strong option.
By default, text within a cdr-container
will display as cdr-text-utility-300
.
Utility serif styles should be used when additional brand emphasis is needed.
<template>
<cdr-text class="custom-utility-class">
Mon–Fri, 7am–5pm PT
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-utility-class {
@include cdr-text-utility-serif-800;
}
</style>
Utility serif strong styles should be used when additional emphasis is needed over utility serif.
<template>
<cdr-text class="custom-utility-class">
Mon–Fri, 7am–5pm PT
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-utility-class {
@include cdr-text-utility-serif-strong-800;
}
</style>
Utility sans styles typically make up the majority of utility styles used on a given page.
<template>
<cdr-text class="custom-utility-class">
Mon–Fri, 7am–5pm PT
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-utility-class {
@include cdr-text-utility-sans-800;
}
</style>
Utility sans styles should be used when additional emphasis is needed.
<template>
<cdr-text class="custom-utility-class">
Mon–Fri, 7am–5pm PT
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-utility-class {
@include cdr-text-utility-sans-strong-800;
}
</style>
Eyebrows introduce a topic or show how an item is categorized. Content tags or certain label styles are two examples. Eyebrow text styles should not be used as headings or used for brand names.
<template>
<cdr-text class="custom-eyebrow-class">
Mon–Fri, 7am–5pm PT
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-eyebrow-class {
@include cdr-text-eyebrow-100;
}
</style>
In addition to the specific type options listed above, we have provided two generic styles. These emphasis styles will extend other type styles allowing you to make text italic or more bold.
<template>
<cdr-text class="custom-body-class">
REI Co-op’s Trailsmith line was featured in
<cdr-text
tag="em"
class="custom-italic-class">
Field & Stream’s
</cdr-text>
“10 Best Pants for Working Outside”
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-body-class {
@include cdr-text-body-300;
}
.custom-italic-class {
@include cdr-text-italic;
}
</style>
<template>
<cdr-text class="custom-body-class">
This trip is rated as
<cdr-text
tag="strong"
class="custom-strong-class">
Vigorous [4]
</cdr-text>.
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-body-class {
@include cdr-text-body-300;
}
.custom-strong-class {
@include cdr-text-strong;
}
</style>
To ensure that usage of this component complies with accessibility guidelines:
<h1>
, <h2>
, <h3>
, <h4>
, <h5>
, and <h6>
)<h2>
to <h4>
)This component has compliance with WCAG SC 2.1.1 (opens new window) guidelines by:
To ensure that usage of this component complies with accessibility guidelines:
This component has compliance with following WebAIM’s accessibility guidelines:
To work as intended, tokens, utility classes, and component require both cdr-reset.css
and access to the REI brand fonts. For more information on how to access these resources, visit the Developer getting started guide.
The global text default cdr-text-default
is defined in each of the available cdr-container classes as well as the Cedar reset. Ensure that all content is contained in one of the available container classes.
The Cedar text css selectors provide no spacing values other than letter-spacing and line-height.
For proper spacing between blocks of text, use the Cedar spacing options.
The Cedar text options can be utilized by your application using the token mixins (opens new window), utility classes (opens new window) or through the cdr-text component (opens new window).
Cedar uses design tokens to store typographic attributes that represent the fundamental decisions of Cedar’s visual language.
For more information about design tokens and a complete list of tokens available in Cedar, visit the Design Tokens overview.
cdr-text
styles are available as a standalone css classes for users unable or preferring not to add custom styles to their applications, and who are unable to use the cdr-text
vue.js component. Note that the text utility class file is over 100kb in size and may impact the performance of your application. Using the text token mixins will allow you to bundle only the text styles used in your application.
For more information on importing these styles and how to use them, visit the Developer getting started guide.
The cdr-text
root class sets all value pairs to inherit
. When using these classes, ensure at least the parent class assigns the cdr-text
root style.
The utility classes have two dashes between cdr-text
and its modifier body-300
.
<p class=”cdr-text cdr-text--body-300”>
My body 300 text
<em class=”cdr-text--italic”>is</em>
amazing
</p>
tag
name
string
type
'p'
default
Sets valid HTML element tag.
modifier
name
string
type
N/A
default
Modifies the style variant for this component. see below tables for list of options.
Find more information about using Slots in the article Getting Started as a Developer.
default
name
Set the innerHTML for CdrText content. This includes text and html markup.
The CdrText component allows for styling any HTML element with available text styles. Visual style and semantic meaning are managed independently by providing:
tag
propmodifier
prop and a utility class, or with a custom CSS class and a text mixinThis method decouples the semantic meaning of a heading level from the visual representation.
With this decoupling, you can style other markup to look like a heading that semantically isn’t a heading.
When creating page headers, apply the correct semantic tag.
<cdr-text
tag="h1"
modifier="heading-700 heading-800@sm heading-800@md heading-800@lg"
>
A navigable semantic heading
</cdr-text>
<template>
<cdr-text tag="h1" class="custom-heading-class">
A navigable semantic heading
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-heading-class {
@include cdr-text-heading-700;
@include cdr-sm-mq {
<!-- `cdr-sm-mq` mixin applies styling at small breakpoint and above -->
@include cdr-text-heading-800;
}
}
</style>
Note that heading styles do not always need to be paired with heading tags. Heading tags should be used for accessibility purposes to describe the page hierarchy.
<cdr-text
modifier="heading-700 heading-800@sm heading-800@md heading-800@lg"
>
Text styled as a heading for display only
</cdr-text>
<template>
<cdr-text class="custom-heading-class">
Text styled as a heading for display only
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-heading-class {
@include cdr-text-heading-700;
@include cdr-sm-mq {
<!-- `cdr-sm-mq` mixin applies styling at small breakpoint and above -->
@include cdr-text-heading-800;
}
}
</style>
CdrText components can be extended with other Cedar or custom classes.
<cdr-text
class="
cdr-mb-space-one-x"
modifier="
body-300”
>
This paragraph is adding a bottom margin to provide space between it and the paragraph below
</cdr-text>
<template>
<cdr-text class="custom-body-class">
This paragraph is adding a bottom margin to provide space between it and the paragraph below
</cdr-text>
</template>
<style>
@import '~@rei/cdr-tokens/dist/scss/cdr-tokens.scss';
.custom-body-class {
@include cdr-text-body-300;
marign-bottom: $cdr-space-one-x;
}
</style>
Text modifiers accept any of the supported Cedar breakpoints. For more information on how breakpoints work on components, visit the Responsive Layout article.
UI toolkit | Token | Utility class | Component Modifier |
---|---|---|---|
heading-serif-200 | cdr-text-heading-serif-200 | cdr-text--heading-serif-200 | heading-serif-200 |
heading-serif-300 | cdr-text-heading-serif-300 | cdr-text--heading-serif-300 | heading-serif-300 |
heading-serif-400 | cdr-text-heading-serif-400 | cdr-text--heading-serif-400 | heading-serif-400 |
heading-serif-500 | cdr-text-heading-serif-500 | cdr-text--heading-serif-500 | heading-serif-500 |
heading-serif-600 | cdr-text-heading-serif-600 | cdr-text--heading-serif-600 | heading-serif-600 |
heading-serif-700 | cdr-text-heading-serif-700 | cdr-text--heading-serif-700 | heading-serif-700 |
heading-serif-800 | cdr-text-heading-serif-800 | cdr-text--heading-serif-800 | heading-serif-800 |
heading-serif-900 | cdr-text-heading-serif-900 | cdr-text--heading-serif-900 | heading-serif-900 |
heading-serif-1100 | cdr-text-heading-serif-1100 | cdr-text--heading-serif-1100 | heading-serif-1100 |
heading-serif-1200 | cdr-text-heading-serif-1200 | cdr-text--heading-serif-1200 | heading-serif-1200 |
UI toolkit | Token | Utility class | Component Modifier |
---|---|---|---|
heading-serif-strong-600 | cdr-text-heading-serif-strong-600 | cdr-text--heading-serif-strong-600 | heading-serif-strong-600 |
heading-serif-strong-700 | cdr-text-heading-serif-strong-700 | cdr-text--heading-serif-strong-700 | heading-serif-strong-700 |
heading-serif-strong-800 | cdr-text-heading-serif-strong-800 | cdr-text--heading-serif-strong-800 | heading-serif-strong-800 |
heading-serif-strong-900 | cdr-text-heading-serif-strong-900 | cdr-text--heading-serif-strong-900 | heading-serif-strong-900 |
heading-serif-strong-1100 | cdr-text-heading-serif-strong-1100 | cdr-text--heading-serif-strong-1100 | heading-serif-strong-1100 |
heading-serif-strong-1200 | cdr-text-heading-serif-strong-1200 | cdr-text--heading-serif-strong-1200 | heading-serif-strong-1200 |
UI toolkit | Token | Utility class | Component Modifier |
---|---|---|---|
heading-sans-200 | cdr-text-heading-sans-200 | cdr-text--heading-sans-200 | heading-sans-200 |
heading-sans-300 | cdr-text-heading-sans-300 | cdr-text--heading-sans-300 | heading-sans-300 |
heading-sans-400 | cdr-text-heading-sans-400 | cdr-text--heading-sans-400 | heading-sans-400 |
heading-sans-500 | cdr-text-heading-sans-500 | cdr-text--heading-sans-500 | heading-sans-500 |
heading-sans-600 | cdr-text-heading-sans-600 | cdr-text--heading-sans-600 | heading-sans-600 |
UI toolkit | Token | Utility class | Component Modifier |
---|---|---|---|
subheading-sans-300 | cdr-text-subheading-sans-300 | cdr-text--subheading-sans-300 | subheading-sans-300 |
subheading-sans-400 | cdr-text-subheading-sans-400 | cdr-text--subheading-sans-400 | subheading-sans-400 |
subheading-sans-500 | cdr-text-subheading-sans-500 | cdr-text--subheading-sans-500 | subheading-sans-500 |
subheading-sans-600 | cdr-text-subheading-sans-600 | cdr-text--subheading-sans-600 | subheading-sans-600 |
UI toolkit | Token | Utility class | Component Modifier |
---|---|---|---|
eyebrow-100 | cdr-text-eyebrow-100 | cdr-text--eyebrow-100 | eyebrow-100 |
UI toolkit | Token | Utility class | Component Modifier |
---|---|---|---|
body-300 | cdr-text-body-300 | cdr-text--body-300 | body-300 |
body-400 | cdr-text-body-400 | cdr-text--body-400 | body-400 |
body-500 | cdr-text-body-500 | cdr-text--body-500 | body-500 |
UI toolkit | Token | Utility class | Component Modifier |
---|---|---|---|
body-strong-300 | cdr-text-body-strong-300 | cdr-text--body-strong-300 | body-strong-300 |
body-strong-400 | cdr-text-body-strong-400 | cdr-text--body-strong-400 | body-strong-400 |
body-strong-500 | cdr-text-body-strong-500 | cdr-text--body-strong-500 | body-strong-500 |
UI toolkit | Token | Utility class | Component Modifier |
---|---|---|---|
utility-sans-100 | cdr-text-utility-sans-100 | cdr-text--utility-sans-100 | utility-sans-100 |
utility-sans-200 | cdr-text-utility-sans-200 | cdr-text--utility-sans-200 | utility-sans-200 |
utility-sans-300 | cdr-text-utility-sans-300 | cdr-text--utility-sans-300 | utility-sans-300 |
utility-sans-400 | cdr-text-utility-sans-400 | cdr-text--utility-sans-400 | utility-sans-400 |
utility-sans-500 | cdr-text-utility-sans-500 | cdr-text--utility-sans-500 | utility-sans-500 |
utility-sans-600 | cdr-text-utility-sans-600 | cdr-text--utility-sans-600 | utility-sans-600 |
utility-sans-700 | cdr-text-utility-sans-700 | cdr-text--utility-sans-700 | utility-sans-700 |
utility-sans-800 | cdr-text-utility-sans-800 | cdr-text--utility-sans-800 | utility-sans-800 |
UI toolkit | Token | Utility class | Component Modifier |
---|---|---|---|
utility-sans-strong-100 | cdr-text-utility-sans-strong-100 | cdr-text--utility-sans-strong-100 | utility-sans-strong-100 |
utility-sans-strong-200 | cdr-text-utility-sans-strong-200 | cdr-text--utility-sans-strong-200 | utility-sans-strong-200 |
utility-sans-strong-300 | cdr-text-utility-sans-strong-300 | cdr-text--utility-sans-strong-300 | utility-sans-strong-300 |
utility-sans-strong-400 | cdr-text-utility-sans-strong-400 | cdr-text--utility-sans-strong-400 | utility-sans-strong-400 |
utility-sans-strong-500 | cdr-text-utility-sans-strong-500 | cdr-text--utility-sans-strong-500 | utility-sans-strong-500 |
utility-sans-strong-600 | cdr-text-utility-sans-strong-600 | cdr-text--utility-sans-strong-600 | utility-sans-strong-600 |
utility-sans-strong-700 | cdr-text-utility-sans-strong-700 | cdr-text--utility-sans-strong-700 | utility-sans-strong-700 |
utility-sans-strong-800 | cdr-text-utility-sans-strong-800 | cdr-text--utility-sans-strong-800 | utility-sans-strong-800 |
UI toolkit | Token | Utility class | Component Modifier |
---|---|---|---|
utility-serif-200 | cdr-text-utility-serif-200 | cdr-text--utility-serif-200 | utility-serif-200 |
utility-serif-300 | cdr-text-utility-serif-300 | cdr-text--utility-serif-300 | utility-serif-300 |
utility-serif-400 | cdr-text-utility-serif-400 | cdr-text--utility-serif-400 | utility-serif-400 |
utility-serif-500 | cdr-text-utility-serif-500 | cdr-text--utility-serif-500 | utility-serif-500 |
utility-serif-600 | cdr-text-utility-serif-600 | cdr-text--utility-serif-600 | utility-serif-600 |
utility-serif-700 | cdr-text-utility-serif-700 | cdr-text--utility-serif-700 | utility-serif-700 |
utility-serif-800 | cdr-text-utility-serif-800 | cdr-text--utility-serif-800 | utility-serif-800 |
UI toolkit | Token | Utility class | Component Modifier |
---|---|---|---|
utility-serif-strong-200 | cdr-text-utility-serif-strong-200 | cdr-text--utility-serif-strong-200 | utility-serif-strong-200 |
utility-serif-strong-300 | cdr-text-utility-serif-strong-300 | cdr-text--utility-serif-strong-300 | utility-serif-strong-300 |
utility-serif-strong-400 | cdr-text-utility-serif-strong-400 | cdr-text--utility-serif-strong-400 | utility-serif-strong-400 |
utility-serif-strong-500 | cdr-text-utility-serif-strong-500 | cdr-text--utility-serif-strong-500 | utility-serif-strong-500 |
utility-serif-strong-600 | cdr-text-utility-serif-strong-600 | cdr-text--utility-serif-strong-600 | utility-serif-strong-600 |
utility-serif-strong-700 | cdr-text-utility-serif-strong-700 | cdr-text--utility-serif-strong-700 | utility-serif-strong-700 |
utility-serif-strong-800 | cdr-text-utility-serif-strong-800 | cdr-text--utility-serif-strong-800 | utility-serif-strong-800 |
UI toolkit | Token | Utility class | Component Modifier |
---|---|---|---|
italic | N/A | cdr-text--italic | italic |
strong | N/A | cdr-text--strong | strong |
Android: Display 1
iOS: Large Title
Suggested Usage: Frequently used as the largest title for phone apps and can be used for page titles for larger devices.
font-size | 34.00sp |
line-height | 40.00dp |
font-family | Graphic-App-Medium.ttf |
Android: Title 1
iOS: Title 1
Suggested Usage: Content titles, level 1.
font-size | 28.00sp |
line-height | 36.00dp |
font-family | Stuart-App-Semibold.otf |
Android: Title 2
iOS: Title 2
Suggested Usage: Content titles, product names, level 2.
font-size | 26.00sp |
line-height | 32.00dp |
font-family | Stuart-App-Semibold.otf |
Android: Title 3
iOS: Title 3
Suggested Usage: Content titles, product names, product prices, level 3.
font-size | 21.00sp |
line-height | 28.00dp |
font-family | Stuart-App-Semibold.otf |
Android: Headline
iOS: Headline
Suggested Usage: Heading primarily used with body copy, list items, table headers.
font-size | 17.00sp |
line-height | 24.00dp |
font-family | Graphic-App-Medium.ttf |
Android: Subhead
iOS: Subhead
Suggested Usage: Subheading primarily used with body copy.
font-size | 15.00sp |
line-height | 20.00dp |
font-family | Graphic-App-Medium.ttf |
Android: Body 1
iOS: Body
Suggested Usage: Default for body content.
font-size | 15.00sp |
line-height | 20.00dp |
font-family | Graphic-App-Regular.ttf |
Android: Body 2
iOS: Footnote
Suggested Usage: Secondary text intended for informational and supplemental body content.
font-size | 12.00sp |
line-height | 20.00dp |
font-family | Graphic-App-Regular.ttf |
Android: Caption 1
iOS: Caption 1
Suggested Usage: Tertiary text, also intended for informational and supplemental body content. Also used for bottom action bar text for larger devices.
font-size | 12.00sp |
line-height | 16.00dp |
font-family | Graphic-App-Regular.ttf |
Android: Caption 2
iOS: Caption 2
Suggested Usage: Smallest text size, use sparingly or for bottom tab bar text.
font-size | 11.00sp |
line-height | 16.00dp |
font-family | Graphic-App-Regular.ttf |
Android: Button
iOS: N/A
Suggested Usage: Button text has a thicker weight than body copy.
font-size | 15.00sp |
line-height | 24.00dp |
font-family | Graphic-App-Medium.ttf |