Fonts and typography
Consistent use of typography reinforces Hennepin County's brand identity.
Using consistent typography and logical hierarchy makes content clear and scannable. Our text sizes, styles, and layouts balance content and foster familiarity.
For more information on writing content for websites, visit Writing for accessibility.
GitHub library
When possible, use the Hennepin County Design System GitHub for all heading and text styling. Text size and typography tokens are made up of specific font values, including font family, font size, and line height.Each style is optimized for font size and spacing. These foundation decisions are built-in into the typography tokens and will ensure your application will always use the most recent typography styles whenever you update.
Hennepin County brand typefaces
Inter
Our corporate typeface for digital spaces is Inter. It’s a flexible, accessible type that helps to convey a warm and friendly interaction. It aligns with our communication values of being clear, direct, and accessible.
Newsreader
This is our typeface used for editorial headlines. It’s used to help readers tell the difference between task-based content and storytelling. It is not offered within the design system.
Headings
Use heading tags, such as <h1>, to determine the headings on the page. Use the heading classes to style them to be appropriate sizes.
For example, a component like an accordion might use an <h2> heading tag for accessibility, but can use the class hc-heading-xxs to control its visual appearance.
Headings have different sizes between desktop and mobile.
| Sample | Class name | Desktop size, mobile size | Usage |
|---|---|---|---|
| Aa | hc-heading-xl |
64px, 48px | H1 and page titles |
| Aa | hc-heading-l |
48px, 40px | H2 and section headers |
| Aa | hc-heading-m |
36px, 32px | H3 and component headings |
| Aa | hc-heading-s |
28px, 28px | H4 and component headings |
| Aa | hc-heading-xs |
24px, 24px | H5 and component headings |
| Aa | hc-heading-xxs |
22px, 22px | H6 and component headings |
Paragraphs
The default paragraph size is 18px.
You can also add classes to add larger or smaller paragraphs to create hierarchy on a page.
Sizes are the same between desktop and mobile.
| Sample | Class name | Size | Usage |
|---|---|---|---|
| Aa | hc-heading-xl |
18px | Paragraph text |
| Aa | hc-heading-l |
22px | Lead paragraphs |
| Aa | hc-heading-m |
16px | Footnotes, legal text |
Form field typography
Field labels are sized to 18px and use a medium font weight to add emphasis. For complex fields nested under legends or other fields, you can use other classes to create hierarchy.
Sizes are the same between desktop and mobile.
| Sample | Class name | Size | Usage |
|---|---|---|---|
| Aa | hc-field-label |
18px | H1 and page titles |
| Aa | hc-text-hint |
18px | H2 and section headers |
| Aa | hc-text-error |
18px | H3 and component headings |
Responsive design for typography
For styling typography for responsive web design, use relative units like em and rem. Avoid using absolute measurements like pixels. Pixels are unscalable measurements based on the display's resolution. Em and rem are both scalable units of font size, relative to pixel size.
Changing pixels to flexible units allows text to automatically adjust for different devices. This scalability also lets users control font sizes on their personal devices. It allows for more accessible and enjoyable reading experiences for everyone.
To learn more about responsive typography and line spacing, visit WCAG specifying line spacing in CSS.