skills.rest
HDeibler
HDeiblerCOMMUNITY
Explore all skills by this author →
GitHub

legibility-typeface-and-size

Select typefaces and font sizes for legible interface typography.

6|3|Updated May 3, 2026
Search Tags:#typography#readability#ui design#type system#legibility#monospace#font sizing
One-click install
npx skills add https://github.com/HDeibler/universal-design-principles --skill legibility-typeface-and-size
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: legibility-typeface-and-size
Source: https://github.com/HDeibler/universal-design-principles/tree/main/plugins/perception-and-hierarchy-principles/skills/legibility-typeface-and-size
Command: npx skills add https://github.com/HDeibler/universal-design-principles --skill legibility-typeface-and-size

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Incorrect typeface and font sizing make text hard to read, even if contrast and spacing are later optimized.

Core Features & Use Cases

  • Typeface-by-use selection: Match display, body, UI, monospace (code), and specialty fonts to their intended rendering contexts.
  • Rendering-context sizing: Set font sizes based on viewing distance, display DPI, environment/lighting, and user population needs.
  • Typographic system support: Build a coherent scale (e.g., Minor Third, Major Second) instead of ad-hoc sizes to keep hierarchy consistent.

Quick Start

Ask the agent to recommend a typographic setup for your product screens (body, headings, captions, and code) using a legible 1.2 typographic scale for a base size of 16px and a monospace option for code.

Frequently Asked Questions about legibility-typeface-and-size

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

FAQPage Schema
How do I choose the right typeface and font size for UI readability?▼

Choose a typeface and font size by matching font categories like display, body, UI, or monospace to their rendering context. Set sizes based on viewing distance, display DPI, and audience needs to ensure UI readability.

What is a typographic scale and why do I need one for interface typography?▼

A typographic scale uses mathematical ratios like Minor Third or Major Second to size body, headings, and captions consistently. It prevents ad-hoc font sizing drift and maintains clear visual hierarchy across interface typography.

Does viewing distance and display DPI affect font sizing for product text?▼

Viewing distance and display DPI directly affect font sizing for product text. Selecting sizes based on rendering context, environment lighting, and user population needs ensures text remains legible across different real viewing conditions.

Can I use a monospace font for code blocks in my UI type system?▼

You can use monospace fonts for code blocks within your UI type system. Matching font categories to intended use cases ensures code snippets remain legible alongside body text, headings, and captions in product interfaces.

What is the best way to evaluate if my current UI type system is legible?▼

Evaluate UI type system legibility by checking if typeface categories match rendering contexts and if font sizes account for display DPI and viewing distance. Replace ad-hoc sizes with a consistent typographic scale to fix drift.

Related Skills

Explore More Design & Creative Skills→
dvdsgldvdsgl
1.5k

document

Display and edit Markdown documents with text selection and diff highlighting.

Community
Intermediate
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
PavkaBrikaPavkaBrika
1

typeset

Adjusts UI and marketing text typography including fonts, hierarchy, sizing, spacing, and readability.

Community
Intermediate
etewiahetewiah
635

theme-evaluation

Evaluate theme palettes for WCAG contrast and accessibility compliance.

Community
Advanced