Typography
Stacks provides atomic classes to override default styling of typography. Change typographic weights, styles, and alignment with these atomic styles.
These styles should only be used as overrides. They shouldn’t replace standard semantic uses of strong or em tags.
| 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. |
<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>| 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. |
|
.truncate |
max-width: 100%; |
Text is cropped to the width of its parent with an ellipsis. |
|
.v-truncate[x] |
display: -webkit-box; |
Text is cropped to the length of [x] number of lines with an ellipsis. |
<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
<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
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.
| 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 |
<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>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><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>
<p class="lh-unset">…</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.
Line Height Unset: This sets the line-height value to initial. 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.
CSS offers truncation on arbitrarily-long strings. This can help sanitize user-inputted things like bios, locations, or display names. In order for text truncation to work, it should be applied to a block-level element.
<p class="truncate">…</p>
<p class="v-truncate1">…</p>
<p class="v-truncate2">…</p>
<p class="v-truncate3">…</p>
<p class="v-truncate4">…</p>
<p class="v-truncate5">…</p>Our hyphenation classes determine when text that wraps across multiple lines is hyphenated. You can prevent hyphenation entirely, or allow the browser to automatically hypenate.
<p class="hyphens-none">…</p>
<p class="hyphens-auto">…</p>.ow-break-word.
.ow-break-word shouldn’t be necessary since breaks are implied by hyphenation rules.