crafting-typography
CommunityElevate text with fluid typography.
Authoralexejluft
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill prevents common typography mistakes that make designs look amateurish or AI-generated, ensuring polished and accessible text presentation.
Core Features & Use Cases
- Fluid Type Scale: Implements responsive font sizes using Tailwind v4's clamp() and @theme for seamless scaling across devices.
- Variable Font Animation: Enables smooth font weight and variation animations with GSAP on variable fonts.
- Optical Corrections: Fine-tunes line-height and letter-spacing per text size for optimal readability.
- Use Case: Ensure all headings and body text on a website scale beautifully from mobile to desktop, with subtle weight changes on scroll for a dynamic feel.
Quick Start
Apply the text-fluid-display class to an element to use the fluid type scale.
Dependency Matrix
Required Modules
None requiredComponents
referencesassets
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: crafting-typography Download link: https://github.com/alexejluft/brudi/archive/main.zip#crafting-typography Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.