# Typography

> Cherry's responsive typography system with definitions for desktop and mobile breakpoints.

Source: https://cherry.al/typography

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# Typography

Cherry offers two distinct sets of typography definitions: one for desktop and another for mobile. These comprehensive definitions ensure that type displays correctly on screens of all sizes. The **Desktop (LG)** values apply from the `lg` breakpoint (992px) and up, while the **Mobile (XS)** values are the base scale used on narrower screens.

<Tabs>
  <TabContent title="Desktop (LG)">

| Style        | Font  | Size  | Line Height | Weight |
| ------------ | ----- | ----- | ----------- | ------ |
| Hero1        | Inter | 128px | 1.1         | 700    |
| Hero2        | Inter | 96px  | 1.1         | 700    |
| Hero3        | Inter | 72px  | 1.1         | 700    |
| H1           | Inter | 60px  | 1.4         | 700    |
| H2           | Inter | 36px  | 1.5         | 700    |
| H3           | Inter | 30px  | 1.5         | 700    |
| H4           | Inter | 24px  | 1.5         | 700    |
| H5           | Inter | 20px  | 1.5         | 700    |
| H6           | Inter | 18px  | 1.6         | 700    |
| Text         | Inter | 16px  | 1.7         | 400    |
| Strong       | Inter | 16px  | 1.7         | 700    |
| Small        | Inter | 14px  | 1.7         | 400    |
| Blockquote   | Inter | 18px  | 1.7         | 400    |
| Code         | Mono  | 16px  | 1.7         | 400    |
| Button Small | Inter | 14px  | 1.0         | 600    |
| Button       | Inter | 16px  | 1.0         | 600    |
| Button Big   | Inter | 18px  | 1.0         | 600    |
| Input Small  | Inter | 14px  | 1.0         | 400    |
| Input        | Inter | 16px  | 1.0         | 400    |
| Input Big    | Inter | 18px  | 1.0         | 400    |

  </TabContent>
  <TabContent title="Mobile (XS)">

| Style        | Font  | Size | Line Height | Weight |
| ------------ | ----- | ---- | ----------- | ------ |
| Hero1        | Inter | 72px | 1.1         | 700    |
| Hero2        | Inter | 60px | 1.1         | 700    |
| Hero3        | Inter | 36px | 1.2         | 700    |
| H1           | Inter | 40px | 1.5         | 700    |
| H2           | Inter | 30px | 1.5         | 700    |
| H3           | Inter | 28px | 1.3         | 700    |
| H4           | Inter | 26px | 1.3         | 700    |
| H5           | Inter | 18px | 1.6         | 700    |
| H6           | Inter | 16px | 1.6         | 700    |
| Text         | Inter | 14px | 1.7         | 400    |
| Strong       | Inter | 14px | 1.7         | 700    |
| Small        | Inter | 12px | 1.7         | 400    |
| Blockquote   | Inter | 16px | 1.7         | 400    |
| Code         | Mono  | 14px | 1.7         | 400    |
| Button Small | Inter | 14px | 1.0         | 600    |
| Button       | Inter | 16px | 1.0         | 600    |
| Button Big   | Inter | 18px | 1.0         | 600    |
| Input Small  | Inter | 14px | 1.0         | 400    |
| Input        | Inter | 16px | 1.0         | 400    |
| Input Big    | Inter | 18px | 1.0         | 400    |

  </TabContent>
</Tabs>

<Callout type="note">
  The Weight column is part of the design spec. In code, the typography mixins
  only set `font-size` and `line-height`, so heading weights come from the
  browser's bold defaults for `h1` to `h6` unless you set `font-weight`
  yourself. The Button (600) and Input (400) components set their own weights.
</Callout>

## Usage

Nearly every style above is available as a ready-made CSS mixin exported from `cherry-styled-components`: `styledHero1`, `styledHero2`, `styledHero3`, `styledH1` through `styledH6`, `styledText`, `styledStrong`, `styledSmall`, `styledBlockquote`, `styledCode`, `styledButton`, `styledButtonBig`, `styledInput`, and `styledInputBig`. Each mixin takes the theme and returns the responsive `font-size` and `line-height`, switching from the mobile to the desktop values at the `lg` breakpoint:

```tsx
import styled from "styled-components";
import { styledH1 } from "cherry-styled-components";

const Title = styled.h2`
  ${({ theme }) => styledH1(theme)}
`;
```

For scales without a dedicated mixin (like Button Small and Input Small) or for custom theme keys, use the `createTypographyStyle` factory, e.g. `createTypographyStyle("buttonSmall")`.

<Callout type="info">
  To apply these styles in code, use the exported [typography
  helpers](/code/typography), and see [Theme](/code/theme) for font tokens.
</Callout>

<Callout type="note">
  Styles can be found in the Figma Template in the Typography section of the
  Foundations page.
</Callout>

<Button href="https://www.figma.com/community/file/943862931766586094/Cherry-Design-System" icon="pen-tool" iconPosition="left">
  View in Figma
</Button>