Type Scale Explorer

เป้าหมาย

Typography เป็นส่วนสำคัญที่สุดของ web design แต่การเลือก type scale ที่ดีมักต้องลองไปเรื่อยๆ Type Scale Explorer ช่วยให้ทดลอง scale ต่างๆ แบบ visual ในที่เดียว

ฟีเจอร์หลัก

• เลือก base size (12px–20px) ด้วย range slider
• เลือก scale ratio จาก presets (Minor Third 1.2, Major Third 1.25, Perfect Fourth 1.333, Golden Ratio 1.618)
• เลือก font family จาก Google Fonts หรือ system fonts
• Preview ทุก step (xs, sm, base, lg, xl, 2xl, 3xl, 4xl) แบบ real-time
• Copy CSS custom properties ออกมาใช้งาน

Stack

• Vanilla JavaScript + CSS Custom Properties
• ไม่มี build step
• Google Fonts API สำหรับ font preview

Output CSS ตัวอย่าง

:root {
  --text-xs:   0.694rem;  /* 11.1px */
  --text-sm:   0.833rem;  /* 13.3px */
  --text-base: 1rem;      /* 16px   */
  --text-lg:   1.200rem;  /* 19.2px */
  --text-xl:   1.440rem;  /* 23px   */
  --text-2xl:  1.728rem;  /* 27.6px */
  --text-3xl:  2.074rem;  /* 33.2px */
  --text-4xl:  2.488rem;  /* 39.8px */
}

ไอเดียเพิ่มเติม

• Export เป็น Tailwind config
• Fluid type scale ด้วย clamp()
• Dark mode preview
• Pair กับ spacing scale

เหตุผลที่ทำ

ผมมักเสียเวลาคำนวณ type scale ใหม่ทุกโปรเจกต์ tool นี้ช่วยให้ทำงานเร็วขึ้นและได้ค่าที่ consistent