Typography Utility Classes
This page is a quick reference for the .nys-font-* utility classes available in the NYS Design System. Each class bundles font family, size, line height, and letter spacing for common text roles.
For font concepts, tokens, installation, and best practices, see Typography Foundations.
Utility Classes
| Class Name | Description | Example |
|---|---|---|
.nys-font-body-xs |
Extra small body text | Discover the latest initiatives happening across New York State. |
.nys-font-body-sm |
Small body text | Explore outdoor adventures, from the Adirondacks to Niagara Falls. |
.nys-font-body-md |
Medium body text | Welcome to the official website for New York State, where you’ll find services, programs, and resources for residents and businesses. |
.nys-font-h1 |
Heading 1 | Experience the Empire State |
.nys-font-h2 |
Heading 2 | Explore New York City and Beyond |
.nys-font-h3 |
Heading 3 | Parks, Trails, and Natural Wonders |
.nys-font-h4 |
Heading 4 | Plan Your Visit Today |
.nys-font-h5 |
Heading 5 | Join Our Community |
.nys-font-h6 |
Heading 6 | Stay Informed with NYS Updates |
.nys-font-ui-xs |
Extra small UI text | Next |
.nys-font-ui-sm |
Small UI text | Apply Now |
.nys-font-ui-md |
Medium UI text | View All Services |
.nys-font-ui-lg |
Large UI text | Explore Programs |
.nys-font-ui-xl |
Extra large UI text | Get Started |
.nys-font-display-sm |
Small display text | Discover the beauty of upstate New York. |
.nys-font-display-md |
Medium display text | Welcome to the Empire State |
.nys-font-display-lg |
Large display text | Find Your Next Adventure |
.nys-font-display-xl |
Extra large display text | New York State: It’s All Here |
.nys-font-agency |
Agency-specific font style | New York State Department of Transportation |
Edit this page on GitHub (Permissions required)
Last updated: June 18, 2026