skills.rest
aymenhamoudii
aymenhamoudiiCOMMUNITY
Explore all skills by this author →
GitHub

typeset

Audit web and product typography and generate CSS token implementation plans.

Updated Mar 21, 2026
Search Tags:#typography#accessibility#readability#webfonts#font pairing#type scale
One-click install
npx skills add https://github.com/aymenhamoudii/digitn-website --skill typeset-aymenhamoudii
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typeset
Source: https://github.com/aymenhamoudii/digitn-website/tree/main/.qwen/skills/typeset
Command: npx skills add https://github.com/aymenhamoudii/digitn-website --skill typeset-aymenhamoudii

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve typography that feels generic, inconsistent, or unreadable by providing a clear audit and actionable fixes for font choices, hierarchy, sizing, weight consistency, and spacing so text feels intentional and polished.

Core Features & Use Cases

  • Assessment: Identify weak font choices, hierarchy issues, inconsistent weights, improper sizing, poor line-length, and contrast problems.
  • Systematic Plan: Recommend font pairings, a modular type scale, weight roles, spacing rules, and webfont loading strategies (font-display, fallbacks).
  • Implementation Guidance: Provide CSS tokens, rem-based scales or clamp() recommendations, max-width in ch, and accessibility checks for contrast and zoom.
  • Verification: Validate hierarchy, readability, performance impacts, and consistency across marketing pages and app UIs.
  • Use Case: Turn a bland landing page using default system fonts into a branded, accessible, and performant typographic system for headings, body, captions, and data tables.

Quick Start

Run a typography audit on the homepage and deliver a prioritized plan with recommended font pairings, a modular type scale, CSS token names, and accessibility fixes.

Frequently Asked Questions about typeset

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix bad typography and establish a readable type scale for my web interface?▼

To fix bad typography, audit font choices, hierarchy, and weight consistency to establish a modular type scale with accessible base sizes (>=16px), proper line-height, and rem-based or fluid clamp() sizing for readable web interfaces.

What is the best way to choose font pairings for headings and body text?▼

Choosing font pairings involves limiting font families and weights to specific roles, then applying a systematic plan that assigns distinct heading and body fonts while ensuring readable line-length and consistent spacing across marketing pages and app UIs.

Can I use this typography audit for content-heavy sites and marketing pages?▼

Yes, you can apply this typography audit to content-heavy sites and marketing pages to assess weak font choices, establish semantic CSS tokens, and verify readability, performance impacts, and contrast accessibility across various interface types.

How do I implement efficient webfont loading and ensure accessibility for text sizing?▼

Implement efficient webfont loading using font-display strategies and fallbacks, while ensuring accessibility by applying contrast checks, max-width in ch units, accessible base sizes (>=16px), and rem-based scales or clamp() recommendations for zoom support.

Why does my website typography look generic and inconsistent across different UI components?▼

Website typography looks generic and inconsistent due to weak font choices, improper sizing, and unmanaged weight roles, requiring a systematic plan with semantic CSS tokens and a modular type scale to make text feel intentional and polished.

Related Skills

Explore More Design & Creative Skills→
CatsofsufferingCatsofsuffering
5

typeset

Assess typography and produce implementation-ready CSS tokens and type scale recommendations.

Community
Intermediate
DanialHaseebDanialHaseeb

typeset

Diagnose and correct typography in UI and content text.

Community
Intermediate
naviktnavikt
1

polish

Fix visual and content inconsistencies in frontend components across breakpoints.

Official
Advanced
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate