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.

PalateKit Pick

Web typography: choosing, pairing and loading fonts v1.0.0

Use this resource to choose and set up a website's typography

New

  • 431 downloads
  • 119 likes
  • 237 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install web-typography

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent assesses your fonts, suggests pairings, sets size, line length and line height, and writes fluid CSS with clamp(). It scores the current state out of 10 with a quick diagnostic and lists what to fix. You end up with typography that is readable, consistent and light to load.

Mostly picked by

Updated November 2, 2026

Example of a typographic hierarchy on a page: heading, subheading and body text.

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: seven core principles, common mistakes and a 10-question diagnostic
  • typeface-anatomy.md: letterform vocabulary and classification
  • evaluating-typefaces.md and pairing-strategies.md: vetting a typeface and pairing well
  • css-implementation.md and responsive-typography.md: CSS, @font-face, variable fonts and clamp()

Good fit for

  • You are torn between two fonts for a site or blog
  • The text on your page is hard to read
  • Your web fonts slow down loading

Not for

  • Designing a full interface design system
  • Creating a dramatic, experimental typographic experience
  • Drawing a custom typeface

Tags

  • typography
  • fonts
  • css
  • readability
  • web

About

You say

"Suggest a font pairing for my cooking blog and write responsive CSS with body text that is readable on mobile."

Example of a typographic hierarchy on a page: heading, subheading and body text.

Skill published by wondelai under the MIT license.

Show more

Prerequisites

You bring
The address or code of the page to improve and The brand tone and target audience

How to use it

  1. Install the skill in your agent's skills folder.
  2. Describe the site, its tone and its audience.
  3. Apply the proposed CSS, then run the quick diagnostic again.

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/css-implementation.md11.2 KB
  • references/evaluating-typefaces.md8.5 KB
  • references/pairing-strategies.md8.5 KB
  • references/responsive-typography.md9.3 KB
  • references/typeface-anatomy.md7.9 KB
  • SKILL.md18 KB

Origin and licence

Modified by PalateKit

Author
wondelai
Source
github.com/wondelai/skills/tree/c172996495bed0fcd26896a9416b2093fd7073f0/web-typography
Licence
MIT

Notice

Version modifiée de « web-typography » (wondelai, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Are the reference files needed?

They go deeper on each topic and ship with the skill. Only SKILL.md is translated into French; the references stay in English.

Are the fonts mentioned included?

No. The skill helps you choose and load fonts, but you must check the web license of each one.