# 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
A prominent heading
A longer body of text that's better suited for readabilty at smaller
sizes. Typically a paragraph should be displayed in a typeface that has a
moderate weight, and is relatively{" "}
free of flourish.
```
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
Jobber Pro is used for page titles
```
### 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
Inter is for less prominent headings
You can also use it for longer, more readable statements in paragraphs,
descriptive text, in lists, and more. If you've been paying careful
attention, you might have noticed that Atlantis even uses Inter for
presenting documentation!
| Data point |
More data |
$280 |
| Another data point |
Additional values |
$200 |
```
## 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` | | |