Typography - Stack Overflow Design System

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: 400;	Normal font weight. Maps to 400.
`.fw-medium`	font-weight: 500;	Medium font weight. Maps to 500.
`.fw-bold`	font-weight: 600;	Bold font weight. Maps to 600.
`.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.

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
`.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-anywhere`	overflow-wrap: anywhere;	Breaks a string of characters at any point when no other acceptable break points are available and does not hyphenate the break.
`.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.
`.break-word`	word-break: break-word; overflow-wrap: break-word; hyphens: auto;	A utility class combining all word-break strategies when you absolutely must break a word.
`.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.

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="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

Break word: MethionylglutaminylarginylhionylglutaminylargintyrosylglutamylmethionylglutaminylarginyltyrlarginyltyrosylglutamylMethionylglutaminylarginyltyrosylglutamylnyltyrosylserinemethionylglutaminylargiglutamylmethionyosylglutamylmethionylglutaminylglutaminylarginyltyrosylglutamylmethionylglutaminylarginyltyrosylglutamylmetyltyrosylglutamylserine

Fonts

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

Sans Serif

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Serif

Georgia, Cambria, "Times New Roman", Times, serif

Monospace

"SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

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	Line Height	Responsive Size
`.fs-fine`	`12px`	`1.36`	`12px`
`.fs-caption`	`13px`	`1.40`	`13px`
`.fs-body1`	`14px`	`1.40`	`14px`
`.fs-body2`	`16px`	`1.40`	`15px`
`.fs-body3`	`18px`	`1.40`	`16px`
`.fs-subheading`	`20px`	`1.40`	`18px`
`.fs-title`	`22px`	`1.40`	`20px`
`.fs-headline1`	`28px`	`1.40`	`23px`
`.fs-headline2`	`36px`	`1.40`	`26px`
`.fs-display1`	`46px`	`1.34`	`29px`
`.fs-display2`	`58px`	`1.28`	`34px`
`.fs-display3`	`72px`	`1.20`	`37px`
`.fs-display4`	`100px`	`1.18`	`43px`