typeset

Establishes typography systems with fonts, spacing, and accessibility for web and mobile.

Updated Oct 30, 2025

Search Tags:#typography #branding #accessibility #readability #design-principles #ui-design #typography-system

Ready to run

npx skills add https://github.com/juanelojga/juanelojga-webpage --skill typeset-juanelojga

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: typeset
Source: https://github.com/juanelojga/juanelojga-webpage/tree/main/.agents/skills/typeset
Command: npx skills add https://github.com/juanelojga/juanelojga-webpage --skill typeset-juanelojga

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Typography inconsistencies across interfaces hinder readability and weaken brand clarity; this skill addresses font choices, hierarchy, sizing, and weight consistency to create intentional, polished type.

Core Features & Use Cases

Typography system design: Define a scalable font stack, weight mapping, and line-height strategy to ensure consistent hierarchy across products.
Accessibility & readability: Improve contrast, measure line length, and ensure legible sizes across devices for inclusive design.
Practical applications: Apply typography guidelines to dashboards, marketing pages, and product UI to achieve cohesive typography.

Quick Start

Apply the typography guidelines to your current project by selecting fonts, establishing a modular scale, and enforcing consistent font weights.

Frequently Asked Questions about typeset

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

FAQPage Schema

How do I create a consistent typography system for a UI design project?▼

Create a typography system by defining a scalable font stack, weight mapping, and line-height strategy. This ensures consistent hierarchy across products by diagnosing font choices, sizing, and readability to produce polished, brand-aligned text.

What's the best way to improve text readability and accessibility across web interfaces?▼

Improve readability and accessibility by optimizing contrast, measuring line length, and ensuring legible sizes across devices. This establishes inclusive design rules for body copy and interface text, ensuring all users can comfortably read your content.

How do I set up a modular scale for font sizing in an app?▼

Set up a modular scale by selecting appropriate fonts and enforcing consistent font weights across your interface. This structured approach to sizing creates a clear visual hierarchy for dashboards, marketing pages, and product UI elements.

Can I apply these typography principles to both marketing pages and product UI dashboards?▼

Yes, you can apply these typography guidelines to both marketing pages and product UI dashboards. The skill diagnoses font choices and establishes a cohesive type system suitable for various web and app interfaces requiring brand alignment.

Why does my interface typography look inconsistent and weaken brand clarity?▼

Interface typography looks inconsistent due to unmanaged font choices, hierarchy, sizing, and weight variations. Establishing an intentional typography system with defined spacing rules and a modular scale resolves these issues and strengthens brand clarity.

Do I need specific design components or dependencies to establish a typography system?▼

No specific dependencies or components are required to establish a typography system. You can apply the guidelines directly to your current project by selecting fonts, defining a modular scale, and mapping weights without external tools.