in progress

Overview

The IM Design System typography follows Illustrative Mathematics' brand and communications guidelines. Our type system uses two primary typefaces: Poppins for headings and Nunito for body text. This pairing has been carefully selected to align with our brand identity while ensuring readability and accessibility across all digital platforms.

Poppins - Brand Heading Font

Poppins serves as our primary heading font, as specified in IM's brand guidelines. Its geometric design embodies our commitment to clarity and precision in mathematics education, while maintaining the approachable, modern character that defines our brand voice.

Nunito - Brand Body Font

Nunito is IM's official body text font, chosen to complement Poppins while maintaining our brand's approachable and educational character. Its balanced design supports extended reading and complex mathematical content, making it ideal for our educational materials and digital platforms.

Do not confuse Nunito with its sans-serif counterpart, Nunito Sans.

Responsive Typography

These utility css classes and sass mixins set the font-size for desktop, tablet, and mobile. For all but headings, the default font-size is set for mobile and then at breakpoint-xs-min (tablet min), fonts increase once for all screens larger than mobile. For headings, the default is set for mobile, then fonts increase at breakpoint-xs-min (tablet min), and then increase again at $breakpoint-lg-min (desktop min).

In this method, responsive typography handles its logic internally, rather than controlled at the component level. There may be cases in the future for custom font-size and text styling on a component by component basis, and will be handled in those contexts.

Usage

Product design has provided specs for frequently reused text styles. These styles include media queries to adjust font-size depending on screen width. These utilites can be applied as utility classes in the markup or as mixins as apart of of custom css class in a sass file.

Mixins and utility classes use the same naming convention for ease of context switching. They follow this pattern: integral-typography-[set]--[variation].

Code Example

Mixins defined in integral/src/styles/mixins/typography and utilities defined in integral/src/styles/foundations/_typography.scss.

Copying the utilites below will copy "integral-typography-[set]-[variation]" to the clipboard. It can be used either as a class in markup or in scss with @include.

<p className="integral-typography-body--lg">Sample copy</p>

.custom-class {
  @include integral-typography-body--lg;
}

Body Text

Buttons

Headings

Product design may refer to headings by levels, with Heading 1 being the largest and Heading 6 being the smallest. Conversely, engineering uses t-shirt sizing to convey size meaning. Neither design or engineering should assume the Heading Level label necessarily infers which heading level to use in markup, i.e. "Heading 1" is not necessarily always used on <h1>.

Use Poppins for headings and key action interactive elements, like buttons and sidebar links
Use Nunito for most body copy.

CSS Variables [in progress]

Our typography system uses CSS variables for consistent implementation:

--ff-heading: Poppins font family for headings
--ff-body: Nunito font family for body text

Planned: update to use font-family specfic named variables along with semantically named variables. These notes will likely move into their own page in tokens.

Typography