skills.rest
olzn
olznCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

type-craft

Generate typography systems with type scales, vertical rhythm, and CSS custom properties.

16|1|Updated Feb 6, 2026
Search Tags:#typography#design tokens#css variables#type scale#font loading#vertical rhythm
One-click install
npx skills add https://github.com/olzn/ui-craft --skill type-craft-olzn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: type-craft
Source: https://github.com/olzn/ui-craft/tree/main/type-craft
Command: npx skills add https://github.com/olzn/ui-craft --skill type-craft-olzn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers struggle to create consistent, performant typography without a clear scale, vertical rhythm, and reliable font loading strategy, leading to visual inconsistency and layout shift.

Core Features & Use Cases

  • Type Scale: Define modular or custom scales, fixed or fluid, with CSS custom properties for token integration.
  • Vertical Rhythm: Align line‑heights, spacing, and margins to a baseline grid.
  • Font Loading & Variable Fonts: Configure @font-face with font-display swap, metric overrides, subsetting, and variable‑font axes.
  • OpenType Features & Pairing: Enable kerning, ligatures, contextual alternates, and choose complementary font families.
  • Rendering & Checklist: Apply smoothing, text‑rendering optimizations, and follow a comprehensive checklist to avoid common pitfalls.

Quick Start

Ask the type-craft skill to generate a complete type scale and CSS variables for a 16px base using a major third ratio.

Frequently Asked Questions about type-craft

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

FAQPage Schema
How do I create a scalable type scale using CSS variables?▼

Achieve vertical rhythm by aligning line-heights, spacing, and margins to a baseline grid using unitless line-height values. This prevents text overlap and maintains consistent vertical spacing across layout components.

What's the best way to configure variable font axes and @font-face loading?▼

Configure @font-face loading by applying font-display swap strategies, font metric overrides, and subsetting, alongside specifying variable-font axes. This approach ensures reliable font loading and prevents layout shift.

How do I enable OpenType features like kerning and ligatures for web fonts?▼

Enable OpenType features by configuring kerning, ligatures, and contextual alternates within your CSS typography system. This improves text rendering quality and ensures proper character pairing.

Does this typography system generation require a specific base font size?▼

No specific base size is mandated. You can generate typography systems using any base size, such as a 16px base with a major third ratio, applying baseline grids and design tokens for scalable results.

Why does my web typography suffer from visual inconsistency and layout shift?▼

Visual inconsistency and layout shift occur when web typography lacks a clear type scale, vertical rhythm, and reliable font loading strategy. Applying baseline grids and font-display swap mitigates these issues.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

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

Community
Intermediate
carayacaraya
1

css-core

Standardize CSS architecture, design tokens, and accessibility with custom properties.

Community
Intermediate
kubermatickubermatic
1

normalize

Align UI features with design system tokens, typography, color, and spacing.

Official
Intermediate
Impertio-StudioImpertio-Studio

tailwind-core-design-system

Guide Tailwind CSS design tokens, configuration, and responsive patterns.

Official
Advanced