📌 What's a Variable Font?

One file with multiple axes (weight, italic, width) that CSS can tune to any value. Inter Variable, Roboto Flex, Pretendard Variable are typical.

Win: one file = faster load. CSS can specify font-weight: 437 with precision.

⚡ CSS Usage

@font-face {
  font-family: 'Inter';
  src: url('InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;  /* range */
  font-display: swap;
}

.title { font-weight: 750; }
.body { font-weight: 420; }
.thin { font-weight: 250; }

📚 Top English Variable Fonts

① Inter Variable

Designer + developer standard. Top pick.

② Roboto Flex

Google's most-axis-rich variable font. Width + weight + slant + grade.

③ Recursive

Slides from monospace to sans. Fun for tech sites.

🎨 Display Variable Fonts

• Fraunces: serif with SOFT and WONK axes
• Source Serif 4: editorial-grade serif
• JetBrains Mono: coding font, variable weights

⚠️ Watch Out

1. Use woff2-variations format string
2. No IE support (fine to ignore now)
3. File is larger than a single static (200-400KB), but saves vs. multiple statics

🛠 Tools

• Font preview: Font Preview
• Font pairing: Font Pair
• Gradient text: Gradient Text

💡 Tip: Inter Variable + a variable serif covers 99% of brand systems.