# Typography

Typography tokens from the Actian foundations.

import TokenScale from "../../../components/TokenScale.astro";
import TokenTable from "../../../components/TokenTable.astro";
import PageMetadata from "../../../components/PageMetadata.astro";
import fontFamily from "../../../../vendor/foundations/dist/tokens/typography/font-family.json";
import fontSize from "../../../../vendor/foundations/dist/tokens/typography/font-size.json";
import lineHeight from "../../../../vendor/foundations/dist/tokens/typography/line-height.json";
import letterSpacing from "../../../../vendor/foundations/dist/tokens/typography/letter-spacing.json";
import textStyleComposite from "../../../../vendor/foundations/dist/tokens/typography/text-style-tokens-composite.json";
import dtcg from "../../../../vendor/tokens/tokens.json";

<PageMetadata
  slug="foundations.typography"
  source="foundations/dist/tokens/typography/"
  schema={1}
/>

Typography tokens for the Actian DS — family, weight, size, line-height, letter-spacing, plus composite text styles.

## Font family

{(fontFamily.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}

## Font weight

<TokenScale data={dtcg.font.weight} prefix="font-weight" visualKind="none" />

## Font size

{(fontSize.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}

## Line height

{(lineHeight.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}

## Letter spacing

{(letterSpacing.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}

## Composite text styles

Composite text-style tokens combine family / weight / size / line-height into named roles (e.g. `body`, `heading`, `caption`). Rendered from the foundations source.

{(textStyleComposite.blocks || []).filter((b) => b.type === "table").map((b) => (
  <TokenTable headers={b.headers} rows={b.rows} />
))}