Typography

Optimized typographic scale presents the design and content clearly and efficiently.

Too many type sizes and styles at once can spoil any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.

Design System Font

The Unifi Design System font is Open Sans and will not be automatically loaded by the library. You are responsible for loading all fonts used in your application.

Open Sans is freely available via Google Fonts.

Here is a sample of how to load Open Sans via the link method with required font weights:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap">

Samples

Heading title styles can be applied to other elements using the class format of .u-typography--[level] such as .u-typography--h2.

<div>
  <h1>
    h1. Heading
  </h1>
  <h2>
    h2. Heading
  </h2>
  <h3>
    h3. Heading
  </h3>
  <h4>
    h4. Heading
  </h4>
  <h5>
    h5. Heading
  </h5>
  <h6>
    h6. Heading
  </h6>
  <p class="u-typography--subtitle1">
    subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
  </p>
  <p class="u-typography--subtitle2">
    subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
  </p>
  <p class="u-typography--body1">
    body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde
    suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam
    dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
  </p>
  <p>
    body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde
    suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam
    dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
  </p>
  <span class="u-typography--button"> button text </span><br />
  <span class="u-typography--caption"> caption text </span><br />
  <span class="u-typography--overline"> overline text </span><br />
  <span class="u-typography--srOnly">
    This text is only visible to screen readers
  </span>
</div>

<div>
  <h1>
    h1. Heading
  </h1>
  <h2>
    h2. Heading
  </h2>
  <h3>
    h3. Heading
  </h3>
  <h4>
    h4. Heading
  </h4>
  <h5>
    h5. Heading
  </h5>
  <h6>
    h6. Heading
  </h6>
  <p class="u-typography--subtitle1">
    subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
  </p>
  <p class="u-typography--subtitle2">
    subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
  </p>
  <p class="u-typography--body1">
    body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde
    suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam
    dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
  </p>
  <p>
    body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde
    suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam
    dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
  </p>
  <span class="u-typography--button"> button text </span><br />
  <span class="u-typography--caption"> caption text </span><br />
  <span class="u-typography--overline"> overline text </span><br />
  <span class="u-typography--srOnly">
    This text is only visible to screen readers
  </span>
</div>

Typography Ink Palette

Apply contextual "ink" colors from the palette with utility classes such as the following. Review the full range of options in the Unifi Web Theming documentation.

<div class="u-grid-container u-grid-spacing--3">
  <div class="u-grid-item u-xs-12">
    <h3 class="u-theme--primary">.u-theme--primary</h3>
  </div>
  <div class="u-grid-item u-xs-12">
    <h3 class="u-theme--text-secondary-on-light">.u-theme--text-secondary-on-light</h3>
  </div>
  <div class="u-grid-item u-xs-12 u-theme--secondary-background">
    <h3 class="u-theme--on-secondary">.u-theme--on-secondary</h3>
  </div>
  <div class="u-grid-item u-xs-12 demo-background-dark">
    <h3 class="u-theme--text-primary-on-dark">.u-theme--text-primary-on-dark</h3>
  </div>
</div>

<div class="u-grid-container u-grid-spacing--3">
  <div class="u-grid-item u-xs-12">
    <h3 class="u-theme--primary">.u-theme--primary</h3>
  </div>
  <div class="u-grid-item u-xs-12">
    <h3 class="u-theme--text-secondary-on-light">.u-theme--text-secondary-on-light</h3>
  </div>
  <div class="u-grid-item u-xs-12 u-theme--secondary-background">
    <h3 class="u-theme--on-secondary">.u-theme--on-secondary</h3>
  </div>
  <div class="u-grid-item u-xs-12 demo-background-dark">
    <h3 class="u-theme--text-primary-on-dark">.u-theme--text-primary-on-dark</h3>
  </div>
</div>

Typography

Design System Font

Samples

Typography Ink Palette

Properties

<Typography />