Typography

v8.7.4Edit this page

Guidelines

See Typography on the NDS Style Guide for usage guidelines.

Loading...

Loading examples...

Props

Usage

This package provides <Body>, <Title>, <Legal> and <Type> components for rendering text using the five size type scale defined in base-styles.

The <Title>, <Body>, and <Legal> components are abstractions that build on the underlying typographic scale. <Type> is a lower level component that gives raw access to the typographic scale and all styling options. The higher level <Title>, <Body>, and <Legal> components are encouraged to be the first choice for Nerds to use, before the atomic <Type /> component.

See the NDS Type Guidelines to learn more.

<Title>

The <Title> abstraction on <Type> provides more clarity about when to use what style by providing syntax convenience and guardrails to stay within the guidelines.

It provides props to control the following:

  • size (T-Shirt scale of "x-large", "large", "medium", "small", and "x-small")
  • light to lighten the text color (to neutral-darker) to deemphasize the text
  • Other formatting (italic and inline)
  • Component (defaults to h1-h6 based on size)

<Body>

The <Body> abstraction on <Type> provides more clarity about when to use what style by providing syntax convenience and guardrails to stay within the guidelines.

It provides props to control the following:

  • size (T-Shirt scale "large", "medium" and "small")
  • light to lighten the text color (to neutral-darker) to deemphasize the text
  • Other formatting (bold, italic, and inline)

<Legal>

The <Legal> abstraction on <Type> provides more clarity about when to use what style by providing syntax convenience and guardrails to stay within the guidelines. It doesn't impose any strict requirements on the semantics of the text; not all "legal text" will use this style and not all text using this style will be "legal text" and that's ok.

<Type>

The <Type> component is a flexible, low-level component for rendering text. It should generally be avoided in favor of <Body>, <Title>, or <Legal> but serves as an alternative if needed.

It provides props to control the following:

  • Size (0–5 scale)
  • Font family (Gotham or Chronicle)
  • Other formatting (bold, italic, uppercase)

Size

There are five font sizes available on a geometric scale. There are technically two scales, one for mobile sized viewports and one for desktop sized viewports. Font sizes are "fluid" and will scale between the desktop and mobile sizes depending on the exact viewport.

As a general guideline, size 2 is considered "normal" or "body" text, size 1 is for "fine print", and size 3 can be used for lead text.

Font Family

The default font family is Gotham. Use the chronicle prop to use Chronicle. Gotham and Chronicle can both be used at all five sizes.

Formatting

The following props are provided for text formatting:

  • bold
  • italic
  • uppercase

Color

light sets a neutral shade (neutral-darker) that has high enough contrast for accessibility.

In general this and the default color (neutral-darkest, black) are the only colors that should be used for readable text on white background.

This is discouraged, but if needed text color can be controlled using the color prop:

Custom Components

You can use the component prop to render a custom component (e.g,. div) instead of the default <p>. Some common use cases are:

  • h2 with size=4 and bold:

  • div that looks the same as above:

  • h2 that looks like "normal" paragraph text:

v8.1.0 Type Sizes Update

This component was updated on 4/6/2018 (v8.1.0) to use the new type scale in base-styles v2.16.0. The new type scale reduces the total number of font sizes from seven to five. For this reason, two heading levels that were previously two different font sizes, may now be the same font size. See the below diagram for how previous type sizes map to the new type scale:

Mapping of old type sizes to new type scale

This affects the <Heading> component, where level="2" and level="3" now provide the same size. You can use the size prop for more precise control over the heading's size.

Props

level Prop

The level prop controls the size of the heading and which html element is rendered.

  • If the size prop is provided, it will determine the text size over level.
  • If the component prop is provided, it will determine the rendered element over level.

CSS Rules and Font Definitions

Warning: It's not safe to declare font-family anywhere in your local CSS. It's possible in the future we have different fonts depending on a class on the body for optimized loading. If you update font attributes manually, don't include the font family.

Note: Prior to 10/19/17, Gotham weights and styles were split between "Gotham Body" and "Gotham Display". In addition, every weight was available. Legacy code declarations of "GothamBody" or "GothamDisplay" fall back to an appropriate font.

Maintainers

This component is maintained by the FEI team.