typeset

Correct UI typography with modular scales and semantic tokens.

Updated May 5, 2026
One-click install
npx skills add https://github.com/riabtsev/viscore_main --skill typeset-riabtsev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: typeset
Source: https://github.com/riabtsev/viscore_main/tree/main/.github/skills
Command: npx skills add https://github.com/riabtsev/viscore_main --skill typeset-riabtsev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It fixes typography that feels generic or inconsistent—improving font choices, hierarchy, sizing, weight, and overall readability so the UI looks crafted instead of default.

Core Features & Use Cases

  • Typography assessment: Identifies weak font usage, unclear heading/body hierarchy, inconsistent scale, and readability problems like line length and line-height.
  • Systematic improvement plan: Establishes a modular type scale, weight strategy, and spacing rhythm that works across UI and content pages.
  • Readability and consistency fixes: Applies best practices for measure (e.g., max-width in ch), typographic details (kerning, letter-spacing), and numeric/label consistency (e.g., tabular numerals).

Quick Start

Type “frontend typeset” and specify the page or component you want improved, then follow the typography audit and plan steps to apply a consistent, readable type system.

Frequently Asked Questions about typeset

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

FAQPage Schema
How do I fix inconsistent UI typography and establish a clear font hierarchy?

To fix inconsistent UI typography, audit your font selection, heading hierarchy, and weight usage. Establish a modular type scale and semantic tokens to ensure text feels intentional, readable, and visually consistent across all interface components.

What is the best way to improve text readability and line length in a user interface?

Improving text readability requires applying accessibility constraints like readable minimum font sizes and optimal line measure. Set max-width using the `ch` unit and adjust line-height to prevent body copy from becoming difficult to read.

How do I set up a modular type scale for consistent UI text styling?

Setting up a modular type scale involves defining a systematic sizing ratio and spacing rhythm. This strategy creates a clear weight hierarchy and ensures consistent typographic details, such as tabular numerals and letter-spacing, across your application.

Can I use this approach to improve both UI components and long-form content pages?

Yes, applying a systematic typography improvement plan establishes a modular type scale and weight strategy that works effectively across both compact UI components and long-form content pages, ensuring overall readability and consistent text presentation.

Why does my body copy look generic and how can I make it feel intentional?

Body copy looks generic when typographic details like kerning, letter-spacing, and numeric consistency are ignored. Correcting font choices and applying a readable measure with proper line-height transforms default text into intentional, crafted UI presentation.

Do I need to implement zoom support and minimum font sizes for UI accessibility?

Yes, implementing accessibility-minded constraints like readable minimum font sizes and zoom support is required. These constraints ensure your typographic system remains accessible and readable for all users interacting with your interface.