Calculate harmonious type scales for responsive design systems
Create a typography scale system for this project:
**Project Parameters:**
- Project Type: ${{PROJECT_TYPE}}
- Base Font Size: ${{BASE_FONT_SIZE}}
- Primary Reading Device: ${{PRIMARY_DEVICE}}
- Content Type: ${{CONTENT_TYPE}}
**Design Preferences:**
- Scale Ratio Preference: ${{SCALE_RATIO}}
- Heading Levels Needed: ${{HEADING_LEVELS}}
- Additional Sizes: ${{ADDITIONAL_SIZES}}
Please calculate:
1. **Modular Scale Selection**
- Minor Second (1.067)
- Major Second (1.125)
- Minor Third (1.200)
- Major Third (1.250)
- Perfect Fourth (1.333)
- Augmented Fourth (1.414)
- Perfect Fifth (1.500)
- Golden Ratio (1.618)
- Recommended scale with rationale
2. **Desktop Scale (px, rem, em)**
- Display/Hero: Size
- H1: Size
- H2: Size
- H3: Size
- H4: Size
- H5: Size
- H6: Size
- Body Large: Size
- Body: Size
- Body Small: Size
- Caption: Size
- Overline: Size
3. **Tablet Scale**
- Adjusted sizes for tablet
- Breakpoint recommendation
- Scale ratio adjustment if needed
4. **Mobile Scale**
- Adjusted sizes for mobile
- Minimum readable sizes
- Touch-friendly considerations
5. **Line Height Calculations**
- Headings line height
- Body text line height
- Small text line height
- Ratio recommendations
6. **Letter Spacing**
- Display text tracking
- Heading tracking
- Body tracking
- All caps tracking
- Small text tracking
7. **Vertical Rhythm**
- Baseline grid value
- Paragraph spacing
- Section spacing
- Component spacing
8. **CSS Custom Properties**
```css
:root {
/* Font sizes */
--font-size-base: [value];
--font-size-scale: [ratio];
/* Generated scale */
}
```
9. **Responsive Implementation**
- Fluid typography formula
- Clamp() values
- Media query breakpoints
10. **Practical Application**
- When to use each size
- Combining sizes
- Edge cases
- Accessibility minimums
Provide calculated values with CSS code ready for implementation.Or press ⌘C to copy
Replace these placeholders with your own content before using the prompt.
[{PROJECT_TYPE][{BASE_FONT_SIZE][{PRIMARY_DEVICE][{CONTENT_TYPE][{SCALE_RATIO][{HEADING_LEVELS][{ADDITIONAL_SIZES]{
/* Font sizes */
--font-size-base: [value];
--font-size-scale: [ratio];
/* Generated scale */
}