Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Web typography: CSS, font loading, responsiveness v1.0.0

Use this resource to generate production web typography that reads well on mobile and desktop

New

  • 508 downloads
  • 127 likes
  • 217 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install web-typography-css-system

First time: connect the CLI with

npx --yes palatekit@latest login

The prompt follows Butterick's principles: body text first, a type scale, two or three font families at most, WOFF2 loading with font-display, and clamp() for fluid sizes. You get CSS or Tailwind classes to test at 320 px and 1440 px.

Mostly picked by

Updated November 2, 2026

Example result of the “Web typography: CSS, font loading, responsiveness” prompt

Details

Generates with
Your agent's model
Licence
CC0-1.0

Similar resources

View all

What you get

  • The full prompt, ready to paste
  • Rules for size, line height and line length
  • Required CSS properties: kerning, text-wrap, font loading

Good fit for

  • Reworking the typography of an existing site
  • Setting a typographic base for a new web project

Not for

    Tags

    • typography
    • css
    • fonts
    • responsive

    About

    You say

    “Set the typography for this blog: serif body, sans-serif headings, 1.25 scale, using Tailwind.”

    Example result of the “Web typography: CSS, font loading, responsiveness” prompt

    Prompt published by c.aksan@gmail.com under the CC0-1.0 license, delivered in its original version.

    Show more

    How to use it

    1. Paste the prompt into your image generator
    2. Replace the variable parts with your own
    3. Generate, then keep the best image

    Content preview

    Files

    • LICENSE0.6 KB
    • NOTICE-PALATEKIT.md0.5 KB
    • web-typography-css-system.md4 KB

    Origin and licence

    Listed unmodified

    Author
    c.aksan@gmail.com
    Source
    github.com/f/prompts.chat/blob/cecef6fc73c2c389770695a56252d331981727de/prompts.csv
    Licence
    CC0-1.0

    Notice

    « Web Typography » (c.aksan@gmail.com, CC0-1.0) livré dans sa version d'origine : fiche en français et en anglais par PalateKit.

    User reviews

    –

    No ratings yet

    Loading reviews…

    Delete your review?

    Your rating and comment will be removed from the page.