Description

Typography is a component that allows you to apply predefined styles to text content. It includes the following styled components:

• Text with the full font sizes scale
• List
• Blockquote
• Hint (not recommended for use, use the ButtonLink component instead)

Font

In our design system, we use the Inter font family.

Font size and line height scale

Font size and line height

px	em	Font size tokens	Line height tokens
12px	0.75em	--fs-100	--lh-100
14px	0.875em	--fs-200	--lh-200
16px	1em	--fs-300	--lh-300
20px	1.25em	--fs-400	--lh-400
24px	1.5em	--fs-500	--lh-500
32px	2em	--fs-600	--lh-600
36px	2.25em	--fs-700	--lh-700
48px	3em	--fs-800	--lh-800

import React from 'react';
import { Text } from '@semcore/typography';

const Demo = () => (
  <div>
    <Text size={100} tag='p'>
      12px / --fs-100,--lh-100
    </Text>
    <Text size={200} tag='p'>
      14px / --fs-200,--lh-200
    </Text>
    <Text size={300} tag='p'>
      16px / --fs-300,--lh-300
    </Text>
    <Text size={400} tag='p'>
      20px / --fs-400,--lh-400
    </Text>
    <Text size={500} tag='p'>
      24px / --fs-500,--lh-500
    </Text>
    <Text size={600} tag='p'>
      32px / --fs-600,--lh-600
    </Text>
    <Text size={700} tag='p'>
      36px / --fs-700,--lh-700
    </Text>
    <Text size={800} tag='p'>
      48px / --fs-800,--lh-800
    </Text>
  </div>
);

export default Demo;

Text styling and colors

To specify the main text color, use the --text-primary token. For the secondary text color, utilize the --text-secondary token. Additionally, text can be styled with our main semantic colors, such as --text-success, --text-critical, and others.

For other styling options, refer to our Text styling example.

TIP

Use text color thoughtfully and avoid excessive color usage, as it can reduce readability. Always ensure sufficient contrast between text and its background.

Additional information

In some cases, it may be necessary to display additional information next to the primary text (for example, a result count next to some heading). We recommend styling it using the secondary text color (--text-secondary token).

import React from 'react';
import { Flex } from '@semcore/flex-box';
import { Text } from '@semcore/typography';

const Demo = () => (
  <Flex gap={1}>
    <Text size={400} semibold>
      Text example with counter
    </Text>
    <Text size={400} color='text-secondary'>
      12,457
    </Text>
  </Flex>
);

export default Demo;

Headings

Our design system doesn't have a specific heading component because any text can be given a heading tag based on the page's information hierarchy.

TIP

We recommend using no more than four heading levels (h1-h4) on a page to avoid overcomplicating its structure.

For the hero blocks, large advertising screens, banners, and landing pages, we recommend using the following font sizes with a semibold font-weight (--semi-bold token).

import React from 'react';
import { Flex } from '@semcore/flex-box';
import { Text } from '@semcore/typography';

const Demo = () => (
  <Flex direction='column'>
    <Text size={800} mb={6} mt={0} semibold>
      48px / --fs-800,--lh-800
    </Text>
    <Text size={700} mb={4} mt={0} semibold>
      36px / --fs-700,--lh-700
    </Text>
    <Text size={600} mb={4} mt={0} semibold>
      32px / --fs-600,--lh-600
    </Text>
    <Text size={500} mb={3} mt={0} semibold>
      24px / --fs-500,--lh-500
    </Text>
  </Flex>
);

export default Demo;

The following font sizes are typically used for headings in content sections such as pages, cards, and summary widgets. For headings that are 16px or smaller, we recommend using a bold font weight (--bold token).

import React from 'react';
import { Flex } from '@semcore/flex-box';
import { Text } from '@semcore/typography';

const Demo = () => (
  <Flex direction='column'>
    <Text size={400} mb={2} mt={0} semibold>
      20px / --fs-400,--lh-400
    </Text>
    <Text size={300} mb={1} mt={0} bold>
      16px / --fs-300,--lh-300
    </Text>
    <Text size={200} mb={1} mt={0} bold>
      14px / --fs-200,--lh-200
    </Text>
  </Flex>
);

export default Demo;

Paragraph

Our design system doesn't have a separate paragraph component because any text can be a paragraph, depending on the page's structure.

The following font sizes are the most commonly used for paragraphs in our design system. We recommend avoing to use the smallest paragraph size (--fs-100), as it may cause accessibility and readability issues.

import React from 'react';
import { Flex } from '@semcore/flex-box';
import { Text } from '@semcore/typography';

const Demo = () => (
  <Flex direction='column'>
    <Text size={300} tag='p' mb={4} mt={0}>
      Paragraph 16px
    </Text>
    <Text size={200} tag='p' mb={3} mt={0}>
      Paragraph 14px
    </Text>
    <Text size={100} tag='p' mb={2} mt={0}>
      Paragraph 12px
    </Text>
  </Flex>
);

export default Demo;

Paragraph margins

We recommend using the following bottom margins for paragraphs with the most common font sizes in our design system:

• --spacing-4x for --fs-300 font size
• --spacing-3x for --fs-200 font size
• --spacing-2x for --fs-100 font size

These margins can also be used when a paragraph is followed by another paragraph with a smaller font size.

import React from 'react';
import { Flex } from '@semcore/flex-box';
import { Text } from '@semcore/typography';

const Demo = () => (
  <Flex direction='column'>
    <Text size={300} tag='p' mb={4} mt={0}>
      This is a paragraph with fs-300 font size. It&apos;s so big that even my neighbor&apos;s cat
      can read it from across the street.
    </Text>
    <Text size={200} tag='p' mb={3} mt={0}>
      This is a paragraph with fs-200 font size. Perfect for when you want to whisper but still be
      heard.
    </Text>
    <Text size={100} tag='p' mb={2} mt={0}>
      This is a paragraph with fs-100 font size. If you can read this, congratulations&mdash;you
      have superhero-level eyesight. If not, it&apos;s probably just a secret message for ants.
    </Text>
  </Flex>
);

export default Demo;

Headings and paragraph sizes

Use a 16px paragraph with the following heading sizes:

Heading sizes and their bottom margins

Heading size	Bottom margin
--fs-800	--spacing-6x
--fs-700	--spacing-4x
--fs-600	--spacing-4x

Use a 14px paragraph with the following heading sizes:

Heading sizes and their bottom margins

Heading size	Bottom margin
--fs-500	--spacing-3x
--fs-400	--spacing-3x
--fs-300	--spacing-2x

List

List component has the following styles:

• list item has margin-bottom: 8px
• list bullet has padding-right: 8px

They're sufficient for the most common font sizes used in lists within our design system: --fs-300, --fs-200, --fs-100.

Nested list

Each subsequent level of the nested list is indented to the left. The margin between list levels for all font sizes is 8px.

Hints (hint links)

WARNING

The ButtonLink component has been implemented to replace the Hint component. Using Hint as a button or pseudo-link is no longer recommended.