Typography

Stacks provides atomic classes to override default styling of typography. Change typographic weights, styles, and alignment with these atomic styles.

Basic

These styles should only be used as overrides. They shouldn’t replace standard semantic uses of strong or em tags.

Basic classes

Class Output Definition
.fw-normal font-weight: normal;

Normal font weight. Maps to 400.

.fw-bold font-weight: bold;

Bold font weight. Maps to 700.

.fs-normal font-style: normal;

Selects the normal font within the font-family.

.fs-italic font-style: italic;

Selects the italic font within the font-family.

.tt-capitalize text-transform: capitalize;

The first character in each word is capitalized regardless of markup.

.tt-lowercase text-transform: lowercase;

All characters are lowercase regardless of markup.

.tt-uppercase text-transform: uppercase;

All characters are uppercase regardless of markup.

.tt-none text-transform: none;

Characters in a string remain unchanged.

.tt-unset text-transform: unset;

Text-transform is unset entirely.

.td-underline text-decoration: underline;

Text renders with an underline.

.td-none text-decoration: none;

Text renders without an underline.

Note: The unset property is a combination property that resets a property to its inherited value. It behaves like the inherit and the initial keywords, but it properly selects the right value for you. Unfortunately, unset is not fully supported in Internet Explorer. Because of this all unset values have the correct inherit or initial value applied.

Basic examples

<p class="fw-normal"></p>
<p class="fw-bold"></p>

<p class="fs-normal"></p>
<p class="fs-italic"></p>
<p class="fs-unset"></p>

<p class="tt-capitalize"></p>
<p class="tt-lowercase"></p>
<p class="tt-uppercase"></p>
<p class="tt-none"></p>
<p class="tt-unset"></p>

<a class="td-underline"></a>
<a class="td-none"></a>
Font Weight: Normal
Font Weight: Bold
Font Style: Normal
Font Style: Italic
Font Style: Unset
Text Transform: Capitalize
Text Transform: Lowercase
Text Transform: Uppercase
Text Transform: None
Text Transform: Unset
Text Decoration: Underline
Text Decoration: None

Layout

Layout classes

Class Output Definition Responsive?
.ta-left text-align: left;

Inline contents are aligned to the left edge.

.ta-center text-align: center;

Inline contents are aligned to the center.

.ta-right text-align: right;

Inline contents are aligned to the right edge.

.ta-justify text-align: justify;

Inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges, except for the last line.

.ws-normal white-space: normal;

Lines are broken as necessary to fill the parent.

.ws-nowrap white-space: nowrap;

Text wrapping is disabled.

.ws-pre white-space: pre;

Whitespace is preserved but text won’t wrap.

.ws-pre-wrap white-space: pre-wrap;

Whitespace is preserved but text will wrap. New lines are preserved.

.ws-pre-line white-space: pre-line;

Whitespace is preserved but text will wrap. New lines are collapsed.

.ow-normal word-break: normal;

Restores overflow wrapping behavior.

.ow-break-word overflow-wrap: break-word;

Breaks a word to a new line only if the entire word cannot be placed on its own line without overflowing.

.ow-inherit overflow-wrap: inherit;

Inherits the parent value.

.ow-intial overflow-wrap: intial;

Restores the value to the initial value set on the body.

.ow-unset overflow-wrap: unset;

Unsets any inherited behavior. Does not work in IE.

.ww-break-word word-wrap: break-word;

Deprecated, please use the equivalent ow-break-word instead. Specifies if a browser should insert line breaks within words to prevent text from overflowing its content box.

.wb-normal word-break: normal;

Restores word break behavior.

.wb-break-all word-break: break-all;

To prevent copy from overflowing its box, breaks should occur between any two characters (excluding Chinese, Japanese, and Korean text)

.wb-keep-all word-break: keep-all;

Removes word breaks for Chinese, Japanese, and Korean text. All other text behavior is the same as normal.

.wb-inherit word-break: inherit;

Inherits the parent value.

.wb-intial word-break: intial;

Restores the value to the initial value set on the body.

.wb-unset word-break: unset;

Unsets any inherited behavior. Does not work in IE.

.truncate max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Text is cropped to the width of its parent with an ellipsis.

Note: The unset property is a combination property that resets a property to its inherited value. It behaves like the inherit and the initial keywords, but it properly selects the right value for you. Unfortunately, unset is not fully supported in Internet Explorer. Because of this all unset values have the correct inherit or initial value applied.

Layout examples

<p class="ta-left">Text align: Left</p>
<p class="ta-center">Text align: Center</p>
<p class="ta-right">Text align: Right</p>
<p class="ta-justify">Justify: …</p>
<p class="ta-unset">Text align: Unset</p>

<p class="ws-normal">White-space: Normal</p>
<p class="ws-nowrap">White-space: Nowrap</p>
<p class="ws-pre">White-space: Pre</p>
<p class="ws-pre-wrap">White-space: Pre-wrap</p>
<p class="ws-pre-line">White-space: Pre-line</p>
<p class="ws-unset">White-space: Unset</p>

<p class="ow-break-word">Break word</p>

<p class="truncate">Truncate: …</p>

Text Align: Left

Text Align: Center

Text Align: Right

Text Align: Justify — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text Align: Unset

White-space: Normal

White-space: Nowrap

White-space: Pre

White-space: Pre-wrap

White-space: Pre-line

White-space: Unset

Word Wrap: Break word

Truncate: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Fonts

<p class="ff-sans"></p>
<p class="ff-serif"></p>
<p class="ff-mono"></p>
<p class="ff-inherit"></p>

Sans Serif

Arial, "Helvetica Neue", Helvetica, sans-serif

Serif

Georgia, Times New Roman, Times, serif

Monospace

Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif

Sizes

Fonts larger than .fs-body1 are reduced in size at the smallest responsive breakpoint. .fs-body1 or smaller remain fixed at their initial pixel values.

Size classes

Class Size Responsive Size
.fs-fine 11px 11px
.fs-caption 12px 12px
.fs-body1 13px 13px
.fs-body2 15px 14.3px
.fs-body3 17px 15.4px
.fs-subheading 19px 17.6px
.fs-title 21px 19.8px
.fs-headline1 27px 22px
.fs-headline2 34px 25.3px
.fs-display1 43px 28.6px
.fs-display2 55px 33px
.fs-display3 69px 36.3px
.fs-display4 99px 41.8px
.fs-category 12px 12px

Size examples

<p class="fs-fine"></p>
<p class="fs-caption"></p>
<p class="fs-body1"></p>
<p class="fs-body2"></p>
<p class="fs-body3"></p>
<p class="fs-subheading"></p>
<p class="fs-title"></p>
<p class="fs-headline1"></p>
<p class="fs-headline2"></p>
<p class="fs-display1"></p>
<p class="fs-display2"></p>
<p class="fs-display3"></p>
<p class="fs-display4"></p>
Fine
11px 11px
Caption
12px 12px
Body 1
13px 13px
Body 2
15px 14.3px
Body 3
17px 15.4px
Subheading
19px 17.6px
Title
21px 19.8px
Headline 1
27px 22px
Headline 2
34px 25.3px
Display 1
43px 28.6px
Display 2
55px 33px
Display 3
69px 36.3px
Display 4
99px 41.8px
Category
12px 12px

Category titles

Category titles help break content into digestible chunks, but are visually smaller than a traditional headline. They are meta descriptions of a content block. To further visually separate the content block from surrounding items, you can add a .has-border class.

<p class="fs-category"></p>
<p class="fs-category has-border"></p>
Category
Category Title (12px)
Category (Has Border)
Category Title (12px)

Line height

<p class="lh-xs"></p>
<p class="lh-sm"></p>
<p class="lh-md"></p>
<p class="lh-lg"></p>
<p class="lh-xl"></p>
<p class="lh-xxl"></p>

Line Height XS: This sets the line-height value to 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Line Height SM: This sets the line-height value to 1.13. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Line Height MD: This sets the line-height value to 1.26. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Line Height LG: This sets the line-height value to 1.4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Line Height XL: This sets the line-height value to 1.53. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Line Height XXL: This sets the line-height value to 1.67. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Colors

<p class="fc-light"></p>
<p class="fc-medium"></p>
<p></p>
<p class="fc-dark"></p>

Color: Light @black-500

Color: Medium @black-700

Color: Default @black-800

Color: Dark @black-900

List styling

<ol class="list-reset"></ol>
<ul class="list-ls-none"></ul>
<ul class="list-ls-disc"></ul>
<ul class="list-ls-circle"></ul>
<ul class="list-ls-square"></ul>
<ol class="list-ls-decimal"></ol>
<ul class="list-ls-unset"></ul>
  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
  5. List item 5

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
  5. List item 5

  • List item 1
  • List item 2
  • List item 3
  • List item 4
  • List item 5