Typography Integration — Scope Explainer

What it means & why it matters

What SessDev includes

• Ingestion of the client-supplied font files (woff2 preferred, woff fallback) or hosted-service configuration (Adobe Fonts kit, Google Fonts URL) through a structured handoff.
• Loading strategy chosen against measured CLS: font-display: swap or optional, preload hints on critical-path weights, deferred load for non-critical weights.
• @font-face declarations (or next/font wiring when applicable) with correct format hints, unicode-range when subsetting is in scope, and font-feature-settings the client requires.
• A deterministic fallback stack matched on x-height and width to minimize layout shift between fallback and webfont render.
• A type-scale token set (display, h1–h6, body, body-sm, label, caption) wired into Tailwind config and CSS variables so components reference scale steps by intent.
• Wiring of every weight the design uses (e.g. 400/500/700) including italic variants when supplied; weights not used by the design are not loaded.
• Subsetting of self-hosted fonts to the locales declared in scope (latin, latin-ext, or per-locale ranges) to keep payload below the documented budget.
• 1 validation pass: Lighthouse type-loading audit, visual QA against the supplied type spec, license verification that every loaded weight is covered.
• Handoff document listing every loaded family/weight, its source (self-hosted or service), its license reference and the procedure to swap a typeface without touching component code.

What is excluded

• Font selection — evaluating typefaces, matching them to brand voice, pairing display and body fonts.
• Custom typeface design, glyph drawing, OpenType feature authorship, custom ligatures or stylistic sets.
• License procurement — negotiating with foundries, buying webfont licenses, calculating monthly-pageview tiers, securing redistribution rights.
• Authorship of the typography system — deciding the type scale, line-height pairings, modular ratios, or vertical-rhythm rules.
• Brand research, competitive type audits, category-typography analysis.
• Typography audit of the supplied selection, legibility testing, reading-comprehension studies.
• Multilingual type research — verifying glyph coverage for non-Latin scripts, sourcing complementary fonts for CJK or RTL, language-pair quality reviews.
• Hinting, kerning passes, custom OpenType-feature tuning or any font-file editing.
• Display-type design, custom hero typography, lettering or hand-set headlines.
• Icon-font creation. Wiring of an existing icon font is in scope via the icon-library integration item; authoring one is not.
• Authorship of the brand-typography system documentation — usage rules, do/don't grids, brand-guidelines sections on type.

Risks if this is mis-configured

• Unlicensed fonts shipped to production

  Self-hosting a font file without a valid webfont license exposes the client to foundry enforcement and takedown notices. SessDev validates that every loaded weight has a license reference in the handoff; if a file arrives without one, it is rejected. License procurement remains with the client.

• Cumulative Layout Shift from font swap

  A naive font-display: swap without a matched fallback stack flips text width and height when the webfont arrives, tanking CLS and Core Web Vitals. The fallback-stack work in scope tunes ascent-override and size-adjust to minimize the jump; without that pass, the page ships with a measurable CWV regression.

• Fallback-stack mismatch in non-supported locales

  A fallback stack tuned for Latin can break catastrophically on a locale whose primary script is not covered by the webfont. The multilingual-type-research exclusion is intentional; if locales beyond the declared set are added later, the fallback stack must be revisited under the Care retainer.

• Missing glyphs at runtime

  A licensed font that does not cover a required glyph (long dash, smart quote, accented character, Greek letter in a marketing headline) silently falls back to system, producing visible inconsistency. Glyph-coverage validation is a design-team responsibility; SessDev integrates what the client validates.

• Weight sprawl bloats the payload

  Loading every available weight “just in case” inflates the font payload by hundreds of kilobytes per locale. The scope only loads weights the design actually uses; ongoing discipline as new components ship is what the Care retainer enforces.

• Performance regression after a font swap

  Swapping to a heavier family or adding a new weight without re-running the loading-strategy audit can re-introduce CLS, FCP and LCP regressions. The handoff procedure documents the audit step; skipping it is the most common drift cause after launch.

• FOIT / FOUT drift across browsers

  Different browsers honor font-display strategies inconsistently; what looked correct on Chromium can render as a flash of invisible text on Safari for a percentage of users. Validation in scope catches the baseline; ongoing browser-version regressions are absorbed by the Care retainer.

Related scope items

• brand_asset_injectionLogos and brand assets often embed type; the typeface used inside a logo is owned by the logo file, not by this layer.
• color_token_setupType and color are the two halves of the visual system. Same exclusion principle: integration, not authorship.
• icon_library_integrationIcons can rely on font-based libraries; wiring an existing icon font is covered there.
• technical_seoFont loading impacts Core Web Vitals (LCP, CLS) directly, which feeds SEO ranking signals wired in the technical-SEO scope.
• media_infrastructurePreload hints and CDN serving for self-hosted fonts use the same delivery primitives as media.
• content_injectionType-scale tokens are consumed by injected copy; the copy itself follows the content-injection scope.

Frequently asked questions

Can SessDev select our fonts?

No. Font selection is a design-discipline deliverable and is explicitly out of scope. SessDev integrates the typefaces your design team or external studio chooses.

Do you handle font licensing?

No. License procurement, foundry negotiation, monthly-pageview tier calculation and any redistribution agreements remain with the client. SessDev validates that every loaded weight has a license reference at integration time, but does not buy or negotiate licenses.

Can you design a custom typeface for us?

No. Custom typeface design, glyph drawing and OpenType-feature authorship are foundry-grade deliverables and are out of scope. SessDev integrates what a foundry or your design team delivers.

Do you support variable fonts?

Yes, when the client supplies a variable-font file with a valid license. The wiring uses font-variation-settings tokens; selection of which axes to use is a design-team decision.

Will the typography layer pass Core Web Vitals?

The loading-strategy work in scope is tuned for CLS and LCP against the supplied family list. CWV outcomes also depend on factors outside typography (image weight, third-party scripts). The Care retainer absorbs CWV drift across browser-engine changes after launch.