ฟอนต์สำหรับเว็บไซต์ที่เหมาะสมควรอ่านง่ายในขนาดใช้งานจริง รองรับทั้งภาษาไทยและอังกฤษ เข้ากับบุคลิกแบรนด์ และมีสิทธิ์ใช้งานบนเว็บตามที่ต้องการ เริ่มทดลองจาก Sarabun หรือ Noto Sans Thai Looped สำหรับเนื้อหา แล้วใช้ Kanit หรือ Prompt เป็นหัวข้อหากต้องการบุคลิกที่ต่างกัน ฟอนต์มีหัวและไม่มีหัวต่างเป็นตัวเลือกได้ แต่ควรตัดสินจากข้อความจริงบนมือถือ รวมถึงตรวจ license ของไฟล์ที่จะนำไปใช้ก่อนเสมอ เมื่อนำไปใช้จริง ควรให้ทีมพัฒนาเว็บไซต์ WordPress ให้โหลดฟอนต์อย่างเหมาะสม หลักการเลือกฟอนต์นี้ยังใช้กับการออกแบบ Web Application ที่อ่านง่าย
เกณฑ์เลือกฟอนต์สำหรับเว็บไซต์
การเลือกฟอนต์เว็บไซต์ หรือ font for website ควรเริ่มจากสิ่งที่ผู้เข้าชมต้องอ่านและทำบนหน้าเว็บ บทความยาวต้องอ่านต่อเนื่องได้สะดวก ส่วนเมนู ปุ่ม และแบบฟอร์มต้องแยกคำได้ชัดแม้มีพื้นที่จำกัด ความสวยงามจึงต้องพิจารณาควบคู่กับการใช้งาน
สำหรับเว็บไซต์บริษัทหรือเว็บไซต์องค์กร ลองนำชื่อบริษัท รายละเอียดบริการ และข้อความติดต่อมาวางในแบบก่อนเลือกฟอนต์ ข้อความเหล่านี้ช่วยให้เห็นว่าอัตลักษณ์ที่ต้องการเข้ากับการอ่านจริงหรือไม่
- อ่านได้ชัด: ตรวจรูปพยัญชนะ สระ วรรณยุกต์ และตัวเลข โดยเฉพาะข้อความยาวหรือคำที่มีเครื่องหมายซ้อนกัน
- รองรับภาษาที่ใช้: ทดลองภาษาไทย ภาษาอังกฤษ เลขไทย เครื่องหมายบาท และสัญลักษณ์ที่ปรากฏในเว็บไซต์
- มีน้ำหนักที่จำเป็น: แยกน้ำหนักปกติสำหรับเนื้อหาและน้ำหนักเน้นสำหรับหัวข้อ ตรวจว่ามีไฟล์หรือช่วงน้ำหนักนั้นให้ใช้จริง
- เข้ากับแบรนด์: เปรียบเทียบความรู้สึกของหัวข้อ เนื้อหา และปุ่มในหน้าเดียวกัน แทนการดูเฉพาะชื่อฟอนต์
- โหลดอย่างเหมาะสม: เลือกเฉพาะตระกูลและน้ำหนักที่ใช้ พร้อมกำหนดฟอนต์สำรอง
- สิทธิ์ใช้งานครอบคลุม: ตรวจการฝังบนเว็บไซต์ การใช้เชิงพาณิชย์ และเงื่อนไขของแหล่งที่ได้ไฟล์มา
!แนวทางเลือกฟอนต์สำหรับเว็บไซต์ภาษาไทย
ฟอนต์คืออะไร และ Web Font เกี่ยวข้องอย่างไร
ฟอนต์คือชุดรูปแบบตัวอักษรที่นำมาใช้แสดงข้อความ ส่วนตระกูลฟอนต์ หรือ font family คือกลุ่มแบบอักษรที่มีแนวทางการออกแบบร่วมกัน เช่น Sarabun หรือ Kanit ภายในตระกูลอาจมีน้ำหนักและรูปแบบให้เลือกต่างกัน จึงไม่ควรสมมติว่าทุกฟอนต์มีตัวบาง ตัวหนา และตัวเอียงครบเหมือนกัน
Web Font คือฟอนต์ที่หน้าเว็บเรียกโหลดมาให้เบราว์เซอร์ใช้ ผู้เข้าชมจึงไม่จำเป็นต้องติดตั้งฟอนต์นั้นไว้ก่อน ต่างจากการอาศัยฟอนต์ที่มีอยู่ในเครื่องเพียงอย่างเดียว อย่างไรก็ตาม ไฟล์อาจยังโหลดไม่เสร็จหรือโหลดไม่สำเร็จ จึงต้องมี fallback font หรือฟอนต์สำรองเพื่อให้ข้อความยังอ่านได้
อีกจุดที่ต้องแยกคือ ขนาดตัวอักษรกับน้ำหนักตัวอักษร ค่า font-size กำหนดขนาด ส่วน font-weight กำหนดน้ำหนัก การเพิ่มน้ำหนักไม่ได้ทำให้ตัวอักษรใหญ่ขึ้น และการใส่ค่าตัวหนาใน CSS ไม่ได้ยืนยันว่าเบราว์เซอร์ได้โหลดไฟล์ตัวหนาของฟอนต์นั้นแล้ว
ฟอนต์ไทยมีหัวกับไม่มีหัว เลือกอย่างไร
ฟอนต์ไทยมีหัวมีวงหรือส่วนหัวให้สังเกตในตัวอักษรหลายตัว ส่วนฟอนต์ไทยไม่มีหัวลดทอนส่วนนั้นลง ความต่างนี้มีผลต่อรูปลักษณ์และการแยกตัวอักษร แต่ไม่ใช่เกณฑ์ตัดสินความอ่านง่ายเพียงอย่างเดียว ขนาด น้ำหนัก ระยะบรรทัด และความคุ้นเคยของผู้อ่านต้องพิจารณาร่วมกัน
| ประเด็นเปรียบเทียบ | ฟอนต์ไทยมีหัว | ฟอนต์ไทยไม่มีหัว |
| ลักษณะ | มีส่วนหัวให้สังเกตในพยัญชนะหลายตัว | ลดทอนส่วนหัว รูปทรงดูเรียบขึ้น |
| ตัวอย่างสำหรับทดลอง | Sarabun, Noto Sans Thai Looped, IBM Plex Sans Thai Looped | Kanit, Prompt, Noto Sans Thai |
| จุดเริ่มต้นในการใช้งาน | ลองกับบทความ รายละเอียดบริการ และข้อความยาว | ลองกับหัวข้อ เมนู ปุ่ม และเนื้อหาที่เข้ากับแบรนด์ |
| สิ่งที่ต้องตรวจ | หัวตัวอักษรยังชัดเมื่อย่อขนาดหรือไม่ | ตัวอักษรที่รูปทรงใกล้กันยังแยกออกหรือไม่ |
| ข้อควรระวัง | น้ำหนักหนาหรือระยะบรรทัดแน่นอาจทำให้อ่านติดขัด | ขนาดเล็กหรือน้ำหนักบางอาจทำให้แยกตัวอักษรยาก |
คำว่า “มีหัว” และ “ไม่มีหัว” ในภาษาไทยไม่ควรใช้แทนการแบ่ง serif และ sans-serif ของอักษรละตินโดยตรง เพราะเป็นลักษณะคนละส่วนของตัวอักษร หากต้องจับคู่ไทย–อังกฤษ ให้เปรียบเทียบรูปทรงจริงมากกว่าจับคู่จากชื่อประเภทเท่านั้น
ลองวางประโยคเดียวกันด้วยฟอนต์แต่ละแบบ เช่น “เลือกเว็บไซต์ที่ใช้งานง่าย อ่านรายละเอียดก่อนตัดสินใจ” แล้วอ่านทั้งย่อหน้า หากต้องเพ่งหรือย้อนอ่านบางคำ ให้ลองปรับขนาดและน้ำหนักก่อนเปลี่ยนฟอนต์ ไม่จำเป็นต้องกำหนดว่ามีหัวใช้ได้เฉพาะเนื้อหา หรือไม่มีหัวใช้ได้เฉพาะหัวข้อ
ตัวอย่างฟอนต์ไทย–อังกฤษและการจับคู่
ฟอนต์จากบทความเดิมที่เหมาะนำมาเปรียบเทียบ ได้แก่ Sarabun, Kanit, Prompt, Mitr และ Noto Sans Thai ส่วน Itim, Pridi, Chakra Petch, Pattaya และ Chonburi เป็นตัวเลือกเพิ่มเติมสำหรับทดลองบุคลิกของหัวข้อ ไม่จำเป็นต้องนำทั้งหมดมาใช้ในเว็บไซต์เดียวกัน
เริ่มจากบทบาทของข้อความ
| บทบาท | ตัวเลือกเริ่มต้น | วิธีเปรียบเทียบก่อนเลือก |
| เนื้อหาบทความ | Sarabun หรือ Noto Sans Thai Looped | อ่านย่อหน้ายาว ตรวจสระ วรรณยุกต์ และการตัดบรรทัด |
| หัวข้อและข้อความเด่น | Kanit, Prompt หรือ Mitr | ทดสอบหัวข้อยาวบนมือถือ และดูว่าเด่นกว่าเนื้อหาเพียงพอหรือไม่ |
| เมนูและปุ่ม | Prompt หรือ Noto Sans Thai | ตรวจข้อความสั้นทั้งไทยและอังกฤษ รวมถึงพื้นที่ในปุ่ม |
| หัวข้อที่ต้องการบุคลิกเฉพาะ | Pridi, Itim หรือ Chakra Petch | ทดลองกับข้อความของแบรนด์ โดยไม่ใช้ความโดดเด่นแทนความชัดเจน |
ตารางนี้เป็นแนวทางทดลอง ไม่ใช่การจัดอันดับฟอนต์ แต่ละตัวเลือกควรผ่านการตรวจภาษา น้ำหนัก และ license ของไฟล์ที่จะใช้จริง
จับคู่หัวข้อกับเนื้อหาโดยไม่ทำให้หน้าเว็บกระจัดกระจาย
- Kanit กับ Sarabun: ลองใช้ Kanit สำหรับหัวข้อ และ Sarabun สำหรับเนื้อหายาว เพื่อแยกบทบาทของข้อความให้เห็นชัด
- Prompt กับ Sarabun: ลองใช้ Prompt ในหัวข้อและเมนู แล้วคง Sarabun ในคำอธิบายบริการ ตรวจว่าขนาดและน้ำหนักเชื่อมกันได้ดี
- Noto Sans Thai ตระกูลเดียว: ใช้ขนาดและน้ำหนักแยกหัวข้อกับเนื้อหา เหมาะเป็นจุดเริ่มต้นเมื่อยังไม่ต้องการจับคู่หลายตระกูล
สำหรับภาษาอังกฤษ เริ่มจากตรวจอักษรละตินที่มีในฟอนต์ที่เลือกก่อน หากเข้ากับภาษาไทยอยู่แล้วก็อาจไม่ต้องเพิ่มฟอนต์อีกตัว หากต้องการใช้ฟอนต์อังกฤษแยก เช่น Poppins ให้เปรียบเทียบกับฟอนต์ไทยในบรรทัดเดียวกัน และตรวจชุดอักขระกับสิทธิ์ใช้งานของไฟล์นั้นด้วย
ใช้ข้อความทดสอบอย่าง “บริการ Website Design สำหรับธุรกิจ” และ “ติดต่อทีม Support ทาง Email” แล้วดูความสูงของตัวพิมพ์เล็ก ความหนาของเส้น แนวฐาน และระยะห่าง หากภาษาใดดูใหญ่หรือเข้มกว่าอย่างชัดเจน ควรปรับคู่ฟอนต์หรือขนาดก่อนนำไปใช้ทั้งเว็บไซต์
แหล่งฟอนต์และการตรวจ License
เริ่มค้นหาตัวเลือกได้จาก Google Fonts, Adobe Fonts หรือเว็บไซต์ของผู้สร้างฟอนต์โดยตรง โดยตรวจรายละเอียดของฟอนต์และช่องทางใช้งานที่เลือก สำหรับการค้นหาและนำฟอนต์จาก Google Fonts ไปใช้โดยเฉพาะ อ่านต่อในคู่มือ Google Font Thai
คำว่า “ดาวน์โหลดฟรี” ไม่ได้บอกครบว่าใช้กับเว็บไซต์ธุรกิจได้อย่างไร และสิทธิ์ติดตั้งฟอนต์ในเครื่องไม่ควรถูกตีความว่าเป็นสิทธิ์ฝังฟอนต์บนเว็บโดยอัตโนมัติ ก่อนใช้งาน ให้เปิดเอกสาร license ที่มาพร้อมไฟล์หรือเงื่อนไขจากผู้ให้บริการ แล้วตรวจให้ตรงกับงานจริง
| สิ่งที่ต้องตรวจ | คำถามที่ควรหาคำตอบ |
| การใช้เชิงพาณิชย์ | อนุญาตให้นำไปใช้กับเว็บไซต์ธุรกิจหรือร้านค้าในรูปแบบที่ต้องการหรือไม่ |
| การฝังบนเว็บ | อนุญาตให้ใช้เป็น Web Font และโฮสต์ไฟล์เองหรือกำหนดให้ใช้ผ่านบริการใด |
| ขอบเขตการใช้งาน | มีเงื่อนไขเรื่องโดเมน ปริมาณการใช้งาน หรือบัญชีผู้รับสิทธิ์หรือไม่ |
| การแก้ไขไฟล์ | อนุญาตให้แปลงรูปแบบไฟล์ ลดชุดอักขระ หรือแก้ไขฟอนต์หรือไม่ |
| การส่งมอบ | ส่งไฟล์ต่อให้ลูกค้าหรือผู้พัฒนารายอื่นได้ภายใต้เงื่อนไขใด |
| การเก็บหลักฐาน | มีไฟล์ license ชื่อเวอร์ชัน แหล่งดาวน์โหลด และหลักฐานสิทธิ์ให้ตรวจย้อนหลังหรือไม่ |
หากเงื่อนไขยังไม่ชัด ควรให้ผู้ให้บริการยืนยันขอบเขตการใช้งานก่อนติดตั้ง ไม่ควรสรุปสิทธิ์จากชื่อฟอนต์หรือจากเว็บไซต์ที่นำไฟล์มาแจกต่อเพียงอย่างเดียว
นำฟอนต์ไปใช้พร้อมกำหนดฟอนต์สำรอง
เมื่อเลือกฟอนต์และตรวจสิทธิ์แล้ว ให้โหลดเฉพาะน้ำหนักที่จำเป็น ตัวอย่างต่อไปนี้ใช้ Sarabun น้ำหนักปกติและตัวหนา โดยวางส่วน HTML ใน ของเว็บไซต์
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&display=swap" rel="stylesheet">
body {
font-family: "Sarabun", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
}
h2, h3, strong {
font-weight: 700;
}
button, input, select, textarea {
font: inherit;
}
ค่าข้างต้นเป็นตัวอย่างสำหรับเริ่มทดสอบ ไม่ใช่ขนาดที่รับรองว่าเหมาะกับทุกเว็บไซต์ ส่วน display=swap ขอให้ใช้พฤติกรรมแสดงฟอนต์สำรองระหว่างรอฟอนต์หลัก ไม่ได้หมายความว่าฟอนต์จะเริ่มโหลดหลังหน้าเว็บเสร็จทั้งหมด เมื่อสลับฟอนต์ ข้อความยังอาจเปลี่ยนความกว้างหรือเลื่อนบรรทัดได้ จึงต้องตรวจหน้าจอจริงด้วย
!การเลือกฟอนต์และน้ำหนักให้เหมาะกับการโหลดเว็บไซต์
หลีกเลี่ยงการโหลดหลายตระกูลที่หน้าตาใกล้กันโดยไม่มีบทบาทชัดเจน หากพิจารณา variable font ให้ตรวจว่าตระกูลนั้นมีไฟล์รูปแบบนี้จริง และเปรียบเทียบขนาดไฟล์กับน้ำหนักที่ใช้ก่อนเลือก ไม่ควรสรุปว่าจะลดขนาดหรือทำให้เว็บเร็วขึ้นได้เป็นสัดส่วนตายตัว
ทดลองฟอนต์บน Desktop, Mobile และ Figma
การเลือกจากตัวอย่างคำสั้น ๆ ยังไม่พอ ควรวางฟอนต์ในหน้าที่มีหัวข้อ ย่อหน้า ลิงก์ ปุ่ม และแบบฟอร์มครบ สำหรับการทำแบบก่อนพัฒนา สามารถใช้เครื่องมือ Figma เพื่อออกแบบหน้าจอ และเทียบตัวเลือกด้วยเนื้อหาเดียวกัน จากนั้นตรวจซ้ำในเบราว์เซอร์ เพราะแบบออกแบบไม่ได้ยืนยันผลการโหลดและแสดงผลบนเว็บไซต์จริง
ปรับขนาดและระยะบรรทัดจากการอ่านจริง
สำหรับเนื้อหา ลองเริ่มที่ขนาด 16–18px และ line-height: 1.6 ตามแนวทางตัวอย่างในบทความเดิม แล้วปรับตามฟอนต์ ความกว้างของคอลัมน์ และอุปกรณ์ อย่าตัดสินจากตัวเลขอย่างเดียว เพราะฟอนต์ต่างตระกูลอาจดูใหญ่ไม่เท่ากันแม้กำหนดขนาดเดียวกัน
ตรวจว่าระยะบรรทัดไม่ทำให้สระและวรรณยุกต์เบียดกัน หลีกเลี่ยงการบีบช่องไฟเพื่อให้ข้อความพอดีกล่อง และใช้สีข้อความที่แยกจากพื้นหลังชัดเจน สำหรับหัวข้อ ให้ลองข้อความที่ยาวที่สุดซึ่งคาดว่าจะใช้ เพื่อดูการขึ้นบรรทัดบนหน้าจอแคบ
!ตัวอย่างแนวคิดเรื่องฟอนต์กับประสบการณ์ผู้ใช้เว็บไซต์
Checklist ก่อนใช้งานจริง
- ใส่ข้อความของเว็บไซต์: ทดสอบชื่อบริการ ย่อหน้ายาว ชื่อบุคคล และคำที่มีสระกับวรรณยุกต์ เช่น “ผู้ใช้” และ “น้ำดื่ม”
- ตรวจภาษาและสัญลักษณ์: ใช้ข้อความ “ภาษาไทย English 0123456789 ๐๑๒๓๔๕๖๗๘๙ ฿ @ &” เพื่อหาอักขระที่ขาดหรือหน้าตาต่างจากชุดหลัก
- เปิดทั้งหน้าจอใหญ่และมือถือ: อ่านต่อเนื่อง ตรวจหัวข้อ เมนู ปุ่ม และข้อความในช่องกรอก รวมถึงทดลองขยายข้อความ
- ตรวจน้ำหนักจริง: ดูว่าเนื้อหาปกติและข้อความเน้นต่างกันพอดี และไฟล์น้ำหนักที่ตั้งไว้ถูกเรียกใช้งาน
- จำลองการโหลดช้า: ตรวจว่าฟอนต์สำรองยังอ่านได้ และเมื่อฟอนต์หลักมาถึงมีข้อความหรือปุ่มขยับจนรบกวนการใช้งานหรือไม่
- ใช้กติกาเดียวกันทั้งเว็บ: กำหนดรูปแบบของหัวข้อ เนื้อหา คำอธิบาย และปุ่มให้สม่ำเสมอ แล้วตรวจหน้าที่ใช้แม่แบบต่างกัน
สำหรับร้านค้าออนไลน์ ควรทดสอบชื่อสินค้า ตัวเลือกสินค้า และข้อความในขั้นตอนชำระเงินด้วย ดูแนวทางวางองค์ประกอบร่วมกันได้ในบทความออกแบบ UX/UI เว็บขายของออนไลน์ เพราะความชัดเจนของตัวอักษรต้องทำงานร่วมกับตำแหน่งข้อมูลและลำดับการใช้งาน
คำถามที่พบบ่อยเกี่ยวกับฟอนต์เว็บไซต์
ฟอนต์ไทยมีหัวอ่านง่ายกว่าไม่มีหัวเสมอหรือไม่?
ไม่เสมอไป ส่วนหัวเป็นองค์ประกอบหนึ่งที่ช่วยแยกรูปตัวอักษร แต่ความอ่านง่ายยังขึ้นกับขนาด น้ำหนัก ระยะบรรทัด และผู้อ่าน ลองเปรียบเทียบทั้งสองแบบด้วยข้อความเดียวกันบนมือถือ ก่อนเลือกใช้กับเนื้อหายาว
เว็บไซต์ควรใช้ฟอนต์กี่ตระกูล?
เริ่มจากหนึ่งหรือสองตระกูลก็เพียงพอสำหรับการทดลอง เช่น ใช้ตระกูลเดียวแล้วแยกขนาดและน้ำหนัก หรือแยกฟอนต์หัวข้อกับเนื้อหา เพิ่มฟอนต์เมื่อมีบทบาทชัดเจน และตรวจผลต่อการโหลดกับความสม่ำเสมอของหน้าเว็บด้วย
ฟอนต์ไทยใช้กับข้อความภาษาอังกฤษได้เลยหรือไม่?
ต้องตรวจชุดอักขระของไฟล์ที่เลือกก่อน แม้มีอักษรอังกฤษก็ควรทดสอบชื่อแบรนด์ ตัวเลข และเครื่องหมายที่ใช้งานจริง หากต้องจับคู่ฟอนต์อังกฤษอีกตัว ให้ดูความสูง น้ำหนัก และแนวฐานในบรรทัดที่มีสองภาษาปนกัน
ฟอนต์ฟรีใช้กับเว็บไซต์เชิงพาณิชย์ได้ทุกตัวหรือไม่?
ต้องอ่าน license ของฟอนต์นั้นก่อน คำว่าฟรีอาจมีขอบเขตการใช้งานต่างกัน ตรวจทั้งการใช้เชิงพาณิชย์ การฝังบนเว็บ และเงื่อนไขการส่งมอบไฟล์ พร้อมเก็บหลักฐานสิทธิ์ไว้กับงาน
ทำไมเลือกฟอนต์แล้วภาษาไทยยังแสดงเป็นอีกแบบ?
อาจเกิดจากไฟล์ไม่มีอักขระไทย ฟอนต์โหลดไม่สำเร็จ ชื่อ font-family ไม่ตรง หรือกฎ CSS ถูกส่วนอื่นเขียนทับ ตรวจฟอนต์ที่เบราว์เซอร์ใช้จริงและสถานะการโหลดไฟล์ก่อนเพิ่มฟอนต์ใหม่ พร้อมทดสอบฟอนต์สำรองว่ารองรับข้อความที่ต้องใช้
เปลี่ยนฟอนต์แล้วอันดับ SEO หรือยอดขายจะเพิ่มขึ้นหรือไม่?
ไม่สามารถรับรองผลจากการเปลี่ยนฟอนต์เพียงอย่างเดียวได้ เป้าหมายที่ตรวจได้โดยตรงคือข้อความอ่านชัด การแสดงผลครบ และการใช้งานไม่ติดขัด หากต้องการประเมินผลทางธุรกิจ ควรกำหนดสิ่งที่จะวัดและเก็บข้อมูลก่อนกับหลังการเปลี่ยน โดยพิจารณาปัจจัยอื่นร่วมด้วย
เมื่อได้ชุดฟอนต์ที่ผ่านการทดสอบแล้ว ให้บันทึกชื่อฟอนต์ น้ำหนัก ขนาด ระยะบรรทัด และสิทธิ์ใช้งานเป็นแนวทางของเว็บไซต์ หากต้องการให้การเลือกฟอนต์เชื่อมกับโครงสร้างหน้าและภาพลักษณ์ธุรกิจ สามารถดูบริการรับทำเว็บไซต์ของ Nextstead เพื่อเตรียมรายละเอียดงานออกแบบร่วมกัน
