Typography

Cengage applications need clear and consistent headings, highly legible body paragraphs, and clear labels. Our typefaces are chosen for legibility and maximum support for mathematical characters.

By consistently tying typographic styles to appropriate functions in the interface, we create a clear visual pattern for students and faculty to follow while they’re interacting with our products.

Magma Type Sets

Magma has three sets of ready-made typographic elements that you can choose from and should be adhered to when at all possible. Each one combines a font family with calibrated sizes and weights to work within applications or editorial content. The three sets are called Productive, Expressive, and Narrative.

IMPORTANT: The Productive set is used by default in the components so you won't actually see it referred to in the code. You can easily change to Expressive or Narrative when appropriate by adding the necessary prop.

Productive Type Set (Default)

Productive type is reserved for use in web-based product design, where the user needs to focus on tasks. The Productive styles are curated to create a series of clear user expectations about hierarchy. The difference between the Productive and Expressive styles is mainly evident in the Headings.

Productive Body Text Styles

Productive Heading Text Styles

Expressive Type Set

Expressive type is reserved for use in editorial and digital marketing experiences which may require more dynamic typographic hierarchies and more variety in the Heading scale. The Expressive styles are curated to create a series of clear user expectations while still allowing for a more dramatic, graphic use of type.

Expressive Body Text Styles

Expressive Heading Text Styles

Narrative Type Set

Narrative type uses Noto Serif but is otherwise styled the same as the default Productive variant. The Narrative styles are curated to create a series of clear user expectations about hierarchy, but in a font that is more pleasurable for reading long passages of text.

Narrative Body Text Styles

Narrative Heading Text Styles

Changing Headings Styles

The headings presets above are assigned by default to H1 through H6 in the Headings component. But it's relatively common to need a specific heading type in the markup, but not want the default styling. For this reason we have made it very easy to change which styling preset you use in the headings component.

One example of this is in the Modal component. For optimal accessibility the title of the modal needs to be an H1, but we definitely don't want it to be styled with text that large. So we use an H1, but apply the Productive Heading Small style to it. This flexibility allows consumers of Magma to design using the styles that work best for the UI, but still have a clear informational hierarchy for assistive technologies.

Consistency is Key

Continuing from above, there isn't just one way an H1 or and H3 should be styled. We have chosen logical default styles, but it's easy to say you need an H3 to be styled using one of the larger or smaller presets. The key is to be consistent. If you style a page title using productive-heading-large, then you need to use the same styling on all of the pages. If you use "productive-heading-xsmall" to style the title of a section, then you should use the same styling on equivalent sections.

Responsive Behavior

Another advantage to using the presets above is that Responsive behavior is already built into each style so you don't have to figure out and include it yourself. This means a number of the larger sizes will automatically reduce in size at 600px wide. This ensures we have appropriate text sizes on smaller devices. The breakpoint can be overridden if you want this change to happen earlier or later.

Typefaces

Work Sans

Our primary typface is Work Sans. It’s clear and approachable and is great for headlines, subheads, navigation and body copy.

Download Work Sans

Work Sans is a typeface family based loosely on early Grotesques, such as those by Stephenson Blake, Miller & Richard and Bauerschen Giesserei. The Regular weight and others in the middle of the family are optimised for on-screen text usage at medium-sizes (14px-48px) and can also be used in print design. The fonts closer to the extreme weights are designed more for display use both on the web and in print. Overall, features are simplified and optimised for screen resolutions; for example, diacritic marks are larger than how they would be in print. A version optimised for desktop applications is available from the Work Sans github project page.

Noto Serif

Noto Serif is a beautiful serif font. It's easy to read, provides a nice contrast with Work Sans and has great support for special characters. At this point, Noto Serif should primarily be used for the reader applications that display our text books.

Download Noto Serif

When text is rendered by a computer, sometimes there will be characters in the text that can not be displayed, because no font that supports them is available to the computer. When this occurs, small boxes are shown to represent the characters. We call those small boxes “tofu,” and we want to remove tofu from the Web. This is how the Noto font families got their name.

Noto helps to make the web more beautiful across platforms for all languages. Currently, Noto covers over 30 scripts, and will cover all of Unicode in the future. This is the Serif Latin, Greek and Cyrillic family. It has Regular, Bold, Italic and Bold Italic styles and is hinted.

Type Scale

The font sizes used in the sets above come from the full type scale. This type scale is based on the Major Second Type Scale (1.125) but is slightly modified to round to whole numbers and create a simple pattern in the difference between each size. Small font sizes differ by 2px, and then that difference increases by 4px and then 6px as the size gets larger.

Line-heights are also defined at this level to adhere to an 8px spacing system, and should not be changed unless absolutely necessary

If you have a need to use a font size outside of the pre-made sets above, you may only choose from this list.

Styles

Weight

Font weight is an important typographic variable that can add emphasis and differentiate content hierarchy. Font weight and size pairings must be carefully balanced. A bold weight will always have more emphasis than a lighter weight font of the same size. However, a lighter weight font can rank hierarchically higher than a bold font if the lighter weight type size is significantly larger than the bold one. The weights available in React Magma are thin (100), extra-light (200), light (300), regular (400), medium (500), semi-bold (600), bold (700), extra-bold (800) and black (900).

Italic

Each weight has an italic style, which should only be used when you need to emphasize certain words in a sentence (titles of works, technical terms, names of devices, captions, etc.).

Color

Type color should be carefully considered, with legibility and accessibility as your main concerns. Color can be helpful for reinforcing the meaning or context of a piece of text or action, but color should never be the only way this is communicated, or just for decoration. When text is generally kept neutral in color, then it can be much more powerful when you do need to use it to point out actions or a special important messages. The text itself is the clearest way to explain what the user needs to know, but icons can also help provide helpful clues.

Subdued

It is common to lighten certain pieces of text in order to create more contrast. For example, making a subtitle more subdued than the title, or instructional text like the helper text on form inputs. This can be easily done by applying the "subdued" color to a piece of text. On a light background, this makes the color #707070. The inverse equivalent is a semi-transparent white.

Margins

Headings and paragraphs have margins built into them by default. These margins provide the desired rhythm created by spacing when they are used together in a traditional narrative context. These margins can be easily modified using the spacing scale or completely removed when using headings or paragraphs in other contexts.