ตัวสร้าง Typography Scale
สร้าง modular typography scale ด้วย ratio อย่าง Major Third, Perfect Fourth และ Golden Ratio พร้อม preview ขนาดจริง, export CSS variables และ Tailwind
Loading tool...
ตัวสร้าง Typography Scale คืออะไร?
ตัวสร้าง Typography Scale เป็นเครื่องมือฟรีในเบราว์เซอร์ที่สร้าง modular type scale จากขนาดฟอนต์ฐานและ ratio โดยคูณฐานด้วย ratio ทีละขั้นเพื่อให้ได้ชุดขนาดหัวข้อและข้อความที่กลมกลืน พร้อม preview ทุกระดับที่ขนาด pixel จริง และ export ทั้ง scale เป็น CSS custom properties หรือ fontSize config ของ Tailwind
ประโยชน์หลัก
- ลำดับชั้นฟอนต์ที่กลมกลืนเชิงคณิตศาสตร์ ไม่ต้องกะเดา
- ratio preset แบบคลาสสิก 8 แบบ พร้อมตัวเลือกกำหนด ratio เองได้เต็มที่
- preview สดของทุกขนาดที่ render ด้วยขนาด pixel จริง
- คัดลอกขนาดเดี่ยว ๆ หรือ export ทั้ง scale ในครั้งเดียว
- output เป็น CSS variables และ Tailwind config พร้อมวางใช้งานทันที
กรณีการใช้งาน
- •วางลำดับชั้นฟอนต์สำหรับเว็บไซต์หรือ design system ใหม่
- •เปรียบเทียบ ratio อย่าง Major Third กับ Golden Ratio พร้อม preview สด
- •สร้างขนาด h1-h6 ที่สม่ำเสมอและ CSS variables สำหรับ component library
- •แปลง scale เป็น fontSize utilities ของ Tailwind สำหรับโปรเจกต์แบบ utility-first
วิธีใช้ตัวสร้าง Typography Scale
- ตั้งค่าขนาดฐาน: กรอกขนาด body font เป็น pixel (16px คือค่าเริ่มต้นของเบราว์เซอร์ ส่วน 18-20px เหมาะกับเว็บที่เนื้อหาเยอะ)
- เลือก scale ratio: เลือก preset เช่น Major Third (1.25) หรือ Perfect Fourth (1.333) หรือเลือกกำหนดเองแล้วพิมพ์ ratio ที่มากกว่า 1
- เลือกจำนวนระดับ: ใช้ slider กำหนดจำนวนระดับที่ต้องการเหนือขนาด body - 6 ระดับครอบคลุมลำดับ h1-h6 แบบคลาสสิก
- ดู preview และคัดลอก: ตรวจสอบ preview ที่ขนาดจริง คัดลอกค่ารายระดับได้เลย แล้ว export ทั้ง scale เป็น CSS variables หรือ Tailwind config ไปวางในโปรเจกต์ของคุณ
คุณสมบัติหลัก
- ratio preset แบบคลาสสิก 8 แบบ ตั้งแต่ Minor Second (1.067) ถึง Golden Ratio (1.618) พร้อมช่องกำหนด ratio เอง
- preview ข้อความที่ขนาด pixel จริงของทุกระดับใน scale
- ปุ่มคัดลอกรายระดับ แสดงค่า rem พร้อม comment ค่า px
- export ทั้ง scale เป็น CSS custom properties หรือ fontSize config ของ Tailwind
- ปรับขนาดฐานได้ 8-64px และระดับ 4-8 ชั้น ให้เข้ากับทุก design system
- ทำงานในเบราว์เซอร์ 100% - ไม่มีการ upload ไม่ต้องสมัครสมาชิก ข้อมูลไม่ออกจากเครื่องคุณ
คำถามที่พบบ่อย
modular typography scale คืออะไร?
modular type scale คือชุดขนาดฟอนต์ที่สร้างจากการคูณขนาดฐานหนึ่งค่า (ปกติ 16px) ด้วย ratio คงที่ แต่ละระดับคือ base x ratio^n ทำให้ทุกขนาดสัมพันธ์กันทางคณิตศาสตร์ หัวข้อ เนื้อความ และคำอธิบายจึงดูกลมกลืนโดยไม่ต้องกะเอง
ควรเลือก scale ratio แบบไหน?
ขึ้นอยู่กับความชัดเจนของลำดับชั้นที่ต้องการ 1.125 (Major Second) ละมุนเหมาะกับ UI ที่แน่น 1.25 (Major Third) เป็นค่าเริ่มต้นยอดนิยมสำหรับเว็บทั่วไป 1.333 (Perfect Fourth) ให้ความรู้สึกแบบบทความสิ่งพิมพ์ และ 1.618 (Golden Ratio) สร้าง scale แสดงผลที่เด่นมาก เหมาะคู่กับ scale รองที่เล็กกว่าสำหรับเนื้อความ
ทำไมเครื่องมือนี้ถึง export เป็นค่า rem?
หน่วย rem อ้างอิงจาก root font size จึงเคารพ preference ขนาดฟอนต์ของผู้ใช้และการ zoom ของเบราว์เซอร์ ตัวสร้างจะถือว่า root เป็น 16px ตอนแปลง และแนบค่า px กำกับไว้เป็น comment เพื่อให้เห็นขนาดที่แสดงจริงเสมอ
จะใช้ Tailwind config ที่ export มาอย่างไร?
คัดลอกบล็อก fontSize ไปใส่ในส่วน theme.extend ของ tailwind.config.js จากนั้นเรียกใช้ขนาดเป็น utility class เช่น text-h1 หรือ text-body ควบคู่กับ scale ปกติของ Tailwind ได้ทันที