Typography

Our typefaces

Our typography draws inspiration from classic newspaper design: confident, energetic, and built for fast-paced publishing, while remaining grounded in a modern, accessible foundation.

Each typeface plays a distinct role:

• American Grotesk Compressed adds impact to short, high-level headlines. Its bold, narrow form commands attention and sets the tone.
• American Grotesk provides structure and flexibility across heading levels, helping establish a clear visual hierarchy.
• Inter is used for all body text, interface elements, and internal communication. It’s highly legible, neutral, and optimized for screens.

Together, these typefaces support our personality (tone of voice). They help us communicate with clarity and confidence across every touchpoint.

Headline styles

American Grotesk Compressed is used for bold, high-impact headlines that grab attention and set the tone. Inspired by classic newspaper mastheads and front pages, this style brings urgency, energy, and clarity to our most important content.

Key guidelines

• Always use all caps. This reinforces the strength and visual authority of the typeface.
• Use Black (900) weight. This is essential for achieving the bold, confident presence that defines our headline style.
• Keep it short and punchy. Ideal headlines are just a few words long, concise and direct.
• Use where emphasis is needed. While typically reserved for top-level headlines, it’s fine to use multiple compressed headlines on a page if the visual hierarchy is clear and intentional.
• Avoid long strings of text. If a headline requires more than a line or two, use standard American Grotesk instead.

Why all caps?

Using all caps strengthens the visual impact, making the headline stand out without the need for excessive decoration or manipulation. This harkens back to classic newspaper design, where bold, uppercase letters were used to draw the reader’s attention instantly.

A note on hierarchy

American Grotesk Compressed should clearly stand out on the page. If multiple headlines use this style, ensure they are balanced in scale, spacing, and layout. It’s a tool for creating rhythm and visual weight, and should be used with intention.

Subheadings styles

American Grotesk is used for subheadings, providing structure and rhythm throughout a page. It supports the boldness of our compressed headlines with clarity and control, guiding readers through sections and stories with confidence.

Key guidelines

• Use for H2 to H5. These styles define the internal structure of a page and help break content into clear sections.
• Default to Medium weight. Use Regular (400) when a lighter or more subtle tone is needed, such as for longer subheadings or supporting labels.
• Use sentence case. Subheadings should feel natural and conversational, without excessive styling.
• Keep it short and purposeful. Subheadings are not meant to carry full sentences. They should introduce or group content in a way that is easy to scan.
• Maintain consistent spacing. Each level of subheading should be clearly separated from the content above and below it.

Occasional use in body copy

While American Grotesk is primarily used for subheadings, it can appear within body content when there’s a clear visual or editorial purpose — such as calling attention to a specific phrase, label, or intro at the start of a page. In these cases:

• Use Regular weight for longer phrases or sentences to maintain balance with surrounding text.
• Ensure it feels intentional and doesn’t disrupt the reading flow.
• Avoid overuse; this should be a considered design choice.

A note on hierarchy

Subheadings create a clear visual path through content. Use each level with intention, and avoid skipping levels or stacking headings without a clear purpose. When used alongside American Grotesk Compressed headlines, the subheading style offers a steady, grounded counterpoint that reinforces structure.

Body text styles

Inter is our primary typeface for body copy, interface elements, and internal communications. Chosen for its legibility, neutrality, and versatility, Inter ensures that extended content remains clear and accessible across all platforms. It is also the font used throughout the Newspack UI, providing consistency and clarity in the interface design.

Key guidelines

• Use Inter for all body text. This includes paragraphs, captions, UI labels, and other long-form content.
• Exclusively use Inter for internal documents. This applies to tools like Google Docs and Google Slides.
• Ensure readability. Maintain sufficient line spacing and clear text color to support ease of reading.
• Support the overall hierarchy. Inter complements the bold impact of American Grotesk Compressed headlines and the structured tone of American Grotesk subheadings.

A note on usage

Inter is designed to support clear and direct communication. Its neutral character allows the content to speak for itself while reinforcing our empowering and trustworthy tone.

Marketing and editorial exceptions

While our typography system is designed for consistency across product and brand, there are moments in marketing and editorial contexts where more expressive or flexible use of type is appropriate.

These exceptions should feel intentional and aligned with the Newspack personality without compromising readability or structure.

When exceptions are appropriate

• Hero headlines in marketing can use American Grotesk Compressed more freely, including for longer phrases or stylised layouts.
• American Grotesk Compressed can appear in oversized formats for visual emphasis in print, or social.
• Standard American Grotesk may be used at larger scales within paragraphs (for example, an opening line or pull quote) to add weight or character.

Design with discipline

• American Grotesk Compressed must always be set in all caps, even in marketing contexts.
• The typography should always support clarity and purpose.
• Any deviation from core styles should be intentional and rooted in the message being delivered.
• Use the Figma file as your base, and build exceptions from there, not outside of it. You’ll find the link in the Practical details and resources section below.

Do’s and don’ts

Clear principles help keep our typography consistent, purposeful, and effective. Use this section as a quick reference when creating or reviewing work.

Do

• Use American Grotesk Compressed Black in all caps for bold, high-impact headlines.
• Keep headlines short and punchy to maximise clarity and visual weight.
• Use American Grotesk Medium or Regular for subheadings, depending on tone and context.
• Use Inter for all body text and in-product UI.
• Maintain clear visual hierarchy through size, weight, and spacing, especially when using multiple headline styles on a page.
• Follow the structure and spacing defined in Figma to ensure consistency across platforms.

Don’t

• Don’t use American Grotesk Compressed for long headlines or paragraphs in core product or editorial layouts. It’s designed for bold impact, not extended reading. Exceptions may apply in marketing, where layout and hierarchy are handled with care.
• Don’t use all caps outside of Compressed headlines. It weakens the hierarchy and reduces readability.
• Don’t mix weights or styles arbitrarily. Each choice should support a clear purpose.
• Don’t treat American Grotesk and Inter interchangeably. They have distinct roles in the system.
• Don’t invent new text styles outside of what’s defined in Figma, unless working on a deliberate marketing exception.

Practical details and resources

For details like font sizes, line heights, spacing, and responsive behavior, use our Figma typography styles. This is the single source of truth for implementation and should be referenced when building or reviewing designs.

Things to keep in mind

• Consistency is key. Stick to the styles outlined here to create a cohesive, professional experience across products, pages, and platforms.
• Visual hierarchy comes first. Use typography to guide the eye. When in doubt, simplify. Fewer sizes and clearer contrast lead to stronger design.
• Use with intention. The system is flexible, but every choice should serve the content. This includes decisions about casing, line height, and font weight.

Need help?

If you’re unsure whether a style choice fits the system, ask the design team on the Slack channel #newspack-design.