# Typography

When a designer is talking about "type", it's unlikely they're asking about the
latest Typescript linting rules! Typography is a core aspect of any user
interface, and we've built a system that should make it simple for our
interfaces to be built with consistent, considered typographic elements.

The Atlantis typography system is based on the core components of
[Heading](../Heading/Heading.md) and [Text](../Text/Text.md).

```tsx
<Content>
    <Heading level={1} element="h2">
      A <Emphasis variation="highlight">prominent</Emphasis> heading
    </Heading>
    <Text>
      A longer body of text that&apos;s better suited for readabilty at smaller
      sizes. Typically a paragraph should be displayed in a typeface that has a
      moderate weight, and is <Emphasis variation="italic">relatively</Emphasis>{" "}
      free of flourish.
    </Text>
  </Content>
```

Heading and Text are extended by the ability to add
[Emphasis](../Emphasis/Emphasis.md) to these components as needed.

There are some foundational elements that make up these components:

## Font families

### Display

Jobber Pro is Jobber's internal typeface and is only suitable for use in Jobber
products. It lends a hefty-but-professional face to larger usages such as page
titles.

As Jobber Pro is a custom typeface licensed specifically for Jobber usage, it
will be rendered in any environments where it is licensed for use. In external
usages, [Poppins](https://fonts.google.com/specimen/Poppins) is Atlantis'
fallback display face. It has similar structural features and optical sizing as
Jobber Pro.

```tsx
<Content>
    <Heading level={1}>Jobber Pro is used for page titles</Heading>
  </Content>
```

### Base

[Inter](https://fonts.google.com/specimen/Inter) is our most broadly-used
typeface. It is used for body copy, most headings, data display, form inputs,
labels, and more!

```tsx
<Content spacing="large">
    <Heading level={3}>Inter is for less prominent headings</Heading>
    <Text>
      You can also use it for longer, more readable statements in paragraphs,
      descriptive text, in lists, and more. If you&apos;ve been paying careful
      attention, you might have noticed that Atlantis even uses Inter for
      presenting documentation!
    </Text>
    <Checkbox checked label="Inter can label inputs nicely"></Checkbox>
    <InputText
      defaultValue="It's great for input values too"
      placeholder="Inter for labels"
    />
    <Table>
      <Header>
        <Cell>Inter</Cell>
        <Cell>Renders</Cell>
        <Cell align="right">Data</Cell>
      </Header>
      <Body>
        <Row>
          <Cell>Data point</Cell>
          <Cell>More data</Cell>
          <Cell align="right">$280</Cell>
        </Row>
        <Row>
          <Cell>Another data point</Cell>
          <Cell>Additional values</Cell>
          <Cell align="right">$200</Cell>
        </Row>
      </Body>
    </Table>
  </Content>
```

## Font-size

### Web

At the default zoom level for web applications, our base font-size is equivalent
to `14px`. Depending on the context in which your typography is being used,
font-size can be adjusted to be larger or smaller than the base font-size.

Suggestions for when to use varying font-sizes are discussed in the
[Heading](../Heading/Heading.md) component, and within the
[Sizes](../Text/Text.md) section of the Text component.

| Name                                 | Visual | Value |
| :----------------------------------- | :----- | :---- |
| `--typography--fontSize-smaller`     |        |       |
| `--typography--fontSize-small`       |        |       |
| `--typography--fontSize-base`        |        |       |
| `--typography--fontSize-large`       |        |       |
| `--typography--fontSize-larger`      |        |       |
| `--typography--fontSize-largest`     |        |       |
| `--typography--fontSize-jumbo`       |        |       |
| `--typography--fontSize-extravagant` |        |       |

### Mobile

Jobber's mobile platform uses the following sizing tokens for typography.

The mobile platform has a base font-size equivalent to `16px`, with options for
a larger or smaller font-size depending on the use case.

| Name                                 | Visual | Value |
| :----------------------------------- | :----- | :---- |
| `--typography--fontSize-smallest`    |        |       |
| `--typography--fontSize-smaller`     |        |       |
| `--typography--fontSize-small`       |        |       |
| `--typography--fontSize-base`        |        |       |
| `--typography--fontSize-large`       |        |       |
| `--typography--fontSize-larger`      |        |       |
| `--typography--fontSize-largest`     |        |       |
| `--typography--fontSize-jumbo`       |        |       |
| `--typography--fontSize-extravagant` |        |       |

## Line-height

### Web

Line-height, or
[leading](https://www.shillingtoneducation.com/blog/leading-typography/), is the
space between subsequent lines of type. The line-heights in the `Heading` and
`Text` components are optimized for each variation's unique combination of
font-size, weight, and family, so you don't need to adjust their line-height
manually when you use them.

At smaller sizes, a more generous line-height relative to the font-size allows
the user to more easily parse multiple lines of small text. As font-size
increases into "display" sizes such as a level 1 `Heading`, the ratio of
line-height to font-size decreases as the larger font-size is more readable and
requires less line-to-line breathing room.

| Name                                 | Visual | Value |
| :----------------------------------- | :----- | :---- |
| `--typography--lineHeight-large`     |        |       |
| `--typography--lineHeight-base`      |        |       |
| `--typography--lineHeight-tight`     |        |       |
| `--typography--lineHeight-tighter`   |        |       |
| `--typography--lineHeight-tightest`  |        |       |
| `--typography--lineHeight-minuscule` |        |       |

### Mobile

| Name                                   | Visual | Value |
| :------------------------------------- | :----- | :---- |
| `--typography--lineHeight-extravagant` |        |       |
| `--typography--lineHeight-jumbo`       |        |       |
| `--typography--lineHeight-largest`     |        |       |
| `--typography--lineHeight-larger`      |        |       |
| `--typography--lineHeight-large`       |        |       |
| `--typography--lineHeight-base`        |        |       |
| `--typography--lineHeight-tight`       |        |       |
