Skip to content

web: give display text an optical size using Inter's opsz axis #835

Description

@mforce

Component plan: build this from the components named in docs/designs/822-mui-revamp.md. The rule is "reused, never rebuilt" — composing MUI primitives into a screen wrapper is expected; reimplementing behaviour a shared component already has is not. Say in the PR which row of that table covers this screen.

Part of #674. Inherited from #656 (closed 2026-09-13), question 2 of 3.

Inter everywhere at one optical size gives headings and stat figures no voice.
font-variation-settings: "opsz" 32 on h1, h2, .stat-value buys tighter display cuts at zero
download cost.

Already answered, incidentally (2026-09-02): the installed @fontsource-variable/inter does
carry the opsz axis — web/node_modules/@fontsource-variable/inter/files/ contains
inter-*-opsz-normal.woff2. The risk that the default entry ships wght only does not apply.
Do not re-investigate this.

Interacts with the MUI typography scale decision on this epic — if MUI owns headings after
conversion, this setting has to reach MUI's Typography too, not only bare h1/h2.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:frontendReact/Vite web clientepic-674SPA revamp — field-first phone, ledger desktop (#674)phase:4-identityBrand, colour and type identitypriority:tier4Deferred or speculativesliceThin vertical work item

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions