skills.rest
mngarcia
mngarciaCOMMUNITY
Explore all skills by this author →
GitHub

web-typography

Evaluate website typography by analyzing typeface choices, measurements, hierarchy, and performance.

Updated Apr 5, 2026
Search Tags:#responsive typography#web typography#typeface selection#web font performance#typeface pairing#typographic measurements#type hierarchies
One-click install
npx skills add https://github.com/mngarcia/spun-pages --skill web-typography-mngarcia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-typography
Source: https://github.com/mngarcia/spun-pages/tree/main/.claude/skills/web-typography
Command: npx skills add https://github.com/mngarcia/spun-pages --skill web-typography-mngarcia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance on selecting, pairing, and implementing typefaces for web projects, helping you create effective and readable typographic experiences.

Core Features & Use Cases

  • Typography Principles: Learn and apply core typography principles for better readability and user experience.
  • Typeface Evaluation: Evaluate typefaces based on technical, structural, and practical quality.
  • Typeface Selection: Choose the right typeface for various contexts and content types.
  • Typeface Pairing: Discover strategies for successful typeface pairings.
  • Typographic Measurements: Understand and adjust font size, line length, and line height for optimal readability.
  • Building Type Hierarchies: Create clear and consistent visual hierarchies.
  • Responsive Typography: Adapt typography to different screen sizes and devices.
  • Web Font Performance: Optimize web font loading and performance.
  • Common Mistakes: Identify and avoid common typography mistakes.
  • Quick Diagnostic: Get a quick assessment of your web typography setup.
  • Reference Files: Access detailed reference materials on typeface anatomy, evaluation, pairing, responsive typography, and more.

Quick Start

Use the web-typography skill to evaluate the typography of a given website 'https://example.com'.

Frequently Asked Questions about web-typography

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

FAQPage Schema
How do I evaluate web typography for legibility and readability?▼

You can perform a quick diagnostic of your website's typography setup to assess typeface choices, measurements, hierarchy, and performance. It applies best practices for readability, legibility, and performance optimization.

What's the best way to choose typeface pairings for my website?▼

Successful typeface pairings require strategies that balance technical, structural, and practical quality. This skill provides expert guidance to help you choose and pair typefaces effectively for various web contexts and content types.

How do I optimize web font performance for responsive designs?▼

Responsive typography adapts font sizing and measurements to different screen sizes and devices. This skill helps you understand and adjust font size, line length, and line height while optimizing web font loading and performance.

How do I build clear and consistent type hierarchies?▼

Building type hierarchies creates clear visual structures using typographic measurements. This skill helps you understand and adjust font size, line length, and line height to establish consistent visual hierarchies across your web project.

What are common web typography mistakes and how can I identify them?▼

Common web typography mistakes often involve poor typographic measurements, inadequate hierarchies, or suboptimal font performance. This skill helps you identify and avoid these errors by applying established web typography principles.

Related Skills

Explore More Design & Creative Skills→
ianyimiianyimi
1

Frontend Accessibility

Identify frontend accessibility issues in code and propose fixes.

Community
Basic
OlatisunkanmiOlatisunkanmi
8

i-typeset

Assess typography and propose modular type scales with font pairings.

Community
Intermediate
erichowenserichowens
181

typography-expert

Generates font pairings and CSS type scales for web typography.

Community
Advanced
GatsbyhateyouGatsbyhateyou

web-typography

Select and pair typefaces for responsive web typography.

Community
Advanced