Campus Design System

Appearance

Applying type ​

Utilities for controlling the typeface of an element. These includes font family, weight, size, line height and letter spacing all in one class.

INFO

Hierarchy is communicated through differences in font weight, size, line height, and letter spacing. The updated type scale organizes styles into five roles that are named to describe their purposes: Display, headline, title, label, body. The new roles are device-agnostic, allowing easier application across a variety of use cases.

💡 Tip

The typescale classes are designed to provide fluid scaling for all font-sizes and line-height, ensuring consistency and adaptability in the designs. These classes allow us to maintain harmonious spacing across the components and layouts.

To gain a deeper understanding of how these font-size and line-height values are calculated and the principles behind the fluid scaling system, we recommend referring to our dedicated documentation on the Foundation/Fluid Scaling page.

Display ​

Class NameCSS Equivalent
display-large
font-family: var(--cds-sys-typescale--brand); /* Asap */
font-size: var(--cds-sys-typescale--font-size); /* clamp(1.23rem, 0.44rem + 3.95vw, 3.6rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(1.38rem, 0.5rem + 4.42vw, 4.03rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* -0.016rem */
weight: var(--cds-sys-typescale--weight); /* 400 */
display-medium
font-family: var(--cds-sys-typescale--brand); /* Asap */
font-size: var(--cds-sys-typescale--font-size); /* clamp(1.12rem, 0.55rem + 2.87vw, 2.84rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(1.3rem, 0.63rem + 3.33vw, 3.3rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0 */
weight: var(--cds-sys-typescale--weight); /* 400 */
display-small
font-family: var(--cds-sys-typescale--brand); /* Asap */
font-size: var(--cds-sys-typescale--font-size); /* clamp(1.02rem, 0.61rem + 2.05vw, 2.25rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(1.22rem, 0.73rem + 2.45vw, 2.69rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0 */
weight: var(--cds-sys-typescale--weight); /* 400 */
Display large
Display medium
Display small
html
<div class="display-large">Display large</div>
<div class="display-medium">Display medium</div>
<div class="display-small">Display small</div>

Headline ​

Class NameCSS Equivalent
headline-large
font-family: var(--cds-sys-typescale--brand); /* Asap */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.97rem, 0.63rem + 1.72vw, 2rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(1.21rem, 0.78rem + 2.13vw, 2.49rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0 */
weight: var(--cds-sys-typescale--weight); /* 400 */
headline-medium
font-family: var(--cds-sys-typescale--brand); /* Asap */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.92rem, 0.64rem + 1.42vw, 1.77rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(1.18rem, 0.81rem + 1.83vw, 2.28rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0 */
weight: var(--cds-sys-typescale--weight); /* 400 */
headline-small
font-family: var(--cds-sys-typescale--brand); /* Asap */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.88rem, 0.65rem + 1.17vw, 1.58rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(1.17rem, 0.86rem + 1.55vw, 2.1rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0 */
weight: var(--cds-sys-typescale--weight); /* 400 */
Headline large
Headline medium
Headline small
html
<div class="headline-large">Headline large</div>
<div class="headline-medium">Headline medium</div>
<div class="headline-small">Headline small</div>

Title ​

Class NameCSS Equivalent
title-large
font-family: var(--cds-sys-typescale--brand); /* Asap */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.84rem, 0.65rem + 0.93vw, 1.4rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(1.06rem, 0.82rem + 1.2vw, 1.78rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0 */
weight: var(--cds-sys-typescale--weight); /* 400 */
title-medium
font-family: var(--cds-sys-typescale--brand); /* Open Sans */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.72rem, 0.63rem + 0.43vw, 0.98rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(1.08rem, 0.95rem + 0.67vw, 1.48rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0.009rem */
weight: var(--cds-sys-typescale--weight); /* 600 */
title-small
font-family: var(--cds-sys-typescale--brand); /* Open Sans */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.69rem, 0.63rem + 0.32vw, 0.88rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(0.98rem, 0.89rem + 0.45vw, 1.25rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0.006rem */
weight: var(--cds-sys-typescale--weight); /* 600 */
Title large
Title medium
Title small
html
<div class="title-large">Title large</div>
<div class="title-medium">Title medium</div>
<div class="title-small">Title small</div>

Body ​

Class NameCSS Equivalent
body-large
font-family: var(--cds-sys-typescale--brand); /* Open Sans */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.72rem, 0.63rem + 0.43vw, 0.98rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(1.08rem, 0.95rem + 0.67vw, 1.48rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0.031rem */
weight: var(--cds-sys-typescale--weight); /* 400 */
body-medium
font-family: var(--cds-sys-typescale--brand); /* Open Sans */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.69rem, 0.63rem + 0.32vw, 0.88rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(0.98rem, 0.89rem + 0.45vw, 1.25rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0.016rem */
weight: var(--cds-sys-typescale--weight); /* 400 */
body-small
font-family: var(--cds-sys-typescale--brand); /* Open Sans */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.65rem, 0.61rem + 0.22vw, 0.78rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(0.87rem, 0.82rem + 0.27vw, 1.03rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0.025rem */
weight: var(--cds-sys-typescale--weight); /* 400 */
Body large
Body medium
Body small
html
<div class="body-large">Body large</div>
<div class="body-medium">Body medium</div>
<div class="body-small">Body small</div>

Body ​

Class NameCSS Equivalent
body-large
font-family: var(--cds-sys-typescale--brand); /* Open Sans */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.72rem, 0.63rem + 0.43vw, 0.98rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(1.08rem, 0.95rem + 0.67vw, 1.48rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0.031rem */
weight: var(--cds-sys-typescale--weight); /* 400 */
body-medium
font-family: var(--cds-sys-typescale--brand); /* Open Sans */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.69rem, 0.63rem + 0.32vw, 0.88rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(0.98rem, 0.89rem + 0.45vw, 1.25rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0.016rem */
weight: var(--cds-sys-typescale--weight); /* 400 */
body-small
font-family: var(--cds-sys-typescale--brand); /* Open Sans */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.65rem, 0.61rem + 0.22vw, 0.78rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(0.87rem, 0.82rem + 0.27vw, 1.03rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0.025rem */
weight: var(--cds-sys-typescale--weight); /* 400 */
Body large
Body medium
Body small
html
<div class="body-large">Body large</div>
<div class="body-medium">Body medium</div>
<div class="body-small">Body small</div>

Label ​

Class NameCSS Equivalent
label-large
font-family: var(--cds-sys-typescale--brand); /* Open Sans */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.65rem, 0.61rem + 0.22vw, 0.78rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(0.94rem, 0.88rem + 0.28vw, 1.11rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0.006rem */
weight: var(--cds-sys-typescale--weight); /* 600 */
label-medium
font-family: var(--cds-sys-typescale--brand); /* Open Sans */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.62rem, 0.6rem + 0.12vw, 0.69rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0.031rem */
weight: var(--cds-sys-typescale--weight); /* 600 */
label-small
font-family: var(--cds-sys-typescale--brand); /* Open Sans */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.59rem, 0.58rem + 0.03vw, 0.61rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(0.86rem, 0.85rem + 0.05vw, 0.89rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0.031rem */
weight: var(--cds-sys-typescale--weight); /* 600 */
label-overline
font-family: var(--cds-sys-typescale--brand); /* Open Sans */
font-size: var(--cds-sys-typescale--font-size); /* clamp(0.62rem, 0.6rem + 0.12vw, 0.69rem) */
line-height: var(--cds-sys-typescale--line-height); /* clamp(0.83rem, 0.8rem + 0.15vw, 0.92rem) */
letter-spacing: var(--cds-sys-typescale--tracking); /* 0.2rem */
weight: var(--cds-sys-typescale--weight); /* 300 */
Label large
Label medium
Label small
Label overline
html
<div class="label-large">Label large</div>
<div class="label-medium">Label medium</div>
<div class="label-small">Label small</div>
<div class="label-overline">Label overline</div>

How to use ​

These 16 classes combine easily in consistent layouts:

CEO
Alice Johnson
alice.johnson@company.com
About
Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. <span class="label-large">Est in quis eu dolore</span> occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. <span class="body-large">Dolor et ad sint</span> voluptate sunt elit mollit officia ad enim sit consectetur enim.*
*Some super fancy footnote

Source:

html
<div class="max-w-full w-s m-i-auto surface elevation-1 corner-m stack  p-i-s p-b-xs">
  <div class="flex items-center gap-s">
    <img class="icon-size-3xl corner-full" :src="first.profilePicture" />
    <div>
      <div class="label-overline">{{ first.role }} </div>
      <div class="body-large">{{ first.fullName }} </div>
      <div class="label-medium">{{ first.email }}</div>
    </div>
  </div>
  <div>
    <div class="stack stack-space-3xs">
      <h6>About</h6>
      <div class="body-medium">Nulla dolor velit ...<sup>*</sup></div>
    </div>
  </div>
  <div class="label-small on-surface-variant"> <sup>*</sup>Some super fancy footnote </div>
</div>