ทำไม Typography ถึงสำคัญต่อ Web Design?

95% ของข้อมูลบนอินเทอร์เน็ตคือข้อความ ดังนั้น Typography จึงไม่ใช่แค่เรื่องความสวยงาม แต่คือหัวใจของ User Experience บนเว็บ การเลือกฟอนต์ ขนาด ระยะห่าง และ Line Height ที่ถูกต้องส่งผลโดยตรงต่อ Readability, Engagement Rate และแม้แต่ SEO Ranking

Google ให้ความสำคัญกับ Core Web Vitals ซึ่งรวมถึง Cumulative Layout Shift (CLS) ที่ฟอนต์โหลดช้าหรือผิดพลาดส่งผลโดยตรง และ Time to First Contentful Paint ที่ฟอนต์หนักๆ อาจทำให้คะแนนตก

ขนาดฟอนต์ที่เหมาะสมสำหรับเว็บ

Body Text (เนื้อหา)

• Desktop: 16-18px เป็น Minimum ที่แนะนำ (หลายเว็บระดับโลกใช้ 18-21px)
• Mobile: 16px เป็น Minimum — iOS จะ Auto-zoom ถ้า Input Font ต่ำกว่า 16px
• อย่าต่ำกว่า 14px สำหรับข้อความหลัก ถึงแม้จะอ่านได้แต่ทำให้เหนื่อยตาเร็ว

Heading (หัวข้อ)

• H1: 32-48px (Desktop), 24-32px (Mobile)
• H2: 24-36px (Desktop), 20-28px (Mobile)
• H3: 20-28px (Desktop), 18-22px (Mobile)

ใช้ระบบ Typographic Scale เพื่อให้ขนาดหัวข้อมีความสัมพันธ์กันอย่างสม่ำเสมอ Scale ที่นิยมใช้ เช่น Minor Third (1.2x), Major Third (1.25x) หรือ Perfect Fourth (1.333x)

Line Height (ระยะห่างบรรทัด) ที่เหมาะสม

Line Height หรือ Leading มีผลต่อความสะดวกในการอ่านอย่างมาก:

• Body Text: 1.5-1.7 เท่าของขนาดฟอนต์ (เช่น ฟอนต์ 16px ควรมี Line Height 24-27px)
• Heading: 1.1-1.3 เท่า (ถ้าใช้ 1.5 เหมือน Body จะดูมีช่องว่างมากเกินไป)
• ภาษาไทย: ควรใช้ Line Height 1.7-2.0 เพราะตัวอักษรไทยมีสัดส่วนที่แตกต่าง มีวรรณยุกต์และสระที่อยู่ด้านบนและล่าง

Letter Spacing และ Word Spacing

• Body Text: ใช้ Letter Spacing ปกติ (0 หรือ Normal) — การเพิ่ม Letter Spacing ใน Body ทำให้อ่านยากขึ้น
• ALL CAPS Heading: เพิ่ม Letter Spacing 0.05-0.1em เพื่อให้อ่านง่ายขึ้น
• ฟอนต์ขนาดใหญ่: อาจต้องลด Letter Spacing ลงเล็กน้อย (Negative Tracking) เพื่อให้ดูกระชับ

Measure (ความกว้างของบรรทัด) ที่อ่านง่ายที่สุด

นักออกแบบและผู้เชี่ยวชาญ Typography แนะนำว่าความกว้างที่เหมาะสมสำหรับการอ่านคือ 45-75 ตัวอักษรต่อบรรทัด (หรือ 8-12 คำ) ถ้าแคบกว่านั้นตาจะกระโดดบรรทัดบ่อย ถ้ากว้างกว่านั้นตาจะหาจุดเริ่มต้นบรรทัดถัดไปไม่เจอ

ใน CSS ควรกำหนด max-width: 65ch หรือประมาณ 700-800px สำหรับ Column เนื้อหา

เลือก Web Font อย่างไรให้ดีต่อ Performance?

1. ใช้ Variable Fonts เมื่อทำได้

Variable Fonts คือไฟล์ฟอนต์เดียวที่ครอบคลุมทุก Weight และ Style แทนที่จะต้องโหลดหลายไฟล์ ช่วยลด HTTP Request และขนาดไฟล์รวม เช่น Roboto Flex, Inter Variable

2. เลือก Format ที่เหมาะสม

• WOFF2: ขนาดเล็กที่สุด Browser รองรับ 97%+ แนะนำให้ใช้เป็น Primary
• WOFF: Fallback สำหรับ Browser เก่า

3. ใช้ font-display: swap

เพิ่ม font-display: swap ใน CSS เพื่อให้ Browser แสดง System Font ก่อนในขณะที่ Web Font กำลังโหลด ป้องกัน Flash of Invisible Text (FOIT) ที่ส่งผลต่อ CLS

4. Subset ฟอนต์เฉพาะภาษาที่ใช้

ถ้าใช้ฟอนต์ภาษาไทยที่มีตัวอักษรมาก ควร Subset เพื่อโหลดเฉพาะ Glyph ที่ใช้จริง ลดขนาดไฟล์ได้อย่างมีนัยสำคัญ

ฟอนต์ที่ Google ชอบ: System Font Stack

ถ้าต้องการ Performance สูงสุด ให้พิจารณาใช้ System Font Stack ซึ่งใช้ฟอนต์ที่ติดตั้งอยู่บนอุปกรณ์ของผู้ใช้แล้ว ไม่ต้องโหลดเพิ่ม:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

GitHub, Medium และ GitHub ใช้ System Font Stack เพราะให้ Performance ดีที่สุดและดูคุ้นเคยสำหรับผู้ใช้

Checklist Typography สำหรับเว็บที่ดี

• ☑ Body text ไม่ต่ำกว่า 16px
• ☑ Line Height 1.5-1.7 สำหรับ Body (1.8+ สำหรับภาษาไทย)
• ☑ ความกว้างบรรทัดไม่เกิน 75 ตัวอักษร
• ☑ Color Contrast ผ่าน WCAG AA (4.5:1 สำหรับ Normal Text)
• ☑ ใช้ WOFF2 Format
• ☑ font-display: swap
• ☑ โหลดไม่เกิน 2-3 Font Family
• ☑ ทดสอบบน Mobile ที่หน้าจอขนาดต่างๆ

สรุป: Typography ดีคือ UX ที่ดี

Typography บนเว็บที่ดีทำให้ผู้ใช้อยู่บนหน้าเพจนานขึ้น อ่านเนื้อหาได้ง่ายขึ้น และรู้สึกเชื่อถือแบรนด์มากขึ้น ซึ่งทั้งหมดนี้ส่งผลดีต่อ SEO ในระยะยาว

ต้องการให้ผู้เชี่ยวชาญช่วยวาง Typography System สำหรับเว็บไซต์หรือ Brand ของคุณ? ติดต่อ Fahrun Studio ได้เลยค่ะ เรายินดีช่วยตั้งแต่การเลือกฟอนต์ถึงการตั้งค่า CSS ให้สมบูรณ์