Summary

The new typography mixins use the @font-family-sans token, which is deprecated. These mixins are used throughout Codex components and may cause font stack changes when font modes is deployed with Codex v2.0.0-rc.1. For example, the Abstract Wikipedia team identified that content within Accordions will now use Helvetica Neue by default, according to the stack defined in @font-family-sans, which overrides the monospace font they want to use in certain elements.

Updates

Mixins

DST has decided to use @font-family-base instead of @font-family-sans in the Codex typography mixins. This matches what is used onwiki. In many cases, users will see the same thing - Helvetica for macOS users, Arial for Microsoft users, etc., but this will ensure we're relying on system fonts and mean we're no longer using a deprecated token.

Documentation

• We need to ensure the Typography style guide page reflects current guidance
• Comments should be added to font-family tokens to help people choose which one to use

Ideally we'd also emit warnings when this and other deprecated tokens are used, but that's for a future task.

Acceptance criteria

• Determine whether we want to use a defined font stack in Codex typography mixins
• If so, determine which font family token(s) to use
• Update the code to use @font-family-base
• Update documentation
• Update font families used in Figma, update designers on update