typography-calculator

Calculate typography scales, metrics, and responsive font sizing

509 stars

Best use case

typography-calculator is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Calculate typography scales, metrics, and responsive font sizing

Teams using typography-calculator should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/typography-calculator/SKILL.md --create-dirs "https://raw.githubusercontent.com/a5c-ai/babysitter/main/library/specializations/ux-ui-design/skills/typography-calculator/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/typography-calculator/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How typography-calculator Compares

Feature / Agent	typography-calculator	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Calculate typography scales, metrics, and responsive font sizing

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Typography Calculator Skill

## Purpose

Calculate typography scales and metrics for design systems, including modular scales, line heights, and responsive font sizing.

## Capabilities

- Generate type scales (modular, golden ratio, major third, etc.)
- Calculate optimal line heights for readability
- Generate responsive font sizing with fluid typography
- Calculate vertical rhythm and baseline grids
- Generate font-size/line-height pairings
- Create typography tokens

## Target Processes

- design-system.js
- component-library.js (typographySystemDesignTask)
- responsive-design.js (responsiveTypographySpacingTask)

## Integration Points

- type-scale.com algorithms
- CSS clamp() for fluid typography
- Modular scale calculations

## Input Schema

```json
{
  "type": "object",
  "properties": {
    "baseSize": {
      "type": "number",
      "default": 16,
      "description": "Base font size in pixels"
    },
    "scaleRatio": {
      "type": "string",
      "enum": ["minor-second", "major-second", "minor-third", "major-third", "perfect-fourth", "augmented-fourth", "perfect-fifth", "golden-ratio"],
      "default": "perfect-fourth"
    },
    "steps": {
      "type": "number",
      "default": 6,
      "description": "Number of scale steps above and below base"
    },
    "lineHeightRatio": {
      "type": "number",
      "default": 1.5,
      "description": "Base line height ratio"
    },
    "fluidTypography": {
      "type": "boolean",
      "default": true
    },
    "minViewport": {
      "type": "number",
      "default": 320
    },
    "maxViewport": {
      "type": "number",
      "default": 1440
    }
  },
  "required": ["baseSize"]
}
```

## Output Schema

```json
{
  "type": "object",
  "properties": {
    "scale": {
      "type": "array",
      "description": "Typography scale with sizes"
    },
    "lineHeights": {
      "type": "object",
      "description": "Optimal line heights for each size"
    },
    "fluidSizes": {
      "type": "object",
      "description": "CSS clamp values for fluid typography"
    },
    "verticalRhythm": {
      "type": "object",
      "description": "Vertical rhythm calculations"
    },
    "tokens": {
      "type": "object",
      "description": "Typography design tokens"
    }
  }
}
```

## Usage Example

```javascript
const result = await skill.execute({
  baseSize: 16,
  scaleRatio: 'perfect-fourth',
  steps: 6,
  fluidTypography: true,
  minViewport: 320,
  maxViewport: 1440
});
```

Related Skills

prioritization-calculator

509

from a5c-ai/babysitter

Automated calculation and scoring for product prioritization frameworks including RICE, ICE, MoSCoW, and custom weighted scoring. Normalizes scores, validates inputs, and generates priority rankings with confidence intervals.