# @synerise/ds-typography

> Typography UI Component for the Synerise Design System

Latest version **2.0.5** (published 2026-09-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @synerise/ds-typography
pnpm add @synerise/ds-typography
yarn add @synerise/ds-typography
bun add @synerise/ds-typography
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 2.0.5 |
| Published | 2026-09-22 |
| First published | 2019-09-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | synerise |

## Links

- npm: https://www.npmjs.com/package/@synerise/ds-typography
- Repository: synerise/synerise-design
- npm.io page: https://npm.io/package/@synerise/ds-typography

## Recent versions

- 2.0.5 (latest) — 2026-09-22
- 2.0.4 — 2026-09-18
- 2.0.3 — 2026-09-16
- 2.0.2 — 2026-09-08
- 2.0.1 — 2026-09-02
- 2.0.0 — 2026-08-26
- 1.1.29 — 2026-08-18
- 1.1.28 — 2026-08-11
- 1.1.27 — 2026-07-23
- 1.1.26 — 2026-06-17
- 1.1.25 — 2026-06-11
- 1.1.24 — 2026-05-26
- 1.1.23 — 2026-05-22
- 1.1.22 — 2026-05-13
- 1.1.21 — 2026-05-04
- … 129 more at https://npm.io/package/@synerise/ds-typography/versions

## README

---
id: typography
title: Typography
---

## Synerise Design System - Typography

This module provides few helpers and components to work with typograpy.

### Examples

##### Styled components header macro usage

```jsx harmony
import { macro } from '@synerise/ds-typography';

export const HeaderH1 = styled.div`
  color: #000;
  ${macro.h700};
`;
```

##### Styled components color palette usage

```jsx harmony
export const Color = styled.div`
  color: ${({ theme }) => theme.palette['red-600']};
`;
```

##### DS Typography components usage

```jsx harmony
import { Title, Text, Paragraph, Description, ErrorText, Label } from '@synerise/ds-typography';

// Title supports levels 1–7 (level 7 renders as <h6>)
<Title level={1}>This is h1 element</Title>;
<Title level={2}>This is h2 element</Title>;
<Title level={3}>This is h3 element</Title>;
<Title level={4}>This is h4 element</Title>;
<Title level={5}>This is h5 element</Title>;
<Title level={6}>This is h6 element</Title>;
<Title level={7}>This is h6 element (10px, DS h100 scale)</Title>;
<Title level={4} withoutMargin>Title without bottom margin</Title>;
<Title level={3} ellipsis={{ tooltip: 'Full title text' }}>Truncating title</Title>;
<Text size="medium">This is span element with standard font-size</Text>
<Text size="small">This is span element with smaller font-size</Text>
<Text size="xsmall">This is span element with smallest font-size</Text>
<Text size="medium" ellipsis={{ tooltip: 'Full content' }}>Truncating text</Text>
<Paragraph size="medium">This is span element with standard font-size</Paragraph>
<Paragraph size="small">This is span element with smaller font-size</Paragraph>
<Paragraph size="xsmall">This is span element with smallest font-size</Paragraph>

// Form helpers
<Label htmlFor="field">Field label</Label>
<Description>Secondary description</Description>
<Description disabled>Disabled description</Description>
<ErrorText>Validation error message</ErrorText>
```

---
_Source: https://npm.io/package/@synerise/ds-typography · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._