Typography

v8.5.3Edit this page

Typography components! Use these to consistently style titles, body, and legal text across the product.

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.

Loading...

Loading examples...

Props

<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")
  • Component (defaults to h1-h6 based on size)
  • Other formatting (italic and inline)

<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")
  • 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.

It provides no props to control the styling.

<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

Text color can be controlled using the color prop:

There is also a special prop, light, that sets a lighter neutral shade that still has high enough contrast for accessibility (same as color="neutral-darker"). In general this and the default color (neutral-darkest, black) are the only colors that should be used for readable text on white background.

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:

Legacy Components

<Heading> (Deprecated)

The <Heading> component provides a light wrapper around <Type> for headings. It is the same as <Type>, except:

  • It is bold by default
  • Accepts a level prop
  • Renders a h1h6 (based on level or size)

<Heading> is provided only as convenience over <Type> and so that the semantic intention of a heading can be captured. All text styling possible with <Heading> is also possible with just <Type>.

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.

Heading Sizes

The heading font size can be controlled directly using the size prop, or can be implicitly derived from the level prop is size is not given.

Levels currently map to type scale sizes in a non-intuitive way. This is to maintain close visual consistency with heading sizes level mapped to before v8.1.0. In a future release, the level-to-size mapping will be changed. For this reason it is recommended to use the size prop to control size explicitly.

Table of each level and its implicitly derived size if size is not given:

See also "v8.1.0 Type Sizes Update" below.

<Text> (Deprecated)

This component is deprecated and will be removed in the future. Use the <Type> component instead (see above).

Text elements can be inline or block-level components and will render to html <span> (inline) or <p> (block).

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.

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.

See Also