<h1 class="h1">The Mayor’s Office for Economic Opportunity</h1>

Use the <h1> tag for semantic hierarchy. Using the correct markup for text hierarchy is important for assistive technologies. The .h1 class can be used to style type tags as <h1> tags if is better for them to be visually styled that way.

<h2 class="h2">The Mayor’s Office for Economic Opportunity helps the City use evidence and innovation to reduce poverty and increase equity</h2>

Use the <h2> tag for semantic hierarchy or the .h2 class for visual styling.

<h3 class="h3">The Mayor's Office for Economic Opportunity, NYC Opportunity for short, was formally announced in May, 2017</h3>

Use the <h3> tag for semantic hierarchy or the .h3 class for visual styling.

<h4 class="h4">All of the work of our office is guided by our commitment to 3 core principles: Equity, Evidence, and Innovation</h4>

Use the <h4> tag for semantic hierarchy or the .h4 class for visual styling.

<h5 class="h5">Put your data, design, digital, and policy skills to work to improve the lives of millions of New Yorkers</h5>

Use the <h5> tag for semantic hierarchy or the .h5 class for visual styling.

<h6 class="h6">What We Do: Research, Service Design, Digital Products, Data Integration, and Programs & Evaluation</h6>

Use the <h6> tag for semantic hierarchy or the .h6 class for visual styling.

<div>
  <p>Brief overviews of NYC Opportunity's programmatic focus areas are below, and more information can also be found under "Special Initiatives".</p>
  <small class="small">Programs identified as "Current Portfolio" are actively managed and/or funded by NYC Opportunity as of May 2017. Programs without this label may be active in the City, but are no longer funded or managed by NYC Opportunity, or they may have been discontinued with lessons incorporated into ongoing work.</small>
</div>

The <small> tag is used to define text that is smaller than the body font. Use the <small> tag or the .small class for visual styling.

<blockquote class="blockquote">
  <p> Finding services in my area is difficult</p>
  <footer>— Research Participant,<cite>Red Hook</cite>
  </footer>
</blockquote>

The <blockquote> tag is used to indicate the quotation of a large section of text from another source. Use the <blockquote> tag or the .blockquote class for visual styling.

<h1 class="jumbo">The Mayor’s Office for Economic Opportunity helps the City use evidence and innovation to reduce poverty and increase equity.</h1>

The .jumbo class is the largest heading size reserved for emphasized headings. Use the class for visual styling.

<div>
  <h1>Helvetica Neue Pro</h1>
  <p>IBM Plex Sans</p>
</div>

NYCO Patterns uses two sans-serif font-families by default; IBM Plex and Helvetica.

• Helvetica is not included as a dependency as it requires a license to host and distribute. The display of Helvetica depends on the presence of the font family installed on the user’s system and will fall back to the default system sans-serif if not present.

• IBM Plex is an open source font and is included as a dependency.

Body text such as <p> tags are set to IBM Plex Sans while <h1>, <h2>, <h3>, <jumbo> and <blockquote> are all set to Helvetica.

Installing Fonts (Self-hosting)

To install fonts in a project, copy font files in the /dist/fonts directory to the following path relative to the stylesheet; ../fonts/....

styles/nyco.css
fonts/IBM-Plex-Sans/...

If compiling styles from the source, the path to font family files can be changed using the asset paths variable in your main Sass stylesheet.

Google Fonts

IBM Plex is also available via Google Fonts and can be imported with the following HTML <link> tag;

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Or the following CSS @import rule;

<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
</style>

Be sure to check Google Fonts for the latest import methods.

Custom Font Families

Custom Font Families can be used with an extended stylesheet in your project. Fonts can be added either by self-hosting and using custom CSS @font-face declarations or importing from Google Fonts (or any other CDN) using the CSS @import method.

After the desired font family is imported, the default font-family declarations can be overridden in the custom stylesheet using the following CSS.

/* Replace IBM Plex */
html, body {
  font-family: 'Secondary Custom Font'
}

/* Replace Helvetica */
h1, .h1, h2, .h2, h3, .h3,
blockquote, .blockquote, .jumbo {
  font-family: 'Primary Custom Font'
}