skills.rest
Nweremizu
NweremizuCOMMUNITY
Explore all skills by this author →
GitHub

typeset

Refine UI typography by adjusting font choice, scale, spacing, and hierarchy.

Updated May 22, 2026
Search Tags:#typography#ui design#spacing#hierarchy#font selection#micro-typography
One-click install
npx skills add https://github.com/Nweremizu/ekklesia --skill typeset-nweremizu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typeset
Source: https://github.com/Nweremizu/ekklesia/tree/main/.junie/skills/typeset
Command: npx skills add https://github.com/Nweremizu/ekklesia --skill typeset-nweremizu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill fixes weak or inconsistent typography in UI work by turning ad hoc text styling into a clear, intentional hierarchy that is easier to read and more polished.

Core Features & Use Cases

  • Font inventory and selection: Identify loaded fonts, avoid default-looking choices, and keep the system to one body font plus an optional display font.
  • Scale, spacing, and hierarchy: Normalize sizes with a modular scale, tune tracking and leading, and make primary, secondary, and tertiary text roles obvious at a glance.
  • Micro-typography polish: Improve numbers, wrapping, punctuation, and small typographic details so dashboards, headers, labels, and content blocks feel finished.
  • Use case: Apply it when a product screen feels visually flat, the text hierarchy is muddled, or a frontend implementation needs a final typography pass before shipping.

Quick Start

Use the typeset skill to review the UI typography and rewrite the text styles for clearer hierarchy, better spacing, and a more refined visual system.

Frequently Asked Questions about typeset

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

FAQPage Schema
How do I fix weak UI typography and inconsistent text hierarchy in frontend design?▼

Fix muddled text hierarchy by normalizing sizes with a modular scale, tuning tracking and leading, and assigning clear primary, secondary, and tertiary text roles for a more polished, readable frontend design.

What is micro-typography polish for dashboards and numeric displays?▼

Micro-typography polish refines tabular numbers, balanced wrapping, and punctuation in UI design, ensuring dashboards, headers, labels, and content blocks feel finished and highly readable.

How do I select and organize UI fonts for a clear visual system?▼

Organize UI fonts by auditing loaded fonts, avoiding default choices, and restricting the system to one body font plus an optional display font, yielding a cohesive and clear visual system.

When should I do a final typography pass before shipping a product screen?▼

Perform a final typography pass before shipping when a product screen feels visually flat, text hierarchy is muddled, or frontend implementation requires refined typesetting for headlines, body text, and labels.

Does this typesetting approach work for both headlines and body text?▼

Yes, this typesetting approach refines headlines, body text, labels, and numeric displays by applying disciplined control of tracking, leading, weight limits, and micro-typography details across frontend and design tasks.

Related Skills

Explore More Design & Creative Skills→
djkloopdjkloop

typeset

Optimizes website and app UX with CSS-based font-size and weight recommendations.

Community
Intermediate
anderskevanderskev
75

tailwind-v4

Configure Tailwind CSS v4 themes using @theme directives and OKLCH colors.

Community
Advanced
trydyddtrydydd

i-layout

Apply spacing systems and hierarchy rules to improve UI layout rhythm.

Community
Intermediate
IncomeStreamSurferIncomeStreamSurfer
25

frontend-design

Generate distinctive frontend design concepts with typography, CSS variables, and motion.

Community
Basic