ToolypetMCP
intermediate3 minutescss

Typography Design System

Create a complete typography system with text shadows, gradient headings, and responsive sizing.

typographytext-shadowgradientresponsive

इस रेसिपी का उपयोग कब करें

Typography sets the tone for your entire design. A consistent type system with proper shadows and effects creates visual hierarchy and brand identity.

चरण

1

Body text shadow

प्रॉम्प्ट:Generate a subtle text shadow for body text: 0 1px 2px rgba(0,0,0,0.1) for improved readability on light backgrounds
2

Heading text shadow

प्रॉम्प्ट:Generate a bold heading shadow: 2px 2px 4px rgba(0,0,0,0.2) for h1 elements
3

Gradient heading text

प्रॉम्प्ट:Generate a gradient for heading text: from #1a1a2e to #16213e at 90 degrees for a deep, professional look
4

Typewriter text animation

प्रॉम्प्ट:Generate a typing animation effect: width from 0 to 100% with steps(30) over 3 seconds, with blinking cursor

अक्सर पूछे जाने वाले प्रश्न

What font sizes should a type system have?

Use a modular scale (1.25 ratio): 12px, 15px, 19px, 24px, 30px, 37px, 47px. Or use Tailwind's built-in scale: text-xs through text-6xl. Limit to 5-7 sizes.

When should I use text-shadow?

For headings on image backgrounds (improves readability), decorative display text, and subtle depth on card titles. Avoid on body text — it reduces clarity at small sizes.

संबंधित रेसिपी