Add Typography pages (#10821)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #10692 <!-- link to issue
if one exists -->

<img width="2032" alt="Screenshot 2023-10-03 at 4 54 31 PM"
src="https://github.com/Shopify/polaris/assets/4642404/11f35875-b33b-43c2-a186-4e1515dd7256">

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

polaris.shopify.com/content/design/typography/font-and-typescale.md

@@ -0,0 +1,65 @@
+---
+title: Font and Typescale
+description: Typography is the art of arranging type in ways that provides innate hierarchy to UI.
+showTOC: true
+keywords:
+  - type styles
+  - font sizes
+  - fonts
+icon: TextAlignmentLeftMajor
+hideChildren: true
+---
+
+# {frontmatter.title}
+
+<Lede>{frontmatter.description}</Lede>
+
+<Subnav />
+
+## Font
+
+The Shopify admin utilizes the Inter font, an open-source variable font that offers adjustable knobs for fine-tuning font weight and slant.
+
+For languages where Inter doesn’t offer a complete set of glyphs, the admin employs the system font to ensure proper rendering and compatibility.
+
+![A showcase of Inter, an open source font used by the Shopify admin](/images/design/typography/typography-font-01-font@2x.png)
+
+### Mono
+
+In code applications, the system mono font is used consistently. Use the mono font in all instances where there is any type of reference to code.
+
+![A showcase of a monospace font, in code blocks and editable text fields in the admin](/images/design/typography/typography-font-02-mono@2x.png)
+
+<InlineGrid gap='2' columns={{xs: '1', lg: '3'}}>
+  <Do>
+
+    ![An editable code block in the admin with mono as its font](/images/design/typography/typography-font-03-mono-do@2x.png)
+
+    Always use mono font in any place, like text inputs, where code is expected.
+
+  </Do>
+
+  <Dont>
+    ![A table of products with their prices, but the prices are styled with a mono font instead of tabular numbers](/images/design/typography/typography-font-04-mono-dont@2x.png)
+
+    Don’t use mono to align numbers for readability. Use tabular numbers (link) instead.
+
+  </Dont>
+
+  <Dont>
+    ![A promotional card that uses mono typeface to indicate a new AI feature](/images/design/typography/typography-font-05-mono-decoration-dont@2x.png)
+
+    Don’t use mono for decoration, or to grab attention.
+
+  </Dont>
+</InlineGrid>
+
+## Typescale
+
+Polaris offers two typescale: heading and body. These typescales are used to create visual pairings in the UI and all line heights are aligned with the 4px grid.
+
+The typescale in the admin is tailored for UI usage as the primary focus. Designed with software in mind first and foremost, it’s optimized for use in high density layouts with intricate details and complex features.
+
+Learn more about applying type in the using type section (link).
+
+![Each font size of both the heading and body typescales with their line heights highlighted and aligned on a 4px grid](/images/design/typography/typography-font-06-typescale@2x.png)

polaris.shopify.com/content/design/typography/index.md

@@ -0,0 +1,65 @@
+---
+title: Typography
+description: Typography is the art of arranging type in ways that provides innate hierarchy to UI.
+showTOC: true
+keywords:
+  - type styles
+  - font sizes
+  - fonts
+icon: TypeMajor
+hideChildren: true
+---
+
+# {frontmatter.title}
+
+<Lede>{frontmatter.description}</Lede>
+
+<Subnav />
+
+## Typography defines hierarchy
+
+Typography plays a crucial role in defining hierarchy within design. Variable weights convey different levels of importance, where bolder weights indicate greater significance.
+
+Good type positioning also establishes visual prominence and emphasizes key information.
+
+![A series of cards in the admin, each introduced by a bold heading and medium weight body typography](/images/design/typography/typography-overview-01-hierarchy@2x.png)
+
+<InlineGrid gap='2' columns={{xs: '1', md: '2'}}>
+  <Do>
+
+![A card with different levels of type presented in different weights, sizes and positions ](/images/design/typography/typography-overview-02-hierarchy-do@2x.png)
+
+Use a combination of weight, size, color and positioning to define hierarchy.
+
+  </Do>
+
+  <Dont>
+    ![The same card as before, but only using color to style all type elements](/images/design/typography/typography-overview-03-hierarchy-dont@2x.png)
+
+    Rely only on color to define hierarchy.
+
+  </Dont>
+</InlineGrid>
+
+## Typography defines purpose
+
+Polaris assigns meaning to type based on its usage. Mono is used for code, tabular number stylesets are employed for numbers and currency amounts, and typescales are designed with UI design in mind.
+
+![A variety of cards, one showing a list of prices neatly aligned, another one showing monospace type for code, and another one showing type and icon pairings](/images/design/typography/typography-overview-04-purpose@2x.png)
+
+<InlineGrid gap='2' columns={{xs: '1', md: '2'}}>
+  <Do>
+
+    ![Different currency amounts in the Shopify admin, all using tabular numbers](/images/design/typography/typography-overview-05-purpose-do@2x.png)
+
+    Consistently style similar or repeating type in the UI.
+
+  </Do>
+
+  <Do>
+    ![A list of products with an “add product” button that is style like a link](/images/design/typography/typography-overview-06-purpose-dont@2x.png)
+
+    Repurpose or reinterpret known patterns in typography, especially when it comes to interactions.
+
+  </Do>
+</InlineGrid>