Typography

Font size tokens

We use the Utopia fluid type calculator to create our font size tokens. These font size tokens are then applied to our different levels of headings and other typography.

$font-size-step--2: clamp(0.64rem, 0.7134rem + -0.0947vi, 0.6944rem);
$font-size-step--1: clamp(0.8rem, 0.8449rem + -0.058vi, 0.8333rem);
$font-size-step-0: clamp(1rem, 1rem + 0vi, 1rem);
$font-size-step-1: clamp(1.2rem, 1.1826rem + 0.087vi, 1.25rem);
$font-size-step-2: clamp(1.44rem, 1.3974rem + 0.213vi, 1.5625rem);
$font-size-step-3: clamp(1.728rem, 1.6497rem + 0.3915vi, 1.9531rem);
$font-size-step-4: clamp(2.0736rem, 1.9457rem + 0.6397vi, 2.4414rem);
$font-size-step-5: clamp(2.4883rem, 2.2923rem + 0.9799vi, 3.0518rem);
$font-size-step-6: clamp(2.986rem, 2.6977rem + 1.4412vi, 3.8147rem);

`<h1>`, `.h1`	$font-size-step-4	clamp(2.0736rem, 1.9457rem + 0.6397vi, 2.4414rem)
`<h2>`, `.h2`	$font-size-step-3	clamp(1.728rem, 1.6497rem + 0.3915vi, 1.9531rem)
`<h3>`, `.h3`	$font-size-step-2	clamp(1.44rem, 1.3974rem + 0.213vi, 1.5625rem)
`<h4>`, `.h4`	$font-size-step-1	clamp(1.2rem, 1.1826rem + 0.087vi, 1.25rem)
`<h5>`, `.h5`	$font-size-step-0	1rem
`<h6>`, `.h6`	$font-size-step-0	1rem

Display 1 Heading

The <h1 class="header-xl"> class will be deprecated in a later version. Use <h1 class="display-1"> instead.

Sample H1 Text

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat, eveniet! Fugit, veniam sunt iure expedita vel fugiat, sapiente in, eos tenetur sed libero laborum? Quos culpa aperiam nulla doloremque sequi.

Unordered list item
Another unordered list item
One more unordered list item

Sample H2 Text

Text wrapped in a strong and paragraph tag- sit amet consectetur adipisicing elit. Aperiam officiis ad culpa totam voluptatem error iusto dolores rem facere, natus minus optio soluta facilis dignissimos suscipit illum, aliquid quia maxime?

Sample H3 Text

Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore neque impedit dicta! Veritatis fuga quam modi quasi dicta autem, veniam ducimus, impedit doloribus cumque commodi expedita nam hic nesciunt ad.

Sample H4 Text

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo facere dolorum ducimus iste laborum ad aliquam voluptate esse. Non recusandae officiis deserunt necessitatibus voluptatem quo maxime ab aut tempora rerum?

Sample H5 Text

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor magni iusto fugiat cumque, odit natus quasi placeat illum facere quas, eaque officia corrupti explicabo quod, voluptate saepe modi atque. Consequuntur!

Ordered list item
Another ordered list item
One more ordered list item

Sample H6 Text

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore reprehenderit est dolores. Optio, deleniti maxime libero et laudantium illo molestias voluptates recusandae voluptatem harum aliquam illum dolores doloribus. Dolores, corporis.

Font Utility Classes

For when you want to match the font styling of a heading but cannot use the associated HTML element.

Class Name	Example text	rem	pixels
`.h1`	This is sample text	1.625	26
`.h2`	This is sample text	1.5	24
`.h3`	This is sample text	1.25	20
`.h4`	This is sample text	1.125	18
`.h5`	This is sample text	1.125	18
`.h6`	This is sample text	1	16

Text Utilities

Documentation and examples for common text utilities to control alignment, wrapping, weight, and color.

Brow text

Use the .text-brow utility class to get all the brow text styling.

If you need a different text color when using this utility, use a text color utility, e.g. .text-success (example below), to override the default.

Brow text

Text columns

When design calls for text to be broken into columns, but there isn't static text, you can use text-columns-*. The text will break into the number of columns desired using CSS columns. The options are 2, 3, 4, and unset.

This utility class is also responsive, so it can be used for creating columns at certain breakpoints, e.g. text-columns-md-2.

Restricted-use data files are rendered in situations where removing potentially identifying information would significantly impair the analytic potential of the data, or in cases where data contain highly sensitive personal information and cannot be shared as a public-use file. In these circumstances, DSDR provides access to a restricted-use version that retains the confidential data but requires controlled conditions for accessing them.

Depending on the requirements of the restricted-use data, access is provided by secure download to an approved local computing system, the Virtual Data Enclave (VDE) where researchers access the data remotely, or the Physical Data Enclave (PDE) where researchers access the data in person at the University of Michigan. Researchers must complete an application process and agree to follow strict legal and electronic requirements for maintaining data confidentiality before access is granted.

Color utilities for text elements

Text Utility Classes
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50

Text alignment utilities

Classes	html
class="text-start"	Start aligned text on all viewport sizes.
class="text-center"	Center aligned text on all viewport sizes.
class="text-end"	End aligned text on all viewport sizes.
class="text-sm-start"	Start aligned text on viewports sized SM (small) or wider.
class="text-md-start"	Start aligned text on viewports sized MD (medium) or wider.
class="text-lg-start"	Start aligned text on viewports sized LG (large) or wider.
class="text-xl-start"	Start aligned text on viewports sized XL (extra-large) or wider.

Typography

Font size tokens

Display 1 Heading

Sample H1 Text

Sample H2 Text

Sample H3 Text

Sample H4 Text

Sample H5 Text

Sample H6 Text

Font Utility Classes

Brow text

Text columns

Color utilities for text elements

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Text alignment utilities