# V1 typography review checkpoint

Open `typography.html` through the existing development server (`npm run dev`, port 3005). This is the first review checkpoint for the shared standard. Existing showcase typography is retained pending review; its Typography section links to this page.

The live specimen uses the actual WSDMM configuration wizard's six measured type roles. It is a typography reconstruction using source-derived sizes/weights, not an imported React component. The comparison images are actual application screenshots, not generated previews. Their original controls/backgrounds are context only. The neutral review canvas and editorial page chrome are not a proposed card, button, surface palette or shadow standard.

## Roles

| Role | Below 640px | 640–1023px | At least 1024px | Weight |
|---|---|---|---|---|
| Page title | 16 / 24 | 20 / 28 | 20 / 28 | 700 |
| Step title | 18 / 28 | 20 / 28 | 24 / 32 | 600 |
| Section title | 20 / 30 | 20 / 30 | 20 / 30 | 600 |
| Supporting text | 12 / 16 | 14 / 20 | 14 / 20 | 400 |
| Label | 14 / 20 | 14 / 20 | 14 / 20 | 500 |
| Value | 16 / 24 | 16 / 24 | 16 / 24 | 400 |

Sizes / line heights are pixels. Letter spacing is normal. The page's responsive CSS variables cover the roles that change by breakpoint; fixed roles are scoped specimen classes. R003 consolidates these roles in scss/_tokens.scss and generates theme.css. typography.css now contains review layout and consumes the namespaced variables; see theme-usage.md. The API remains a foundation checkpoint pending review.

## Source and font provenance

Reference: SebastianTamayo/Wsdmmcentral at eab1a9a72ea8ca036be292420b8e5c95f19fd7f7. Actual page path: Welcome → Manual Configuration → Network. Measured evidence is retained in [reference/wizard-typography.json](reference/wizard-typography.json).

Relevant source paths in that repository:

- src/styles/fonts.css: Noto Sans Google Fonts import, weights 300–900.
- src/styles/theme.css: inherited family and base weights.
- src/app/components/ConfigWizard.tsx: page/step titles and supporting text utilities.
- src/app/components/wizard-steps/NetworkStep.tsx: section heading, label and native field text.

The reference captures in assets/references are 1440×1100 actual Network-step screenshots from the same revision and live context themes, with no device configuration applied. Mobile screenshots aren't presented as originals here; the live specimen reflows using the source breakpoints.

The font request and fallback chain match the wizard: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif. Arial is not silently added from the conflicting company image. The page reports whether a webfont face loaded; the browser audit records actual font identity separately. If loading fails, fallback rendering remains usable but is not the approved Noto Sans visual reference.

No font binaries were copied or redistributed in this run. Offline font hosting, exact binary/license inclusion and distribution policy remain open for reusable packaging. Before distributing local fonts, verify the chosen upstream assets/license and preserve required notices. This checkpoint makes no offline-readiness claim.

## Review interaction and scope

The theme control switches the live neutral canvas and matching original screenshot together. It uses a separate storage key (`kb-v1-type-review-theme`) so it doesn't change the existing showcase preference. Storage errors fall back to an operable light review. View at 390px and desktop, inspect the long-label example, and open the original capture at full size when comparing.

Typography alone is review-ready. The theme control is review chrome, not the new shared button. The label/value specimen is text, not a newly styled input. R002 included no shared component migration, palette replacement, application edits or Sass API. R003 adds the Sass/theme foundation separately while retaining this visual baseline.

## Review checklist

- Does the wizard's measured hierarchy feel appropriate for the initial shared standard?
- Are the responsive title/description changes and label/value distinction clear?
- Should any intentional role differences be documented before the font/token contract is finalized?

The user approved proceeding after this checkpoint. M1 is accepted as the typography baseline; font binaries/offline distribution remain release items. M2 now provides the separate theme/Sass foundation before other component areas. See [ROADMAP.md](../ROADMAP.md).

## R002 verification

[Desktop light preview](reference/review-light-desktop.png) · [Mobile dark preview](reference/review-dark-mobile.png) · [Measured results](reference/typography-review-verification.json).

The six roles matched the source measurements at 1440px/390px in both themes, with the intermediate source breakpoint checked at 768px. The inspected step title uses actual custom Noto Sans in all six viewport/theme cases. Theme/image matching, persistence, keyboard toggle and 320px reflow passed; the page remains usable when the font stylesheet request is blocked. Existing KB functional smoke checks passed. Programmatic role checks and the theme keyboard check do not certify all accessibility requirements or offline font coverage. No Sass build or consumer-package validation is claimed in this checkpoint.

## R028 local font distribution

The historical no-local-font statement above is superseded for current references. Optional root fonts.css now loads seven unmodified Google Fonts Noto Sans v42 normal static faces (300–900) from assets/fonts/noto-sans/. Preserve assets/licenses/NotoSans-OFL.txt and provenance.json when distributing. Current references no longer need a Google Fonts request. Italic coverage and font subsetting are not included. See the current adoption guide and local-font-verification.json for actual browser evidence.