Typography Scale Generator: สร้างลำดับขนาดฟอนต์ที่ลงตัวด้วยอัตราส่วนทางดนตรี

เว็บที่ออกแบบมาอย่างดีทุกเว็บมีสิ่งหนึ่งที่เหมือนกัน นั่นคือ ลำดับขนาดฟอนต์ (font size hierarchy) ที่ตั้งใจจัดวาง — heading ไล่ขนาดลงอย่างมีจังหวะ, body text อ่านสบายตา และ caption เล็กกว่าอย่างมีเหตุผล ไม่มีอะไรเกิดขึ้นแบบมั่ว ๆ แต่โปรเจกต์ส่วนใหญ่กลับเริ่มต้นด้วยการเดาค่า เช่น 14px, 18px, 24px, 32px ที่แต่ละค่าดูโอเคในตัวเอง แต่ไม่มีความสัมพันธ์ทางคณิตศาสตร์ต่อกันเลย

Typography Scale Generator แก้ปัญหานี้ด้วยการสร้าง modular type scale — คุณเลือกขนาดฐาน (base size) และอัตราส่วน (ratio) แล้วทุกขนาดในลำดับจะถูกคำนวณจากการคูณซ้ำ ๆ ด้วยอัตราส่วนเดียวกัน ผลลัพธ์คือชุดขนาดฟอนต์ที่กลมกลืนกันเพราะใช้ตรรกะสัดส่วนแบบเดียวกับที่พบในดนตรี สถาปัตยกรรม และธรรมชาติ

เครื่องมือนี้ฟรีทั้งหมด ทำงานในเบราว์เซอร์ของคุณล้วน ๆ และ export เป็น CSS custom properties หรือ Tailwind fontSize config ที่พร้อมใช้งานได้ในไม่กี่วินาที ไม่ต้องสมัครสมาชิก ไม่มีการอัปโหลด ไม่ต้องเดา

ทำไมต้องใช้ Typography Scale Generator?

• ความสม่ำเสมอทั่วทั้งอินเทอร์เฟซ — ทุก heading และ element ข้อความล้นมาจาก base size เดียวและ ratio เดียว ทำให้ hierarchy ของคุณสอดคล้องกันเชิงคณิตศาสตร์ แทนที่จะสะสมค่า pixel ก้ำกึ่งไปเรื่อย ๆ
• ตัดสินใจด้านดีไซน์ได้เร็วขึ้น — แทนที่จะเถียงกันว่า heading ควรเป็น 30px หรือ 34px ตัว scale จะตอบแทนคุณ: คูณระดับก่อนหน้าด้วย ratio ที่เลือกไว้
• อัตราส่วนทางดนตรีให้ความกลมกลืนแบบธรรมชาติ — interval อย่าง Major Third (1.250) และ Perfect Fourth (1.333) ฟังดูเพราะมาหลายร้อยปี และสัดส่วนเดียวกันก็ใช้กับจังหวะทางสายตาได้ดีอย่างน่าประหลาด
• ได้ design tokens ครบตั้งแต่เริ่ม — generator ปล่อยออกมาเป็น CSS custom properties ทำให้ type scale ของคุณเป็นชุด tokens ที่ดูแลรักษาง่าย ไม่ใช่ค่ากระจัดกระจายตาม inline style
• output พร้อมสำหรับ Tailwind ทันที — คัดลอก fontSize config block ทั้งก้อนแล้ววางลง Tailwind theme ได้เลย ไม่ต้องแปลงหน่วยเอง
• ศูนย์แรงเสียดทาน — ทุกอย่างทำงาน client-side ในเบราว์เซอร์ ขนาดตัวอักษร, preview และการตั้งค่าของคุณไม่เคยออกจากเครื่อง

ฟีเจอร์หลัก

บางฟีเจอร์ควรดูใกล้ ๆ หน่อย Live preview แสดงผลที่ขนาดจริง ไม่ใช่ mockup — สิ่งที่เห็นคือสิ่งที่จะได้จริง ปุ่ม คัดลอกรายระดับ จะให้ snippet แบบ --fs-3: 1.563rem; /* 25px */ คุณจึงรู้เสมอว่าค่า rem ที่วางลงไปกลายเป็นกี่ pixel และ Tailwind export จะสร้าง module.exports block ที่ผูกกับ theme.extend.fontSize พร้อมวาง ทำให้ utility text-* ทั้งหมดของคุณอยู่บน scale เดียวกัน

วิธีการใช้งาน

1. เลือก base size — งานเว็บส่วนใหญ่ใช้ค่า default ของเบราว์เซอร์ที่ 16px สำหรับ body text ซึ่งเป็นค่า default ของ generator พอดี แต่ปรับเป็นค่าอื่นได้ตั้งแต่ 8px ถึง 64px
2. เลือก ratio preset — เริ่มจาก Major Third (1.250) หรือ Perfect Fourth (1.333) ซึ่งเป็นค่าที่รอบด้านที่สุดสำหรับ typography บนจอ หรือจะใส่ custom ratio ของตัวเองก็ได้
3. ตั้งจำนวนขั้น (steps) — เลือกได้ 4–8 ระดับ แบบ 4–5 ขั้นครอบคลุม landing page ส่วนใหญ่ ส่วน 6–8 ขั้นเหมาะกับเว็บเอกสารและ design system
4. ดู live preview — แต่ละระดับแสดงผลที่ขนาดจริงพร้อมค่า rem และ px ให้คุณประเมินจังหวะทางสายตาก่อนตัดสินใจใช้
5. คัดลอก output — คัดลอกเฉพาะระดับที่ต้องการด้วยปุ่มรายระดับ หรือ export ทั้ง scale เป็น CSS variables หรือ Tailwind config แล้วเอาลงโปรเจกต์ได้เลย

ทำความเข้าใจ Modular Scale

Modular scale เริ่มจากค่า ฐาน (base) และ อัตราส่วน (ratio) แล้วสร้างแต่ละขั้นถัดไปด้วยการคูณด้วย ratio ซ้ำ ๆ เช่น base 16px กับ Major Third (1.250) จะได้ลำดับ: 16 → 20 → 25 → 31.25 → 39.06 → 48.83px คูณแค่ห้ารอบก็ได้ hierarchy ครบชุด ที่ซึ่งทุกขนาดสัมพันธ์กับทุกขนาดอื่นด้วยสัดส่วนเดียวกัน

ชื่อ preset ทั้งหมดมาจาก interval ทางดนตรี และแต่ละแบบมีบุคลิกต่างกันชัดเจน:

• Minor Second (1.067) และ Major Second (1.125) — ขั้นบางเบา สุภาพ เหมาะกับ UI ที่แน่น เช่น dashboard และเอกสาร ที่ต้องมีหลายระดับโดยไม่กระโดดจนเกินงาม
• Minor Third (1.200) และ Major Third (1.250) — ม้างานของวงการ web typography ให้ hierarchy ชัดเจนด้วยความต่างระดับแบบพอดี ๆ โดยเฉพาะ Major Third ที่เป็น default น่าใช้ที่สุดตัวหนึ่ง
• Perfect Fourth (1.333) และ Augmented Fourth (1.414) — ก้าวที่กล้าหาญชัดเจน เหมาะกับหน้า marketing, portfolio และงาน editorial ที่มี heading น้อยแต่ใหญ่
• Perfect Fifth (1.500) และ Golden Ratio (1.618) — scale แบบดราม่า เน้น display เหมาะเมื่อคุณอยากได้ contrast สุดตาที่ระหว่าง hero heading กับ body copy

เรื่องหน่วยที่ควรรู้: ใช้ rem ไม่ใช่ px ใน CSS ที่ส่งไป production เหตุผลที่ generator export เป็น rem ก็เพราะ rem เคารพการตั้งค่าขนาดฟอนต์ของผู้ใช้ในเบราว์เซอร์ ซึ่งสำคัญมากต่อ accessibility ส่วน comment ค่า px ที่แถมมาให้ช่วยให้เห็นขนาดจริงระหว่างพัฒนา

กรณีการใช้งานจริง

Landing Page และเว็บ Marketing

หน้า marketing อยู่รอดด้วย visual hierarchy ล้วน ๆ ใช้ Perfect Fourth (1.333) จาก base 16px จะได้ 16 → 21 → 28 → 38 → 50 → 67px — hero headline เบอร์ 67px ที่เปิดฉากแรง, section heading ที่ 38–50px และ body copy ที่อ่านสบาย ด้านล่าง export CSS variables รอบเดียว ทุกหน้าในเว็บก็ได้จังหวะเดียวกันทั้งไซต์

Design System และ Component Library

Design system ต้องการชุด tokens ไม่ใช่ขนาดแบบก้ำกึ่ง ลองสร้าง Major Third แบบ 6 ขั้น export เป็น CSS custom properties แล้ว map เป็น semantic tokens อย่าง --text-body, --text-h3, --text-display ทุก component จะอ้างอิง tokens เหล่านี้ และการปรับ base size หรือ ratio จุดเดียวก็ tune ทั้งระบบได้

เอกสาร และ Dashboard

อินเทอร์เฟซที่ข้อมูลแน่นต้องใช้ขั้นที่ละมุนกว่า เพื่อให้ระดับข้อความซ้อนกันได้โดยไม่เปลืองพื้นที่แนวตั้ง Minor Third (1.200) ให้ increment แค่ 20% ต่อขั้น — มากพอจะแยก h3 ออกจาก h4 ในเอกสารยาว ๆ แต่กระชับพอให้หน้า settings ที่แน่นยังดูเป็นระเบียบ

ธีม Blog และงาน Editorial

งานอ่านยาวได้ประโยชน์จาก base ที่ใหญ่ขึ้นหน่อย — ลอง 18px กับ Major Second (1.125) หรือ Minor Third (1.200) ขั้นที่เล็กทำให้ heading หลายระดับไม่ร้องตะโกนแข่งกัน ขณะที่ scale ยังการันตีว่าทุกระดับสัมพันธ์กันอย่างมีสัดส่วน จับคู่กับความกว้างบรรทัด (measure) และ line-height ที่เหมาะสมก็อ่านลื่นตลอดบทความ

Best Practices

• เริ่มจาก Major Third หรือ Perfect Fourth — สองแบบนี้ใช้ได้กับงานหลากหลายที่สุด เลือก ratio ที่ละมุนกว่าสำหรับ UI แน่น ๆ และจัดจ้านกว่าสำหรับหน้า display
• ให้ body text อยู่ที่ 16px ขึ้นไป — base ที่เล็กเกินไปฆ่าการอ่าน type scale ทำงานได้ดีที่สุดเมื่อ base เป็นขนาดที่อ่านสบายจริง
• ใจร้อนอยู่ใน scale ให้ครบ — คุณค่าของ modular scale มาจากวินัย ถ้าขนาดไหนไม่อยู่ใน scale แปลว่าดีไซน์ไม่จำเป็นต้องใช้ หรือ scale ต้องถูก rethink
• export เป็น rem แสดงผลด้วย px — ส่งค่า rem เพื่อ accessibility และเก็บ comment ค่า px ที่ generator ให้มาไว้เช็กความถูกต้องตอน code review
• ปรับ ratio เป็นรายโปรเจกต์ ไม่ใช่รายหน้า — หนึ่ง scale ต่อหนึ่ง product ช่วยรักษาความเป็นเอกภาพของแบรนด์ การเปลี่ยน ratio ข้ามหน้าทำให้เอกลักษณ์ทางสายตาแตกกระจาย
• จับคู่กับ spacing scale — type scale จะเด่นสุดเมื่อระยะห่าง (spacing) ใช้ระบบสัดส่วนคล้ายกัน ทำให้ margin และ padding สะท้อนจังหวะเดียวกัน

พร้อมสร้าง Type Scale ของคุณแล้วหรือยัง?

เลิกเดาขนาดฟอนต์ได้แล้ว เปิด Typography Scale Generator เลือก ratio แล้วคัดลอก type scale ที่กลมกลืนครบชุดลงโปรเจกต์ภายในไม่ถึงนาที — ฟรี เป็นส่วนตัว และทำงานในเบราว์เซอร์ล้วน ๆ

เครื่องมือที่เกี่ยวข้องที่คุณอาจสนใจ:

• CSS Font Stack Generator — จับคู่ type scale ของคุณกับ font stack ที่แข็งแรงรองรับทุกแพลตฟอร์ม
• CSS Clamp Generator — เปลี่ยนขั้น scale แบบคงที่ให้เป็นขนาด fluid ที่ยืดหยุ่นตาม viewport
• Gradient Text Generator — ตกแต่งระดับใหญ่สุดของ scale ด้วย gradient ที่ดึงสายตา

ขอให้สนุกกับการออกแบบ!

คำถามที่พบบ่อย

ถ: Modular type scale คืออะไร?

ตอบ: Modular type scale คือชุดขนาดฟอนต์ที่เกิดจากการคูณ base size ด้วย ratio คงที่ซ้ำ ๆ เช่น base 16px กับ ratio 1.250 จะได้ 16, 20, 25, 31.25px ไปเรื่อย ๆ เพราะทุกขนาดใช้ความสัมพันธ์เชิงสัดส่วนแบบเดียวกัน hierarchy ที่ได้จึงดูกลมกลืนและตั้งใจจัดวาง

ถ: ควรเลือก ratio แบบไหนสำหรับโปรเจกต์ของผม?

ตอบ: Major Third (1.250) และ Perfect Fourth (1.333) เป็นจุดเริ่มต้นที่รอบด้านที่สุดสำหรับเว็บทั่วไป ใช้ ratio ที่ละมุนกว่าอย่าง Major Second (1.125) สำหรับอินเทอร์เฟซที่แน่นและเว็บเอกสาร และใช้แบบจัดจ้านอย่าง Golden Ratio (1.618) สำหรับหน้า marketing ที่มี display heading ขนาดใหญ่

ถ: Generator ปล่อยค่าออกมาเป็น px หรือ rem?

ตอบ: ทั้งสองแบบค่าที่ export เป็น rem (ซึ่งเคารพการตั้งค่าฟอนต์ของผู้ใช้ในเบราว์เซอร์เพื่อ accessibility) และทุกค่ามีค่า px เทียบเท่าแนบมาใน comment ให้คุณตรวจสอบขนาดที่คำนวณแล้วได้ทันที

ถ: ใช้ output ร่วมกับ Tailwind CSS ได้ไหม?

ตอบ: ได้ เครื่องมือ export fontSize config block ที่พร้อมวางลง Tailwind theme ของคุณ เพียงวางใน theme.extend.fontSize แล้ว utility text-* ทั้งหมดจะใช้ scale นี้ทันที

ถ: ข้อมูลของฉันถูกส่งไปไหนสักแห่งหรือเปล่า?

ตอบ: ไม่ generator ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ไม่มีการอัปโหลด ไม่ต้องสมัครสมาชิก และไม่มีข้อมูลใดออกจากเครื่องของคุณ