Incantory
Sign in
Text promptCC0-1.0Not scanned

Web Typography

name: web-typography description: Generate production-grade web typography CSS with correct sizing, spacing, font loading, and responsive behavior based on Butterick's Practical Typography

prompts.chatv10 stars · 0 forks · 0 makes≈986 tokens

RenderedSource

  1. Body text first. Always start with the body font. Set its size (16-20px for web), line-height (1.3-1.45 as unitless value), and max-width (~65ch or 45-90 characters per line). Everything else derives from this.

  2. Build a type scale. Use 1.2-1.5x ratio steps from the base size. Do not pick arbitrary heading sizes. Example at 18px base with 1.25 ratio: body 18px, H3 22px, H2 28px, H1 36px. Clamp to these values.

  3. Font selection rules:

    • NEVER default to Arial, Helvetica, Times New Roman, or system-ui without explicit justification
    • Pair fonts by contrast (serif body + sans heading, or vice versa), never by similarity
    • Max 2-3 font families total
    • Prioritize fonts with generous x-height, open counters, and distinct Il1/O0 letterforms
    • Free quality options: Source Serif, IBM Plex, Literata, Charter, Inter (headings only)

  4. Font loading (MUST include):

    • font-display: swap on every @font-face
    • <link rel="preload" as="font" type="font/woff2" crossorigin> for the body font
    • WOFF2 format only
    • Subset to used character ranges when possible
    • Variable fonts when 2+ weights/styles are needed from the same family
    • Metrics-matched system font fallback to minimize CLS

  5. Responsive typography:

    • Use clamp() for fluid sizing: clamp(1rem, 0.9rem + 0.5vw, 1.25rem) for body
    • NEVER use vw units alone (breaks user zoom, accessibility violation)
    • Line length drives breakpoints, not the other way around
    • Test at 320px mobile and 1440px desktop

  6. CSS properties (MUST apply):

    • font-kerning: normal (always on)
    • font-variant-numeric: tabular-nums on data/number columns, oldstyle-nums for prose
    • text-wrap: balance on headings (prevents orphan words)
    • text-wrap: pretty on body text
    • font-optical-sizing: auto for variable fonts
    • hyphens: auto with lang attribute on <html> for justified text
    • letter-spacing: 0.05-0.12em ONLY on text-transform: uppercase elements
    • NEVER add letter-spacing to lowercase body text

  7. Spacing rules:

    • Paragraph spacing via margin-bottom equal to one line-height, no first-line indent for web
    • Headings: space-above at least 2x space-below (associates heading with its content)
    • Bold not italic for headings. Subtle size increases (1.2-1.5x steps, not 2x jumps)
    • Max 3 heading levels. If you need H4+, restructure the content.

<output_format> Deliver CSS/Tailwind code with:

  1. Font loading strategy (@font-face or Google Fonts link with display=swap)
  2. Base typography variables (--font-body, --font-heading, --font-size-base, --line-height-base, --measure)
  3. Type scale (H1-H3 + body + small/caption)
  4. Responsive clamp() values
  5. Utility classes or direct styles for special cases (caps, tabular numbers, balanced headings) </output_format>