skills.rest
rebuildup
rebuildupCOMMUNITY
Explore all skills by this author →
Website𝕏@361do_sleepGitHub

typesetting

Designs and verifies typography for web UI, documents, and mixed-script content.

1|Updated Sep 11, 2026
Search Tags:#typography#responsive design#design tokens#typesetting#web design#japanese text#line-height
One-click install
npx skills add https://github.com/rebuildup/my-web-2026 --skill typesetting-rebuildup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typesetting
Source: https://github.com/rebuildup/my-web-2026/tree/main/skills/typesetting
Command: npx skills add https://github.com/rebuildup/my-web-2026 --skill typesetting-rebuildup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Typography work often degrades into picking font sizes and copying a reference site's look, producing text that breaks with real content, mixed Japanese/Latin scripts, narrow viewports, or fallback fonts. This Skill provides a disciplined workflow for designing, implementing, and visually verifying typesetting that stays readable and stable under real conditions. ## Core Features & Use Cases - Role-based text classification: Separates display/heading, long-form reading, dense interface text, and Japanese/mixed-script content, then applies role-specific composition rules for measure, line-height, paragraph rhythm, and alignment. - Reference-driven extraction: Inspects real production references and the existing project's type system before changing values, extracting relationships (hierarchy, spacing, numeric alignment) rather than isolated pixel values. - Stress testing and visual verification: Validates typography against shortest/longest realistic content, mixed-script samples, fallback fonts, narrow and wide widths, and UI states before considering the work complete. - Use Case: When building a dashboard with Japanese labels, numeric tables, and a help drawer, use this Skill to classify each text role, tune table numeric alignment and line breaking, and verify nothing clips or overflows at mobile widths. ## Quick Start Use the typesetting skill to review and improve the typography of this page, including headings, body text, tables, and Japanese mixed-script content.

Frequently Asked Questions about typesetting

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

FAQPage Schema
How do I design typography for a web UI with mixed Japanese and English text?▼

Classify each text block by role first, then verify script-specific behavior such as line breaking rules, punctuation handling, baseline alignment, and apparent size differences between Japanese and Latin glyphs. Check actual browser rendering rather than relying on CSS property specifications alone.

How to choose line-height and measure for readable body text?▼

Determine measure from rendered samples rather than leftover layout width, and set line-height based on script density, ascenders, and content type instead of a fixed ratio. Body, headings, and dense labels should not share one line-height ratio.

What is the best way to align numbers in tables for comparison?▼

Align comparable numeric columns so digits read vertically, typically right-aligned, and consider tabular numerals, unit placement, and decimal point alignment. Switching to a monospace font alone does not solve numeric alignment problems.

Does this typography approach work with responsive mobile layouts?▼

Yes, but it avoids uniformly shrinking the desktop type scale on mobile. It checks text measure, heading wrap, spacing, and table behavior per viewport, sometimes changing layout width instead of font size.

When should text styles become semantic design tokens?▼

Promote recurring text roles like body, label, caption, or table text into semantic tokens, but avoid value-only names like text-13 or duplicating near-identical styles. One-off display treatments should not become global tokens.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
nazlicancaglarnazlicancaglar

visual-design-system

Translate brand visual identity into tokenized CSS custom properties and design tokens.

Community
Advanced
trobiastrobias

web-typography

Select, pair, and implement web typefaces with CSS for readable, performant typography.

Community
Intermediate
Software-Design-ClubSoftware-Design-Club
1

Frontend CSS

Enforce consistent CSS methodologies and design tokens across stylesheets.

Official
Basic