# @clds/typography

> ---

Latest version **0.70.2** (published 2025-07-21) · 0 weekly downloads

## Install

```sh
npm install @clds/typography
pnpm add @clds/typography
yarn add @clds/typography
bun add @clds/typography
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.70.2 |
| Published | 2025-07-21 |
| First published | 2022-06-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 87.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Cloudinary |
| Maintainers | cloudinary-internal |

## Links

- npm: https://www.npmjs.com/package/@clds/typography
- Repository: https://github.com/cloudinary/design-system
- Homepage: https://github.com/cloudinary/design-system/tree/main/libs/foundations/typography#readme
- Issues: https://github.com/cloudinary/design-system/issues
- npm.io page: https://npm.io/package/@clds/typography

## Dependencies (1)

- [@clds/themes](https://npm.io/package/@clds/themes.md) 0.70.2

## Recent versions

- 0.70.2 (latest) — 2025-07-21
- 0.70.1 — 2025-07-08
- 0.70.0 — 2025-07-06
- 0.69.0 — 2025-06-26
- 0.68.0 — 2025-06-24
- 0.67.1 — 2025-06-12
- 0.67.0 — 2025-06-12
- 0.66.0 — 2025-06-09
- 0.65.0 — 2025-06-08
- 0.64.2 — 2025-06-05
- 0.64.1 — 2025-06-03
- 0.64.0 — 2025-06-03
- 0.63.1 — 2025-05-25
- 0.63.0 — 2025-05-06
- 0.62.4 — 2025-04-09
- … 156 more at https://npm.io/package/@clds/typography/versions

## README

## @clds/typography

---

[![npm version](https://img.shields.io/npm/v/@clds/typography)](https://www.npmjs.org/package/@clds/typography)

Documentation of the Cloudinary `Typography` component.

The purpose of this component is to use display typography in the right scale and proportion according to predefind sizes.

For each type props the component will assign the following values: `font-size`, `color`, `line-height`, `weight`

## Installation

Install the package using Yarn:

```sh
pnpm add @clds/typography
```

## Usage

```javascript
import Typography from '@clds/typography';

const Component = () => <Typography>Hello World</Typography>;
```

## Props

| Name | Req   | Type                                                                                                           | Default   |
| ---- | ----- | -------------------------------------------------------------------------------------------------------------- | --------- |
| size | false | ['xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs']                                                                   | 'sm'      |
| type | false | ['contrastInvert', 'regular', 'highContrast', 'lowContrast', 'url', 'success', 'warning', 'error', 'disabled'] | 'regular' |
| as   | false | [HTML Tag](https://styled-components.com/docs/api#as-polymorphic-prop)                                         | span      |

### Using other HTML Tags

If you want to keep all the typography styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag), you can use the "as" prop to do this at runtime.

```javascript
<Typography as="h1">Hello World</Typography> // <h1>Hello World</h1>
```

### typographyMixin

> function(props: object, options: object)

In some cases when you like to use the typography sizes but not as a component, you can use this helper function to consume it as css.

please note: while using this helper u need to make sure to pass the `size` and `type` prop.

#### options

| Name     | Type                                    | Default |
| -------- | --------------------------------------- | ------- |
| asObject | return attrs as object instead of `css` | false   |

```javascript
import { typographyMixin } from '@clds/typography';
import styled from 'styled-component';

const Div = styled.div`
  ${typographyMixin};
`;

<Div size="sm" weight="regular" />;
```

### Predefined mixins

For use cases when you need to attach specific typography to created styled component,
you can use predefined mixins, like:

```javascript
import { typography } from '@clds/typography';
import styled from 'styled-components';

const MyComponent = styled.div`
  ${typography.sm.url};
  // ... rest of your style
`;
```

## Versioning

This library follows [Semantic Versioning](http://semver.org/).

## License

See [LICENSE](https://github.com/cloudinary/design-system/blob/main/LICENSE)

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