36 lines
1.2 KiB
Text
36 lines
1.2 KiB
Text
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 }} />
|
|
|
|
|
|
|
|
# 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' }}
|
|
/>
|