typography

Featured

UI typography on Apple platforms — text styles and Dynamic Type, the San Francisco family (Pro/Rounded/Compact/Mono/New York + width axis), optical sizes, tracking vs kerning, leading adjustments, and custom-font scaling. Use when choosing fonts, building type hierarchy, fixing truncation/legibility, or making custom fonts respect Dynamic Type.

AI & Automation 564 stars 47 forks Updated 3 days ago MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
92
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Typography Type is most of your UI. The system does the hard parts — optical sizes, tracking tables, Dynamic Type — *if* you use its APIs. This skill covers when to trust the system, how to build hierarchy deliberately, and what custom fonts owe you back. ## When This Skill Activates - Choosing fonts or building a type hierarchy for a screen or app - Text truncating, cramping, or breaking under larger Dynamic Type sizes - Adopting a custom/brand font (and keeping accessibility) - Display typesetting: hero numbers, stats, editorial headlines ## Rule 1: text styles first Predefined styles (Large Title → Caption 2) are weight + size + leading combos with Dynamic Type support built in — and different styles scale *differently* (body grows more than footnote), which manual font sizes can't replicate. - Build hierarchy from 2–3 text styles + emphasized variants (bold trait — the actual weight varies per style: some go medium→semibold, others bold→heavy) before reaching for new fonts. - Semantic colors + text styles together give dark mode, contrast, and Dynamic Type for free. - macOS supports text styles (without Dynamic Type); design Mac type at 100% — no iOS-style scaling assumptions. ## Rule 2: let optical sizes and tracking work - San Francisco blends Text→Display designs **continuously between 17 and 28pt** (below: sturdier letterforms, looser tracking for legibility; above: tighter, more refined). System font APIs do this automatically — hardcoded single-cut...

Details

Author
rshankras
Repository
rshankras/claude-code-apple-skills
Created
9 months ago
Last Updated
3 days ago
Language
Swift
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

apple-typography-workflow

Guide Apple platform typography decisions and implementation across SwiftUI Font, UIKit UIFont, AppKit NSFont, San Francisco system fonts, SF Pro, SF Compact, SF Mono, SF Pro Rounded, New York serif design, Dynamic Type, text styles, fontDesign, fontWeight, fontWidth, monospaced digits, custom font bundle integration, font licensing and redistribution boundaries, accessibility scaling, and Xcode font asset validation. Use when a task mentions Apple typography, San Francisco, SF Pro, SF Compact, SF Mono, New York, Dynamic Type, UIFontMetrics, preferredFont, NSFont.TextStyle, custom fonts, UIAppFonts, ATSApplicationFontsPath, or text style repair.

6 Updated 3 days ago
gaelic-ghost
Web & Frontend Listed

better-typography

Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, checking heading hierarchy, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, heading hierarchy, heading levels, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.

3 Updated 3 days ago
arthjean
Web & Frontend Listed

ui-component-typography

Use when setting type inside interface components — buttons, labels, inputs, form errors, navigation, badges, tooltips, tables, dense dashboards. Also use when numbers jitter in a table, labels wrap unpredictably, UI text is illegible at small sizes, or a component's text breaks in another language.

1 Updated today
jpoindexter