Typography

Sage provides a constrained, purposeful set of typographic styles. These styles map as much as possible to functional roles so you know when each can be used.

Setting individual styles manually should be avoided, but where needed, should be sure to use the appropriate design tokens. In the end, we prefer adding new entries to the type spec over including one-off styling.

The Sage type system uses a loose major second modular scale (factor of 1.125) derived from an initial base font size of 14px. However, for improved readability with mobile / small screen devices, this base font size is increased to 16px.

Typography in our system uses t-sage- classes in order to apply a given typographical specification to an element These can be used on any element to apply the desired typographical styles regardless of the tag. This allows a wide range of flexibility for applying a desired style to an element while still using the most semantic element possible for a given context.

Type Spec	Weight	Kerning	Desktop (size / line)	Mobile (size / line)
Heading 1 HTML: `t-sage-heading-1` Rails: `SageClassnames::TYPE::HEADING_1` React: `SageClassnames.TYPE.HEADING_1`	700	-0.6px	40px / 48px	40px / 48px
Heading 2 HTML: `t-sage-heading-2` Rails: `SageClassnames::TYPE::HEADING_2` React: `SageClassnames.TYPE.HEADING_2`	700	-0.5px	32px / 40px	32px / 40px
Heading 3 HTML: `t-sage-heading-3` Rails: `SageClassnames::TYPE::HEADING_3` React: `SageClassnames.TYPE.HEADING_3`	700	-0.15px	28px / 32px	28px / 32px
Heading 4 HTML: `t-sage-heading-4` Rails: `SageClassnames::TYPE::HEADING_4` React: `SageClassnames.TYPE.HEADING_4`	600	-0.15px	24px / 32px	24px / 32px
Heading 5 HTML: `t-sage-heading-5` Rails: `SageClassnames::TYPE::HEADING_5` React: `SageClassnames.TYPE.HEADING_5`	600	0px	18px / 28px	18px / 28px
Heading 6 HTML: `t-sage-heading-6` Rails: `SageClassnames::TYPE::HEADING_6` React: `SageClassnames.TYPE.HEADING_6`	600	0px	16px / 28px	16px / 28px
Body* HTML: `t-sage-body` Rails: `SageClassnames::TYPE::BODY` React: `SageClassnames.TYPE.BODY`	400*	0px	16px / 24px	16px / 24px
Small Body* HTML: `t-sage-body-small` Rails: `SageClassnames::TYPE::BODY_SMALL` React: `SageClassnames.TYPE.BODY_SMALL`	400*	0px	14px / 20px	14px / 20px
Extra Small Body* HTML: `t-sage-body-xsmall` Rails: `SageClassnames::TYPE::BODY_XSMALL` React: `SageClassnames.TYPE.BODY_XSMALL`	400*	0px	12px / 16px	12px / 16px

* The t-sage-body{-size} classes also have weight variations: append -med for medium (500); append -semi for semibold (600); append -bold for bold (700)

The type specs above map logically to corresponding HTML elements, as well as the following:

Body (t-sage-body) is used as the default type style, and is thus applied to elements such as li, dd, td, blockquote, and more.
Body Bold (t-sage-body-semi) is used for elements that are typically bolded such as tr, dt, strong, and b.

As an example, see here how the \"Heading 3\" type spec can be applied to an h3 element:

Lorem ipsum dolor sit

<h3 class="t-sage-heading-3">Lorem ipsum dolor sit</h3>

But the exact specs can also be applied to any element such as a span. This is not meant to be an excuse for using non-semantic markup, but rather, to free a spec to be applied to the most semantic element in context regardless of the spec's name.

Lorem ipsum dolor sit

<span class="t-sage-heading-3">Lorem ipsum dolor sit</span>

For setting text in open areas where simpler markup is desired, or where a content management system controls the markup being output, we recommend applying the sage-type class on a container around such content. This leads to some default styling applied to the tags within the container include our preferred colors and block spacing.

Coloring Type

While applying colors to type on-the-fly should generally be avoided we do provide the following utility classes for such cases where its most practical:

Color	Type class	Constants
Primary	`t-sage--color-primary-300`	Rails: `SageClassnames::TYPE_COLORS::PRIMARY_300` React: `SageClassnames.TYPE_COLORS.PRIMARY_300`
Grey	`t-sage--color-charcoal-100`	Rails: `SageClassnames::TYPE_COLORS::CHARCOAL_100` React: `SageClassnames.TYPE_COLORS.CHARCOAL_100`
Red	`t-sage--color-red-300`	Rails: `SageClassnames::TYPE_COLORS::RED_300` React: `SageClassnames.TYPE_COLORS.RED_300`
Orange	`t-sage--color-orange-300`	Rails: `SageClassnames::TYPE_COLORS::ORANGE_300` React: `SageClassnames.TYPE_COLORS.ORANGE_300`
Yellow	`t-sage--color-yellow-300`	Rails: `SageClassnames::TYPE_COLORS::YELLOW_300` React: `SageClassnames.TYPE_COLORS.YELLOW_300`
Sage	`t-sage--color-sage-300`	Rails: `SageClassnames::TYPE_COLORS::SAGE_300` React: `SageClassnames.TYPE_COLORS.SAGE_300`
Purple	`t-sage--color-purple-300`	Rails: `SageClassnames::TYPE_COLORS::PURPLE_300` React: `SageClassnames.TYPE_COLORS.PURPLE_300`

Additional Type Features

While modifying type beyond the specs above is not encouraged a few type utilities are available:

Description	Type class	Constants
Truncate text with an ellipsis when available space runs out	`t-sage--truncate`	Rails: `SageClassnames::TRUNCATE_TEXT` React: `SageClassnames.TRUNCATE_TEXT`
Adjust alignment of type to right	`t-sage--align-right`	Rails: `SageClassnames::TYPE_ALIGN_RIGHT` React: `SageClassnames.TYPE_ALIGN_RIGHT`
Adjust alignment of type to hang center	`t-sage--align-center`	Rails: `SageClassnames::TYPE_ALIGN_CENTER` React: `SageClassnames.TYPE_ALIGN_CENTER`
Apply a strikethrough to text	`t-sage--strikethrough`	Rails: `SageClassnames::TYPE_STRIKETHROUGH` React: `SageClassnames.TYPE_STRIKETHROUGH`