Font Families

Source: src/utilities/font/font

ACCESS NYC uses Google Noto Fonts to support the Patterns in multiple languages. It includes sans-serif and serif variations for over 800 languages and is designed to appear equal in weight and size across languages. This makes the multilingual templates easier to develop and non-English content easier to read.

Font Family Noto Sans

Font Family Noto Serif

<article style="background-color: #3f51b5">
  <h1 class="font-sans text-color-white p-4 m-0">Font Family Noto Sans</h1>
  <h1 class="font-serif text-color-white p-4 m-0">Font Family Noto Serif</h1>
</article>

Font Smoothing

Source: src/utilities/font/font-smoothing

Font smoothing can be controlled through the .font-smooth and .font-smooth-auto utilities. This will modify the aliasing for Webkit- and Mozilla-based browsers only. This utility works the best with light-colored text on dark backgrounds.

Font Smooth

Font Smooth Auto

<article>
  <div class="bg-color-blue-dark font-smooth">
    <h1 class="text-color-white m-0 p-4">Font Smooth</h1>
  </div>
  <div class="color-dark-background font-smooth-auto">
    <h1 class="m-0 p-4">Font Smooth Auto</h1>
  </div>
</article>

Font Serif/Sans-Serif

Source: src/utilities/font/font-serif-sans

Using the .font-serif or .font-sans utility will render the serif or san-serif font of the current language selected.

Font Serif

Font Sans

<article>
  <h1 class="font-serif m-0 p-4">Font Serif</h1>
  <h1 class="font-sans m-0 p-4">Font Sans</h1>
</article>