Base: 16px
Scale: 16, 20, 25, 31, 39, 49, 61, 76, 95

Practical sizes:
- Caption: 12px (smaller than base)
- Body: 16px (base)
- Body Large: 18px (between base and next)
- Heading 6: 20px
- Heading 5: 25px
- Heading 4: 31px
- Heading 3: 39px
- Heading 2: 49px
- Heading 1: 61px
- Display: 76px (for hero sections)

module.exports = {
  theme: {
    fontSize: {
      // Captions and small text
      'xs': ['12px', { lineHeight: '1.5' }],
      'sm': ['14px', { lineHeight: '1.5' }],
      
      // Body text
      'base': ['16px', { lineHeight: '1.6' }],
      'lg': ['18px', { lineHeight: '1.6' }],
      
      // Headings (modular scale 1.25)
      'h6': ['20px', { lineHeight: '1.3', fontWeight: '600' }],
      'h5': ['25px', { lineHeight: '1.3', fontWeight: '600' }],
      'h4': ['31px', { lineHeight: '1.2', fontWeight: '700' }],
      'h3': ['39px', { lineHeight: '1.2', fontWeight: '700' }],
      'h2': ['49px', { lineHeight: '1.1', fontWeight: '700' }],
      'h1': ['61px', { lineHeight: '1.1', fontWeight: '700' }],
      
      // Display (for hero sections)
      'display': ['76px', { lineHeight: '1', fontWeight: '800' }],
    },
  },
};

/* System fonts (fast, no network request) */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

/* Or use web fonts (Google Fonts, Typekit, etc.) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: 'Inter', system-ui, sans-serif;
}

<div class="card">
  <h2 class="card-title">Card Title</h2>
  <p class="card-description">This is a description of the card content.</p>
  <p class="card-meta">Published on January 16, 2026</p>
</div>

.card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.card-description {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.card-meta {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.5;
}

h1, h2, h3 {
  line-height: 1.2; /* Tight for headings */
}

p, li {
  line-height: 1.6; /* Loose for body text */
}

.caption {
  line-height: 1.4; /* Medium for captions */
}

main {
  max-width: 65ch; /* ~65 characters */
}

h1 {
  letter-spacing: -0.02em; /* Tighter for large headings */
}

.label {
  letter-spacing: 0.05em; /* Looser for labels */
}

.caption {
  letter-spacing: 0; /* Normal for body text */
}

/* Good contrast */
color: #030712; /* dark text */
background-color: #F9FAFB; /* light background */
/* Contrast ratio: 19:1 ✓ */

/* Poor contrast */
color: #9CA3AF; /* medium gray text */
background-color: #F9FAFB; /* light background */
/* Contrast ratio: 2.5:1 ✗ */

/* Fixed sizes (old approach) */
h1 {
  font-size: 24px; /* mobile */
}

@media (min-width: 768px) {
  h1 {
    font-size: 32px; /* tablet */
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 40px; /* desktop */
  }
}

/* Fluid typography (modern approach) */
h1 {
  font-size: clamp(24px, 5vw, 40px);
  /* min: 24px, preferred: 5% of viewport width, max: 40px */
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

strong {
  font-weight: 600;
}

.light {
  font-weight: 300;
}

/* Ligatures (fi, fl, etc.) */
body {
  font-feature-settings: 'liga' 1;
}

/* Tabular numbers (for tables) */
.table {
  font-feature-settings: 'tnum' 1;
}

/* Small caps */
.label {
  font-feature-settings: 'smcp' 1;
}

article {
  font-size: 18px;
  line-height: 1.7;
  max-width: 65ch;
  margin: 0 auto;
  padding: 2rem 1rem;
}

article h1 {
  font-size: 49px;
  line-height: 1.1;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

article h2 {
  font-size: 39px;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
}

article p {
  margin-bottom: 1.5rem;
}

article a {
  color: var(--interactive-primary);
  text-decoration: underline;
}

/* Buttons */
button {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Labels */
label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

/* Captions */
.caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-secondary);
}

h1 {
  font-size: clamp(24px, 5vw, 61px);
  line-height: 1.1;
  font-weight: 700;
}

h2 {
  font-size: clamp(20px, 4vw, 49px);
  line-height: 1.2;
  font-weight: 700;
}

h3 {
  font-size: clamp(18px, 3vw, 39px);
  line-height: 1.2;
  font-weight: 600;
}

"I'm using the typography-system skill. Can you create a type scale for me?
- Base font size: 16px
- Ratio: 1.25 (Major Third)
- Font family: Inter for body, Playfair Display for headings
- Include sizes for: captions, body, headings, display
- Ensure accessibility (contrast, line height, line length)"

"Can you audit my current typography?
- Are my font sizes following a modular scale?
- Is my line height appropriate?
- Is my line length too long?
- Are my color contrasts sufficient?
- Are my fonts accessible?
- What improvements would you suggest?"

"Can you help me implement responsive typography?
- Create fluid typography using clamp()
- Ensure readability at all breakpoints
- Test at mobile (320px), tablet (768px), desktop (1024px)
- Provide CSS code I can use"

"Can you create comprehensive typography documentation?
- Type scale with all sizes
- Font pairings and usage
- Hierarchy guidelines
- Accessibility guidelines
- Code examples for each style
- Responsive behavior"

"Can you evaluate my typography?
- Is my type scale harmonious?
- Is my hierarchy clear?
- Is my readability good?
- Are my color contrasts sufficient?
- Are my fonts accessible?
- What's one thing I could improve immediately?"