Responsive Typography — วิธีทำให้ฟอนต์ไทยแสดงผลดีบนทุกหน้าจอ

ในยุคที่ผู้ใช้เข้าถึงเว็บไซต์จากอุปกรณ์หลากหลาย ตั้งแต่มือถือจอเล็กไปจนถึงจอมอนิเตอร์ขนาดใหญ่ การทำให้ตัวอักษรแสดงผลได้ดีบนทุกขนาดหน้าจอจึงสำคัญมาก

ปัญหาของ Fixed Font Size

การกำหนดขนาดฟอนต์เป็นค่าคงที่ (เช่น font-size: 16px) ทำให้ตัวอักษรดูเล็กเกินไปบนจอใหญ่ หรือใหญ่เกินไปบนจอเล็ก โดยเฉพาะภาษาไทยที่มีสระบนล่างทำให้ต้องการพื้นที่มากกว่าภาษาอังกฤษ

วิธีที่ 1: Media Queries

วิธีพื้นฐานที่สุดคือใช้ Media Queries กำหนดขนาดฟอนต์ต่างกันตาม breakpoint

/* Mobile */
body { font-size: 16px; }

/* Tablet */
@media (min-width: 768px) {
  body { font-size: 18px; }
}

/* Desktop */
@media (min-width: 1024px) {
  body { font-size: 20px; }
}

ข้อดีคือควบคุมได้ชัดเจน แต่ข้อเสียคือขนาดฟอนต์เปลี่ยนแบบกระโดด ไม่ smooth

วิธีที่ 2: Viewport Units (vw)

ใช้หน่วย vw (viewport width) ทำให้ขนาดฟอนต์ปรับตามความกว้างหน้าจอแบบ smooth

h1 {
  font-size: 5vw; /* 5% ของความกว้างหน้าจอ */
}

p {
  font-size: 2vw;
}

ข้อเสียคือบนจอเล็กมากอาจเล็กเกินไป และบนจอใหญ่มากอาจใหญ่เกินไป

วิธีที่ 3: CSS clamp() — วิธีที่แนะนำ

clamp() รวมข้อดีของทั้งสองวิธี โดยกำหนดค่าต่ำสุด, ค่า preferred, และค่าสูงสุด

h1 {
  /* ต่ำสุด 24px, preferred 5vw, สูงสุด 48px */
  font-size: clamp(24px, 5vw, 48px);
}

p {
  /* ต่ำสุด 16px, preferred 2vw, สูงสุด 20px */
  font-size: clamp(16px, 2vw, 20px);
}

Line Height สำหรับภาษาไทย

ภาษาไทยมีสระบนล่าง ควรใช้ line-height อย่างน้อย 1.6-1.8 เพื่อให้อ่านง่าย

body {
  font-family: 'Sarabun', sans-serif;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.7;
}

ตัวอย่าง Typography Scale ที่แนะนำ

:root {
  --font-size-xs: clamp(12px, 1.5vw, 14px);
  --font-size-sm: clamp(14px, 1.8vw, 16px);
  --font-size-base: clamp(16px, 2vw, 18px);
  --font-size-lg: clamp(18px, 2.5vw, 22px);
  --font-size-xl: clamp(24px, 3vw, 32px);
  --font-size-2xl: clamp(32px, 4vw, 48px);
  --font-size-3xl: clamp(40px, 5vw, 64px);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
p { font-size: var(--font-size-base); }
.caption { font-size: var(--font-size-sm); }

สรุป

สำหรับ Responsive Typography ภาษาไทย แนะนำใช้ CSS clamp() เป็นหลัก เพราะควบคุมขอบเขตได้ดีและ smooth ไม่ลืมเรื่อง line-height ที่ต้องมากกว่าภาษาอังกฤษเล็กน้อย