# Typography Scale Generator

Create harmonious typography scales with base size and ratio

## Base Size (px)

| Scale Ratio              | Value    |
|--------------------------|----------|
| 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    |

## Visual Preview

The quick brown fox  
h1 - 49px

The quick brown fox  
h2 - 39px

The quick brown fox  
h3 - 31px

The quick brown fox  
h4 - 25px

The quick brown fox  
h5 - 20px

The quick brown fox  
h6 - 16px

The quick brown fox  
body - 16px

## Size Reference

| Element | Size  |
|---------|-------|
| h1      | 49px  |
| h2      | 39px  |
| h3      | 31px  |
| h4      | 25px  |
| h5      | 20px  |
| h6      | 16px  |
| body    | 16px  |
| small   | 13px  |
| tiny    | 10px  |

## CSS Code

```css
h1 { font-size: 49px; }
h2 { font-size: 39px; }
h3 { font-size: 31px; }
h4 { font-size: 25px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }
body { font-size: 16px; }
small { font-size: 13px; }
tiny { font-size: 10px; }
```

## Tailwind Config

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        "h1": "49px",
        "h2": "39px",
        "h3": "31px",
        "h4": "25px",
        "h5": "20px",
        "h6": "16px",
        "body": "16px",
        "small": "13px",
        "tiny": "10px"
      }
    }
  }
}
```