@erikakers/typography

A reusable Sass typography module

Enforces what is normative (WCAG), respects the psychophysical bounds (vision science), and declares everything between as convention — labelled as convention, in the source and here.

Vendor-neutral by construction: custom properties are --type-*, classes are.type-*, nothing is namespaced to a design system. A design system is a consumer of this module, not its owner.

Install

npm install @erikakers/typography

The package is reachable only through its exports sass condition. A bare load-path import fails:

// Fails — resolves via the filesystem, never sees "exports"
@use '@erikakers/typography';

Dart Sass's NodePackageImporter is the only importer that reads a package's exports field. Wire it into your build (Astro's vite.config, or any Vite-based tool):

import { NodePackageImporter } from 'sass';

css: {
  preprocessorOptions: {
    scss: { importers: [new NodePackageImporter()] },
  },
}

Then the package resolves:

@use 'pkg:@erikakers/typography/global';

This is the first thing that bites a new consumer — see the full support table on browser and build-tool support for what else needs it.

Reference

The implementation guide walks through setup and usage, then settings and roles detail the configuration surface. Read the element layer for two ofelements()'s working limits, and the scale curve for the derivation behind the type scale's soft-knee ceiling.

Specimen

Every element that carries text, rendered live by the installed module — nothing annotated, nothing propped up. An element the module does not reach yet renders badly on purpose, where it can be looked at.

Conformance

The normative layer, enforced rather than suggested: never !important on a text-spacing property, no capped block size with clipping overflow on text, padding around text in em, no viewport or container units on a text-adjacent length. Covered by conformance(), documented in the implementation guide.