pgts-web

name	pgts-web
description	Apply Pretty Good Type Scale (PGTS) in web projects using the generated CSS. Use when a coding agent needs to integrate PGTS in HTML, CSS, React, Next.js, design-token CSS, responsive typography, print CSS, or browser-based design systems.

PGTS Web

Use this skill when the target is a website or web application. Use css/pgts.css directly unless the host project already has a token build pipeline that must consume tokens/pgts.tokens.json.

Canonical roles: editorial-mega-display, display-large, display, headline-large, headline, title-large, title, body, footnote, caption, legal.

Lean roles for product UI: display, headline-large, title-large, title, body, footnote.

Integration

Import the generated CSS:

<link rel="stylesheet" href="css/pgts.css">

Or import it from application CSS:

@import "./css/pgts.css";

Wrap a document area in .pgts when semantic HTML aliases should apply:

<article class="pgts fluid-clamped">
  <h1>Pretty Good Type Scale</h1>
  <h2>Semantic roles, responsive values</h2>
  <p>Use HTML roles while the mode controls how type responds.</p>
</article>

Use explicit classes when the HTML tag and type role differ:

<p class="headline-large">Section-like copy set as a paragraph</p>

Modes

• Use default mode for conservative product UI.
• Use .fluid for expressive pages where viewport growth is acceptable.
• Use .fluid-clamped for responsive pages that need a floor, preferred value, and ceiling.
• Use print output from the generated @media print rules; proof the final PDF or physical print.

Font Hooks

Set host font variables outside the generated file:

:root {
  --pgts-heading-font-family: var(--brand-heading-font);
  --pgts-body-font-family: var(--brand-body-font);
  --pgts-heading-wght-axis: 300;
  --pgts-heading-wdth-axis: 88;
  --pgts-heading-opsz-axis: 64;
}

Do not edit css/pgts.css by hand. Update tokens/pgts.tokens.json, then run npm run build.

Verification

• Check one narrow viewport and one desktop viewport.
• Confirm no horizontal overflow from display roles.
• Check browser zoom up to 200 percent.
• Confirm the chosen font still reads correctly at body, footnote, caption, and legal.
• Run npm run validate after token or generator changes.