skills.rest
Daiwik-Chilukuri
Daiwik-ChilukuriCOMMUNITY
Explore all skills by this author →
GitHub

typeset

Correct inconsistent typography and generate font pairings, type scales, and CSS tokens.

2|Updated Mar 21, 2026
Search Tags:#typography#accessibility#readability#design-system#web-ui#type-scale#font-pairing
One-click install
npx skills add https://github.com/Daiwik-Chilukuri/HTI-LAB-AGENTIC-AI --skill typeset-daiwik-chilukuri
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typeset
Source: https://github.com/Daiwik-Chilukuri/HTI-LAB-AGENTIC-AI/tree/main/.claude/skills/typeset
Command: npx skills add https://github.com/Daiwik-Chilukuri/HTI-LAB-AGENTIC-AI --skill typeset-daiwik-chilukuri

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill identifies and remedies generic, inconsistent, or poorly structured typography that undermines readability and brand clarity. It turns default-looking text into an intentional, legible, and cohesive typographic system that supports user comprehension and visual hierarchy.

Core Features & Use Cases

  • Font selection & pairing: Replace invisible defaults with fonts that match brand personality and performance constraints.
  • Hierarchy & type scale: Establish a consistent modular scale, clear heading/body/caption distinctions, and size/weight roles.
  • Readability & accessibility: Ensure comfortable line-lengths, appropriate line-heights, sufficient contrast, and WCAG-friendly sizing.
  • Implementation guidance: Deliver CSS token recommendations, weight-loading strategies, and performance-minded font loading techniques.
  • Use Case: Improve a web app UI where headings blend into body text, fix line-lengths on article pages, and produce tokens for a design system.

Quick Start

Review the page, recommend a font pairing, a 5-step modular type scale, and the CSS token names and values needed to improve hierarchy, readability, and accessibility.

Frequently Asked Questions about typeset

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

FAQPage Schema
How do I fix inconsistent typography and poor readability in my web UI?▼

Fix inconsistent web UI typography by replacing default fonts with brand-appropriate pairings, establishing a modular type scale, and applying correct weight roles to restore visual hierarchy and readability.

What is a modular type scale and how does it improve content hierarchy?▼

A modular type scale is a structured set of font sizes with consistent ratios. It improves content hierarchy by establishing clear distinctions between headings, body text, and captions, making interfaces easier to scan and comprehend.

How do I choose font pairings that match my brand personality?▼

Choose font pairings by evaluating brand personality against performance constraints, replacing invisible default fonts with intentional combinations that support visual cohesion and legibility across marketing pages and web interfaces.

Can I generate CSS tokens for my design system typography?▼

Yes, you can generate CSS token recommendations including names, values, and weight-loading strategies to implement a consistent typographic system across your design system while maintaining optimal font loading performance.

How do I ensure my typography meets WCAG accessibility requirements?▼

Ensure typography meets WCAG accessibility requirements by checking for sufficient color contrast, maintaining comfortable line-lengths and line-heights, and applying WCAG-friendly sizing to support user comprehension and accessibility.

What is the best way to structure typography for a design system?▼

The best way to structure design system typography is to define a consistent modular scale with clear size and weight roles, then export actionable CSS tokens and performance-minded font loading techniques for implementation.

Related Skills

Explore More Design & Creative Skills→
deomiarndeomiarn

typography-audit

Audit typography hierarchy and fix header structure across page sections.

Community
Advanced
yogvidwankhedeyogvidwankhede
1

typographic-systems

Define modular type scales and font-loading strategies for web interfaces.

Community
Advanced
OlatisunkanmiOlatisunkanmi
8

i-typeset

Assess typography and propose modular type scales with font pairings.

Community
Intermediate
kireevkit15-syskireevkit15-sys

typeset

Audit and correct typography for digital interfaces with CSS tokens.

Community
Intermediate