Typography
The Typography of the Opportunity Standard follows guidance from the U.S. Web Design System (USWDS). Typographic tokens are defined in the Pattern Elements tokens configuration for each screen breakpoint and major typography tags including the base HTML element, headings, blockquotes, paragraphs, lists, table cells, and small type. Typographic features such as font families, weights, and styles can be assigned using Tailwindcss utilities as well.
Demonstration
Primary Font
'Rubik', sans-serif
Secondary Font
'Rubik', sans-serif
Code
Opportunity Standard uses the open license web font Public Sans, created and provided by the USWDS team. It is imported via Google Fonts.
There are two token slots available for two different font faces, primary and secondary. However, having a different font for the secondary token is optional.
| Token | Font Family | Description |
|---|---|---|
| Primary | 'Rubik', sans-serif | Designated for headings and some user interface typography. |
| Secondary | 'Rubik', sans-serif | Designated for buttons and body copy (lists/paragraphs). |
Desktop screen size (1112px), 22px base font size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Tablet screen size (768px), 20px base font size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Mobile screen size (480px), 18px base font size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Small screen size (400px), 16px base font size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Font sizing is based on REM units with a different pixel base value for each major screen size. Unless a fixed pixel value is assigned to a font size, width, or height attribute, it will appear as a size relative to the base font size for every screen size breakpoint.
Demonstration
Heading level 1, <h1> or .h1
Find help in NYC with food, money, housing, work and more on ACCESS NYC.
Heading level 2, <h2> or .h2
Find help in NYC with food, money, housing, work and more on ACCESS NYC.
Heading level 3, <h3> or .h3
Find help in NYC with food, money, housing, work and more on ACCESS NYC.
Heading level 4, <h4> or .h4
Find help in NYC with food, money, housing, work and more on ACCESS NYC.
Heading level 5, <h5> or .h5
Find help in NYC with food, money, housing, work and more on ACCESS NYC.
Heading level 6, <h6> or .h6
Find help in NYC with food, money, housing, work and more on ACCESS NYC.
Code
Headings should prefix longer blocks of text or content. If a heading is not followed by content, it may not be necessary to use.
Heading typography sets can be applied as CSS utility classes to non-heading text or other headings; h1, h2, etc. However, semantic and visual heading hierarchy should still be maintained.
Pages with many headings and large amounts of text may be able to use Accordions, Active Navigation, Side Navigation, or Step by Step patterns to make the information easer to read or scan.
Demonstration
The Health Corps connects NYCHA residents to training and work experience.
Code
Blockquotes are used for highlighting information upfront or for quoting important information within the main body of content it is featured in.
The Blockquote typography set can be applied to non-blockquote elements as a CSS utility class; blockquote.
Demonstration
Code
The Small tag can be used for low-priority or foot note content.
The Small typography set can be applied to non-small elements as a CSS utility class; small.