skills.rest
Haslien
HaslienCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

typography

Define scalable UI type systems with CSS variables and mathematical ratios.

Updated Mar 25, 2026
Search Tags:#typography#accessibility#ui-design#type-scale#typography-system#font-selection#line-height
One-click install
npx skills add https://github.com/Haslien/My-Claude-Skills --skill typography-haslien
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typography
Source: https://github.com/Haslien/My-Claude-Skills/tree/main/.claude/skills/typography
Command: npx skills add https://github.com/Haslien/My-Claude-Skills --skill typography-haslien

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill governs every typographic decision in a UI: font selection, scale, spacing, and micro-typography. The goal is interfaces with a distinct voice — not generic defaults.

Core Features & Use Cases

  • Font Selection: Avoid AI-default fonts; establish pairing rules and provide examples for tone-based font choices.
  • Type Scale & Spacing: Use mathematical ratios and CSS variables to define a scalable type system.
  • Accessibility & Rationale: Enforce contrast, legibility, and readability across UI.

Quick Start

Define a base font, set a scalable type system using a mathematical ratio, and enforce contrast and spacing across the UI.

Frequently Asked Questions about typography

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

FAQPage Schema
How do I create a scalable type system using mathematical ratios in CSS?▼

To create a scalable type system, you define a base font size and apply a mathematical ratio to generate a consistent scale. You then enforce this scale across UI components using CSS variables for spacing and sizing.

What is the best way to avoid generic default fonts in UI design?▼

Avoid generic default fonts by establishing tone-based font selection rules and specific pairing examples. This approach helps you choose typography that gives your interface a distinct voice rather than relying on standard system defaults.

How do I ensure typography accessibility and contrast across different UI states?▼

Ensure typography accessibility by enforcing strict contrast, legibility, and readability rules across all components and interactive states. This guarantees that text remains readable for users regardless of the UI state or context.

Can I use mathematical ratios to define line-height and micro-typography for UI components?▼

Yes, you can use mathematical ratios to define line-height and micro-typography. By applying these ratios alongside CSS variables, you systematically control type spacing and ensure consistent vertical rhythm across your UI design.

Do I need existing CSS variables to implement a professional typography system?▼

No, you do not need existing CSS variables. The process involves defining the CSS variables yourself to govern font selection, type scale, and spacing, establishing a robust foundation for your UI typography system from scratch.

Related Skills

Explore More Design & Creative Skills→
mohamed-g-shoaibmohamed-g-shoaib
2

tailwind-design-system

Standardize UI development with Tailwind CSS v4 design tokens and CSS-first theming.

Community
Advanced
andrewle9510andrewle9510

fd-spacing-layout

Define an 8pt spacing scale and responsive grid layouts for web interfaces.

Community
Advanced
CertChain-IUHCertChain-IUH

colorize

Apply brand-aligned color palettes to UI components for hierarchy and accessibility.

Official
Advanced
guillermoscriptguillermoscript
21

normalize

Analyze and refactor UI components, styles, and layout to align with a specified design system.

Community
Advanced