# Typography

Type scale, weight system, and readability rules.



## Font families

Aptos and Aptos Mono are the preferred CoreAI typefaces. This site uses them when installed on your device and otherwise uses system fonts. Font files are not included in this repository or the npm package.

| Font       | Token               | Usage                                                     | Download                                                                                   |
| ---------- | ------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| Aptos Sans | fontFamilyBase      | Primary typeface for UI text, labels, and content.        | [Microsoft font download](https://www.microsoft.com/en-us/download/details.aspx?id=106087) |
| Aptos Mono | fontFamilyMonospace | Monospace typeface for code, data, and technical content. | [Microsoft font download](https://www.microsoft.com/en-us/download/details.aspx?id=106087) |





## Type scale

| Strong preset | Strong label              | Regular preset | Regular label | Fluent equivalent         | Usage                                                     |
| ------------- | ------------------------- | -------------- | ------------- | ------------------------- | --------------------------------------------------------- |
| heading1      | Heading 1                 |                |               | LargeTitle                | Page titles and hero headings.                            |
| heading2      | Heading 2                 |                |               | Title2                    | Major section headings.                                   |
| heading3      | Heading 3                 |                |               | Subtitle1                 | Section headings.                                         |
| heading4      | Heading 4                 |                |               | Subtitle2                 | Subsection headings.                                      |
| heading5      | Heading 5 / Body Strong   | body           | Body          | Body1Strong / Body1       | Compact headings, emphasized text, and default body copy. |
| heading6      | Heading 6 / Body S Strong | bodyS          | Body S        | Caption1Strong / Caption1 | Small headings, secondary text, metadata, and timestamps. |
| bodyXSStrong  | Body XS Strong            | bodyXS         | Body XS       | Caption2Strong / Caption2 | Labels and tertiary text in high-density views.           |



## Register installed Aptos fonts

```tsx
import '@coreai-ds/react-components/fonts/fonts.css';
```

## Load the Inter fallback

```css
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
```

## Page source

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import { Card, Link, Text, type TextProps } from '@coreai-ds/react-components';
import { PageLayout } from '../components/PageLayout';
import { Section } from '../components/Section';
import { ExternalIcon } from '../components/Icons';
import { typographyRows, siteLinks } from '../data/Content';

function FontCard({
  font = 'base',
  sample,
  sampleSuffix,
  token,
  description,
}: {
  font?: TextProps['font'];
  sample: string;
  sampleSuffix: string;
  token: string;
  description: string;
}) {
  return (
    <a className="font-card-link" href={siteLinks.fontDownload} target="_blank" rel="noopener">
      <Card className="font-card" appearance="outline">
        <ExternalIcon className="font-card__external" />
        <span className="font-card__sample">
          <Text font={font} size={800}>
            {sample}
          </Text>
          <Text className="font-card__sample-suffix" font={font} size={800} foreground={4}>
            {sampleSuffix}
          </Text>
        </span>
        <div className="font-card__details">
          <Text className="font-card__description" font="base" size={200} foreground={3}>
            {description}
          </Text>
          <Text className="font-card__token" font="monospace" size={100} foreground={4}>
            {token}
          </Text>
        </div>
      </Card>
    </a>
  );
}

function PairedLabel({ children, separator = '/' }: { children: string; separator?: string }) {
  const [first, second] = children.split(' / ');

  if (!second) {
    return first;
  }

  return (
    <>
      {first}
      <span className="type-table__separator" aria-hidden="true">
        {separator}
      </span>
      {second}
    </>
  );
}

export function Typography() {
  return (
    <PageLayout id="typography">
      <Section title="Font families">
        <p>
          Aptos and Aptos Mono are the preferred CoreAI typefaces. This site uses them when
          installed on your device and otherwise uses system fonts. Font files are not included in
          this repository or the npm package.
        </p>
        <div className="card-grid">
          <FontCard
            sample="Aptos Sans"
            sampleSuffix="/ ABCD"
            token="fontFamilyBase"
            description="Primary typeface for UI text, labels, and content."
          />
          <FontCard
            font="monospace"
            sample="Aptos Mono"
            sampleSuffix="/0123"
            token="fontFamilyMonospace"
            description="Monospace typeface for code, data, and technical content."
          />
        </div>
      </Section>
      <Section title="Type scale">
        <div className="type-table">
          <div className="type-table__head">
            <Text size={200} weight="semibold">
              Heading / strong
            </Text>
            <Text size={200} weight="semibold">
              Regular
            </Text>
            <Text size={200} weight="semibold">
              Corresponding Fluent UI
            </Text>
            <Text size={200} weight="semibold">
              Usage
            </Text>
          </div>
          {typographyRows.map((row) => (
            <div
              key={row.strongPreset}
              className="type-table__row"
              data-copy={
                row.regularPreset ? `${row.strongPreset} / ${row.regularPreset}` : row.strongPreset
              }
            >
              <Text className="type-table__example" preset={row.strongPreset} foreground={1}>
                <PairedLabel>{row.strongLabel}</PairedLabel>
              </Text>
              {row.regularPreset ? (
                <Text className="type-table__example" preset={row.regularPreset}>
                  {row.regularLabel}
                </Text>
              ) : (
                <span aria-hidden="true" />
              )}
              <Text className="type-table__preset" font="monospace" size={100} foreground={3}>
                <PairedLabel separator="&">{row.fluent}</PairedLabel>
              </Text>
              <Text className="type-table__usage" foreground={3}>
                {row.usage}
              </Text>
            </div>
          ))}
        </div>
      </Section>
      <p>
        <Link href={siteLinks.fontDownload} external>
          Download Aptos from Microsoft
        </Link>
      </p>
    </PageLayout>
  );
}
```