Type Scale

Show your configured type styles at their actual sizes alongside screen and print specifications.

<TypeScale />

Usage

Show every configured type style in configuration order. Define the styles in Typography.

<TypeScale />

Examples

Focus on a few styles

This example takes the last three configured styles by ID and hides print specifications. Pass names or IDs to only to choose a different order.

<TypeScale
  only={props.brand.typography.scale.slice(-3).map(({ id }) => id)}
  print={false}
/>

Select by name and keep print specifications

The preceding example selects by ID and hides print specifications. This one selects by name, reverses the first two configured styles, and keeps print specifications enabled. Only styles with configured print values display them.

<TypeScale
  only={props.brand.typography.scale
    .slice(0, 2)
    .map(({ name }) => name)
    .reverse()}
  print={true}
/>

Compare sample-text fallbacks

A style’s configured sample wins, as shown by the display, heading, and body styles in the first preview. The sample brand’s caption style deliberately omits sample in brandtree.config.ts, so it can use a component fallback.

The first row below passes a custom sample; the second omits it and uses the built-in sentence. Both select the same configured caption style. In your own brand, select a style that has no configured sample to use this pattern.

<TypeScale
  only={["caption"]}
  print={false}
  sample="A clear voice, wherever we appear."
/>

<TypeScale only={["caption"]} print={false} />

Selection and sample text

only preserves the order you supply. Unknown names or IDs throw an error; an empty array renders no rows. Without only, every configured style appears.

A style’s own sample takes precedence over the component’s sample prop. Print specifications appear only when print is enabled and the style has a print entry.

API reference