Type Tokens

Portable font, size, weight, leading, and tracking tokens.

fontstudio.dev

Typography tokens are most useful when they can leave the design tool without losing their shape. typetokens gives a type system five explicit namespaces and serialises them into CSS custom properties with predictable names.

This is a small dependency-free set of helpers. The token object is frozen so it can be safely shared between a preview and a build pipeline.

Usage

import { createTypeTokens, token, tokensToCss } from "typetokens";

const tokens = createTypeTokens({
  family: { sans: "Inter, sans-serif" },
  size: { display: "clamp(3rem, 8vw, 8rem)" },
  weight: { display: 650 },
});

tokensToCss(tokens);
// :root {
//   --type-family-sans: Inter, sans-serif;
//   --type-size-display: clamp(3rem, 8vw, 8rem);
//   --type-weight-display: 650;
// }

token("size", "display"); // "var(--type-size-display)"

API

| Export | Purpose | | --- | --- | | createTypeTokens(input) | Creates a frozen token set with family, size, weight, leading, and tracking namespaces. | | token(namespace, name) | Returns the CSS variable reference for a token. | | tokensToCss(tokens, selector) | Serialises all tokens as a CSS custom-property block. | | TypeTokenInput | Optional input for the five token namespaces. | | TypeTokens | Readonly token set returned by createTypeTokens. |

Development

npm run build --workspace=typetokens

MIT.