import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';

import Typeset from './imgs/typeset.png';
import TypeGuides from './imgs/type-guides.png';
import DemoImg from './imgs/demo.png';

<Meta title="Typography/Intro" parameters={{ ...parameters }} />

![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)

# Typography

Our Reuters Graphics components include a basic typography system designed to make it easy to incorporate clean, balanced type styles in your project.

The typography system includes all the levels of text heirarchy you'll need for graphics pages, including page title, subheads, section titles, body copy, graphic descriptions, captions and other notes.

<img
  className="feature"
  src={DemoImg}
  width="100%"
  style={{ margin: '3rem 0' }}
/>

## The type style system

The typographic scale is based on the scale of fifths to create six harmonic levels of font sizes. These create the sizing for headlines, body text and spacing.

The typographic scale is set using the CSS variable in the `Theme` component. You can customise it there.

<img
  className="feature"
  src={TypeGuides}
  width="100%"
  style={{ margin: '3rem 0' }}
/>
