# Typography

Two typefaces, like the website: **Hanken Grotesk** for everything you read and **JetBrains Mono** for code. Both are self-hosted variable fonts from Fontsource (`@fontsource-variable/hanken-grotesk`, `@fontsource-variable/jetbrains-mono`), imported at the top of `src/styles.css` and registered as `font-sans` and `font-mono`.

Markdown pages are styled by the Tailwind Typography plugin through the `prose` class on `ContentWrapperComponent`, tuned in `styles.css` to the docs scale. Component pages use the same scale through the `docs-h1`, `docs-h2` and `docs-h3` utilities, so both kinds of page render alike.

## The scale

| Role        | Class / element                 | Size                        | Weight · tracking |
| ----------- | ------------------------------- | --------------------------- | ----------------- |
| Page title  | `docs-h1`, `# h1`               | 44–72px, fluid, leading 1   | 600 · −0.04em     |
| Section     | `docs-h2`, `## h2`              | 32px, rule above in prose   | 600 · −0.03em     |
| Subsection  | `docs-h3`, `### h3`             | 21px                        | 600 · −0.015em    |
| Lead        | lead paragraph under the title  | 22px, `text-text-secondary` | 400               |
| Body        | `p`, `li` in prose              | 17px, leading 1.65          | 400               |
| Card title  | column and panel titles         | 20–24px                     | 600 · −0.015em    |
| Group label | nav groups, table heads, labels | 12px uppercase              | 600 · +0.08em     |
| Code        | `code`, `pre`, kbd, file names  | 14px (0.86em inline)        | JetBrains Mono    |

Use 400, 500 and 600 only; `font-semibold` for headings, titles and buttons. Big display numbers are semibold with `tracking-[-0.03em]`.

Mono is for things you would type or read as data: code, keys, file names, commands, values. It is never a decorative "technical" label. Nothing small sits above a heading as a label: the breadcrumb already says where the page is. Group labels (nav groups, table heads, panel titles, form labels) use the uppercase style: `text-xs font-semibold uppercase tracking-[0.08em] text-text-muted`.

## Headings

Every `h2` in prose opens with the 1.5px rule, like a section on the website.

## Heading 2

### Heading 3

#### Heading 4

## Paragraphs

This is a regular paragraph with some **bold text** and _italic text_. You can also combine them with **_bold and italic_** text. Running text stays at a reading measure of about 72 characters, while code, tables and figures use the whole column.

A second paragraph shows the spacing between paragraphs. Body text is 17px primary ink on a 1.65 line height.

## Links

Here's an [inline link](/design-system): underlined at 1.5px with a 3px offset, and a mint tint on hover.

## Lists

### Unordered lists

Bullets are small black squares, like the website's legend markers.

- First item in an unordered list
- Second item with some **bold text**
- Third item with a [link](/design-system/colors)
- Nested lists:
  - Nested item 1
  - Nested item 2
    - Deep nested item
  - Back to second level

### Ordered lists

1. First ordered item
2. Second ordered item with `inline code`
3. Third ordered item
4. Nested ordered list:
   1. Nested numbered item
   2. Another nested item
5. Back to root level

## Code

### Inline code

Use `inline code` for code inside a sentence: a mono chip on the `surface-muted` tint, without backticks. For example, `ContentWrapperComponent` applies the `prose` class.

### Code blocks

Fenced code renders on the dark editor surface with the dcupl Shiki theme. See [Code blocks](/design-system/code-blocks) for filename headers and tabs.

```typescript
import type { ModelDefinition } from '@dcupl/common';

// Keywords white and bold, strings mint, types yellow, comments gray
const productModel: ModelDefinition = {
  key: 'Product',
  properties: [{ key: 'price', type: 'int' }],
};
```

```bash
npm install @dcupl/core
```

## Blockquotes

> A blockquote is set off by a 2px rule on the left and secondary ink, without italics.
>
> It can span several paragraphs and include **bold text**.

For notes, tips and warnings use a callout instead (`:::alert`, see [Feedback & overlays](/design-system/components/feedback)).

## Horizontal rules

A horizontal rule separates sections:

---

Content after a horizontal rule.

## Tables

Table heads use the group-label style on the 1.5px rule; rows are separated by hairlines.

| Feature             | Description                   | Status |
| ------------------- | ----------------------------- | ------ |
| Typography          | Tailwind Typography plugin    | Active |
| Syntax highlighting | Shiki with the dcupl theme    | Active |
| Dark mode           | `.dark` on `<html>`           | Active |
| Components          | Standalone Angular components | Active |

### A reference table

| Element   | Tag      | Example       | Notes           |
| --------- | -------- | ------------- | --------------- |
| Heading 1 | `h1`     | `# Heading`   | Page title      |
| Heading 2 | `h2`     | `## Heading`  | Section heading |
| Bold      | `strong` | `**text**`    | Strong emphasis |
| Italic    | `em`     | `*text*`      | Emphasis        |
| Link      | `a`      | `[text](url)` | Hyperlink       |
| Code      | `code`   | `` `code` ``  | Inline code     |

## Emphasis and strong

_This text is emphasized using italic style._

**This text has strong emphasis using bold style.**

## Subscript and superscript

When you need to write formulas like H<sub>2</sub>O or footnote references<sup>[1]</sup>, subscript and superscript are available.

## Abbreviations

The <abbr title="HyperText Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.

## Definition lists

<dl>
  <dt>Component</dt>
  <dd>A reusable, self-contained piece of UI functionality in Angular.</dd>

  <dt>Service</dt>
  <dd>A class that provides specific functionality and can be injected into components.</dd>

  <dt>Directive</dt>
  <dd>A class that can modify the behavior or appearance of DOM elements.</dd>
</dl>

## Keyboard input

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy or <kbd>Cmd</kbd> + <kbd>V</kbd> to paste.

## Sample output

<samp>Error: Module not found</samp>

## Variables

The <var>x</var> value is calculated as <var>y</var> + <var>z</var>.

## Deleted and inserted text

<del>This text has been deleted</del>

<ins>This text has been inserted</ins>

## Mark

The most important part of this sentence is <mark>highlighted for emphasis</mark>.