Typography Designer Skill
Instructions
- Analyze typography requirements from task
- Select appropriate font families (or use existing)
- Create type scale (heading sizes, body text, etc.)
- Define font weights and line heights
- Specify text styles and variations
- Ensure readability and accessibility
- Return structured typography specifications with:
- Font families
- Type scale
- Font weights
- Line heights
- Text styles
- Usage guidelines
Examples
Input: "Design typography system"
Output:
### Typography System
**Font Families:**
- Primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
- Monospace: 'Fira Code', 'Courier New', monospace
**Type Scale:**
- H1: 32px (2rem), weight 700, line-height 1.2
- H2: 24px (1.5rem), weight 700, line-height 1.3
- H3: 20px (1.25rem), weight 600, line-height 1.4
- H4: 18px (1.125rem), weight 600, line-height 1.4
- H5: 16px (1rem), weight 600, line-height 1.5
- H6: 14px (0.875rem), weight 600, line-height 1.5
- Body: 16px (1rem), weight 400, line-height 1.6
- Small: 14px (0.875rem), weight 400, line-height 1.5
- Caption: 12px (0.75rem), weight 400, line-height 1.4
**Font Weights:**
- Light: 300
- Regular: 400
- Medium: 500
- Semi-bold: 600
- Bold: 700
**Text Styles:**
- Heading: Bold, larger size, tighter line-height
- Body: Regular weight, comfortable line-height
- Link: Same as body, with underline and color
- Code: Monospace font, smaller size
- Caption: Smaller size, lighter weight
**Responsive Typography:**
- Mobile: Base 14px, scale down headings
- Tablet: Base 16px, standard scale
- Desktop: Base 16px, standard scale
Typography Elements
- Font Families: Primary, secondary, monospace fonts
- Type Scale: Heading hierarchy (H1-H6), body, small, caption
- Font Weights: Light, regular, medium, semi-bold, bold
- Line Heights: Line spacing for readability
- Letter Spacing: Character spacing adjustments
- Text Styles: Paragraph, heading, link, code, caption
- Text Colors: Primary and secondary text colors
- Text Alignment: Left, center, right, justify
Accessibility Requirements
- Readable Sizes: Minimum 14px for body text (16px preferred)
- Line Height: Minimum 1.5 for body text
- Line Length: Maximum 75-80 characters per line
- Color Contrast: Text meets WCAG AA (4.5:1)
- Font Loading: Consider font loading and fallbacks
Responsive Typography
- Mobile: Smaller base size, adjusted scale
- Tablet: Standard base size
- Desktop: Standard or slightly larger base size
- Fluid Typography: Consider using rem/em for scalability
1---2name: typography-designer3description: Designs typography systems including font choices, font sizes, font weights, line heights, and text styles. Creates type scale and defines usage guidelines. Ensures readability and accessibility.4---5
6# Typography Designer Skill
7
8## Instructions
9
101. Analyze typography requirements from task
112. Select appropriate font families (or use existing)
123. Create type scale (heading sizes, body text, etc.)
134. Define font weights and line heights
145. Specify text styles and variations
156. Ensure readability and accessibility
167. Return structured typography specifications with:
17 - Font families
18 - Type scale
19 - Font weights
20 - Line heights
21 - Text styles
22 - Usage guidelines
23
24## Examples
25
26**Input:** "Design typography system"
27**Output:**
28```markdown
29### Typography System
30
31**Font Families:**
32- Primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
33- Monospace: 'Fira Code', 'Courier New', monospace
34
35**Type Scale:**
36- H1: 32px (2rem), weight 700, line-height 1.2
37- H2: 24px (1.5rem), weight 700, line-height 1.3
38- H3: 20px (1.25rem), weight 600, line-height 1.4
39- H4: 18px (1.125rem), weight 600, line-height 1.4
40- H5: 16px (1rem), weight 600, line-height 1.5
41- H6: 14px (0.875rem), weight 600, line-height 1.5
42- Body: 16px (1rem), weight 400, line-height 1.6
43- Small: 14px (0.875rem), weight 400, line-height 1.5
44- Caption: 12px (0.75rem), weight 400, line-height 1.4
45
46**Font Weights:**
47- Light: 300
48- Regular: 400
49- Medium: 500
50- Semi-bold: 600
51- Bold: 700
52
53**Text Styles:**
54- Heading: Bold, larger size, tighter line-height
55- Body: Regular weight, comfortable line-height
56- Link: Same as body, with underline and color
57- Code: Monospace font, smaller size
58- Caption: Smaller size, lighter weight
59
60**Responsive Typography:**
61- Mobile: Base 14px, scale down headings
62- Tablet: Base 16px, standard scale
63- Desktop: Base 16px, standard scale
64```
65
66## Typography Elements
67
68- **Font Families**: Primary, secondary, monospace fonts
69- **Type Scale**: Heading hierarchy (H1-H6), body, small, caption
70- **Font Weights**: Light, regular, medium, semi-bold, bold
71- **Line Heights**: Line spacing for readability
72- **Letter Spacing**: Character spacing adjustments
73- **Text Styles**: Paragraph, heading, link, code, caption
74- **Text Colors**: Primary and secondary text colors
75- **Text Alignment**: Left, center, right, justify
76
77## Accessibility Requirements
78
79- **Readable Sizes**: Minimum 14px for body text (16px preferred)
80- **Line Height**: Minimum 1.5 for body text
81- **Line Length**: Maximum 75-80 characters per line
82- **Color Contrast**: Text meets WCAG AA (4.5:1)
83- **Font Loading**: Consider font loading and fallbacks
84
85## Responsive Typography
86
87- **Mobile**: Smaller base size, adjusted scale
88- **Tablet**: Standard base size
89- **Desktop**: Standard or slightly larger base size
90- **Fluid Typography**: Consider using rem/em for scalability
majiayu000