skills.rest
Deibler
DeiblerCOMMUNITY
Explore all skills by this author →
GitHub

legibility-typeface-and-size

Select typefaces and font sizes for legible UI, body, code, and display text.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designers and engineers often pick typefaces and sizes ad hoc, producing text that is illegible at small sizes, inconsistent across screens, or mismatched to its rendering context. This Skill provides structured guidance for choosing typefaces by use case and sizing them for real viewing conditions. ## Core Features & Use Cases - Use-case-based typeface selection: Distinguishes display, body, UI, monospace, and accessibility-first typefaces, with concrete recommendations like Inter, JetBrains Mono, and Atkinson Hyperlegible. - Context-aware sizing: Baselines for body (14–16px), captions, headings, and code, adjusted for viewing distance, display DPI, lighting, and audience. - Typographic scale construction: Builds a 5–8 step scale from a base size and ratio (Minor Third, Major Third, Perfect Fourth) to prevent ad-hoc size drift. - Use Case: When designing a SaaS product's type system, apply this Skill to settle on Inter for UI text, a 1.2-ratio scale from 16px base, and JetBrains Mono for code blocks. ## Quick Start Ask the agent to design a type system for your product, specifying the platforms, audience, and whether code or brand display type is needed.

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 a typeface for UI and body text?▼

Choose a body or UI typeface designed for legibility at 12–16px on screens, such as Inter, IBM Plex Sans, or Source Sans Pro. Reserve display typefaces with high stroke contrast for headlines at 24px and above, since they lose distinguishability at small sizes.

What font size should body text be on the web?▼

Body text should be 14–16px for modern UI, with helper text and captions at 12–14px and never below 12px for primary content. Adjust upward for low-DPI displays, mobile outdoor use, or older and low-vision audiences.

Should I use system fonts or a custom typeface?▼

System typefaces like SF Pro, Roboto, and Segoe UI are free, performant, and optimized for their platforms, making them a reasonable default. Custom or licensed typefaces add brand differentiation and cross-platform consistency at the cost of licensing and font loading.

What is a typographic scale and how do I build one?▼

A typographic scale is a small set of 5–8 sizes related by a consistent ratio such as Minor Third (1.2) or Perfect Fourth (1.333). Pick a base size like 16px, multiply by the ratio for each step, and round to whole pixels for crisp rendering.

Why does my display typeface look bad in body copy?▼

Display typefaces have high stroke contrast and expressive proportions that lose distinguishability below 18–24px, making body text hard to read. Restrict them to headlines and switch body copy to a text typeface designed for sustained reading.

Which monospace font is best for code?▼

JetBrains Mono and Fira Code are strong choices because they disambiguate similar characters like 0/O and 1/I/l and support programming ligatures. Monospace is essential for code since proportional fonts break column alignment and scanning.

Related Skills

Explore More Design & Creative Skills→
warpdotdevwarpdotdev
64.7k

tui-testing

Write and run unit tests for Warp TUI elements by rendering to text lines.

Official
Intermediate
hubeiqiaohubeiqiao

nextjs-font-css-variable-collision

Resolves CSS custom property name collisions between next/font and design system variables.

Community
Intermediate
HDeiblerHDeibler
6

legibility

Audit UI text legibility and propose typeface, size, weight, contrast, and spacing fixes.

Community
Intermediate
bketelsenbketelsen

ponytail

Guide decisions toward the simplest solution using standard library features.

Community
Advanced