ถ้าเอารูปภาพและสีออกจากเว็บไซต์ธุรกิจทั่วไป สิ่งที่เหลือส่วนใหญ่คือข้อความ: คำอธิบายบริการ หัวข้อ ราคา ป้ายกำกับในแบบฟอร์ม และปุ่ม ผู้เข้าชมใช้เวลาอยู่กับข้อความเหล่านั้น การจัดตัวอักษรบนเว็บ (web typography) จึงกำหนดว่าเว็บไซต์ดูน่าเชื่อถือ และใช้งานง่ายแค่ไหน มากกว่าการตัดสินใจด้านดีไซน์แทบทุกเรื่อง
ตัวอักษรที่ดี ไม่ค่อยมาจากฟอนต์ที่แปลกใหม่ แต่มาจากการตัดสินใจไม่กี่เรื่อง เกี่ยวกับแบบตัวอักษร ขนาด ระยะห่าง และการโหลด ที่ตัดสินครั้งเดียว แล้วตั้งเป็นกฎที่ทุกหน้าสืบทอดไป
คำตอบสั้น ๆ
การจัดตัวอักษรบนเว็บที่ดีสำหรับเว็บไซต์ธุรกิจ สรุปได้เป็นค่าเริ่มต้นไม่กี่ข้อ:
- ตระกูลฟอนต์ 1 หรือ 2 ตระกูล รวมกันแล้วมีน้ำหนักและสไตล์ 3 หรือ 4 แบบ
- แบบตัวอักษรที่รองรับทุกภาษา และทุกระบบการเขียนที่คุณเผยแพร่ และทดสอบกับเนื้อหาจริง
- ข้อความเนื้อหาอย่างน้อย 16px บนมือถือ บนเดสก์ท็อปมักเป็น 17–20px และตั้งค่าด้วย
rem
- บรรทัดยาวประมาณ 45–75 ตัวอักษร ระยะบรรทัดของเนื้อหาประมาณ 1.5 และหัวข้อแน่นกว่านั้น
- สเกลขนาดตัวอักษรที่สม่ำเสมอ เพื่อให้หัวข้อแต่ละระดับ แตกต่างกันชัดเจน
- ไฟล์ WOFF2 ที่โฮสต์เอง พร้อมตั้งค่า
font-display เพื่อให้ข้อความขึ้นเร็ว และไม่กระโดด
ทำไมตัวอักษรจึงแบกงานดีไซน์ส่วนใหญ่
หน้าความสามารถของผู้ผลิต หรือคู่มือการรักษาของคลินิก เป็นสิ่งที่ถูกอ่าน ไม่ใช่ถูกมอง ผู้เข้าชมกำลังกวาดตาหาคำตอบ และการจัดตัวอักษรกำหนดว่าเขาจะเจอเร็วแค่ไหน ตัวอักษรยังสื่อน้ำเสียงด้วย: ประโยคเดียวกันในฟอนต์ sans-serif แบบเรขาคณิต กับฟอนต์ serif แบบดั้งเดิม บอกเรื่องธุรกิจต่างกัน
การจัดตัวอักษรคือจุดที่ดีไซน์ UX การเข้าถึงสำหรับทุกคน ประสิทธิภาพ และเนื้อหา มาบรรจบกัน นี่คือเหตุผลที่มันเป็นหนึ่งในส่วนผสมของเว็บไซต์ที่ดีเป็นอย่างไร และควรได้รับการตัดสินใจอย่างตั้งใจ ไม่ใช่ใช้อะไรก็ได้ที่มากับธีม
วิธีเลือกแบบตัวอักษรสำหรับเว็บไซต์ธุรกิจ
เริ่มจากหน้าที่
เว็บไซต์ส่วนใหญ่ต้องการ ตัวอักษรสำหรับอ่าน ในเนื้อหา เมนู แบบฟอร์ม และปุ่ม และ ตัวอักษรสำหรับแสดงผล ในหัวข้อใหญ่ ซึ่งบุคลิกสำคัญกว่าความทนทาน เลือกฟอนต์เนื้อหาก่อน: มันปรากฏในทุกหน้า และทำงานหนักกว่า
ให้ตรงกับแบรนด์ ไม่ใช่เทรนด์
สไตล์ตัวอักษรแต่ละแบบ มีความหมายโดยกว้างที่ติดมาด้วย ซึ่งมีประโยชน์ในการเขียนบรีฟ:
ถ้าคุณมีแนวทางแบรนด์ ให้เริ่มจากฟอนต์ของแบรนด์ โดยต้องใช้งานบนหน้าจอได้ดี และสิทธิ์การใช้งานครอบคลุมการใช้บนเว็บ คู่มือแนวทางแบรนด์สำหรับเว็บไซต์ ของเรา อธิบายว่าควรขออะไร ตอนรับมอบงานแบรนด์
ทดสอบความอ่านง่ายก่อนตัดสินใจ
หน้าตัวอย่างฟอนต์ ทำให้ฟอนต์ดูดีเกินจริง ให้ทดสอบในสภาพที่ผู้เข้าชมของคุณใช้จริง:
ฟอนต์ไหนดีที่สุดสำหรับเว็บไซต์?
ไม่มีฟอนต์เดียวที่ดีที่สุด ฟอนต์ที่ใช่ คือฟอนต์ที่เข้ากับแบรนด์ ผ่านการเช็กด้านบน รองรับภาษาของคุณ และมีสิทธิ์การใช้งานตรงกับที่คุณจะใช้ Inter, Source Sans 3, IBM Plex และ Noto เป็นจุดเริ่มต้นที่ออกแบบมาดี และใช้เชิงพาณิชย์ได้ฟรีทั้งหมด ภายใต้สัญญาอนุญาต Open Font License ของ SIL
เช็กทุกภาษาและทุกระบบการเขียนที่คุณใช้
ฟอนต์มีตัวอักษรครบไหม
ฟอนต์มีเฉพาะตัวอักษรที่นักออกแบบวาดไว้ เมื่อหน้าเว็บต้องใช้ตัวที่ไม่มี เบราว์เซอร์จะยืมจากฟอนต์อื่น บรรทัดเดียวจึงมีสองฟอนต์ปนกัน หรือแสดงเป็นกล่องว่าง ที่มักเรียกกันว่า “tofu” ตระกูลฟอนต์ Noto ของ Google ซึ่งสร้างมาให้ครอบคลุมระบบการเขียนจำนวนมาก ตั้งชื่อตามเป้าหมาย “no more tofu” (ไม่มี tofu อีกต่อไป)
ลองเช็กด้วยตัวเอง วางเนื้อหาจริงจากทุกภาษา ลงในเครื่องมือทดสอบออนไลน์ของฟอนต์ รวมถึงตัวอักษรที่มีเครื่องหมายเสียง สัญลักษณ์สกุลเงิน และชื่อลูกค้า คำโฆษณาว่า “รองรับหลายร้อยภาษา” ไม่ใช่การทดสอบ
ระบบการเขียนต่างกัน ต้องตั้งค่าต่างกัน
ระบบการเขียนบางแบบ มีเครื่องหมายซ้อนอยู่ด้านบนและด้านล่างตัวอักษร และต้องการระยะบรรทัดมากขึ้น ไม่อย่างนั้นจะถูกตัดขอบในปุ่ม และกล่องที่กำหนดความสูงตายตัว หลายระบบไม่มีตัวพิมพ์ใหญ่ และบางระบบไม่มีธรรมเนียมตัวเอียง ลำดับชั้นที่สร้างจากป้ายตัวพิมพ์ใหญ่ หรือการเน้นด้วยตัวเอียง จึงใช้ข้ามภาษาไม่ได้ บางระบบไม่เว้นวรรคระหว่างคำ ซึ่งเปลี่ยนวิธีตัดบรรทัด
- ระบุภาษา ตั้ง attribute
lang ในทุกหน้า และในทุกช่วงข้อความที่เป็นภาษาอื่น แล้วใช้ตัวเลือก :lang() ของ CSS ปรับฟอนต์และระยะบรรทัดแยกตามภาษา ระบบการเขียนจากขวาไปซ้าย เช่น อาหรับ และฮีบรู ต้องใช้ dir="rtl" ด้วย
- หาฟอนต์คู่ ในกรณีที่ฟอนต์ของแบรนด์ ไม่มีเวอร์ชันสำหรับระบบการเขียนนั้น ให้เลือกฟอนต์ที่มีน้ำหนักและอารมณ์ใกล้เคียงกัน
- ระวังขนาดไฟล์ ระบบการเขียนที่มีตัวอักษรหลายพันตัว ทำให้ไฟล์ฟอนต์ใหญ่มาก จึงควรแบ่งไฟล์ตามช่วงตัวอักษร (
unicode-range) หรือใช้ฟอนต์ของระบบ
- ทดสอบคำแปลจริง ในหัวข้อ เมนู และปุ่ม: ความยาวแทบไม่เคยเท่าต้นฉบับ
การเลือกภาษาที่จะเปิดตัว การแปล และปุ่มเปลี่ยนภาษา อยู่ในบทความการวางแผนเว็บไซต์หลายภาษา
จับคู่ฟอนต์: ตระกูลเดียวหรือสองตระกูล?
ตระกูลฟอนต์ที่ออกแบบมาดี และมีหลายน้ำหนัก รับงานทั้งหมดได้เพียงลำพัง โดยสร้างลำดับชั้นจากขนาด น้ำหนัก และระยะห่าง และโหลดไฟล์น้อยกว่า
ตระกูลที่สองคุ้มค่า เมื่อมันทำให้หัวข้อมีน้ำเสียงที่โดดเด่น การจับคู่ที่ได้ผลมักมี:
- ความต่างของสไตล์ที่ชัดเจน เช่น หัวข้อเป็น serif และเนื้อหาเป็น sans-serif หรือกลับกัน
- สัดส่วนใกล้เคียงกัน โดยเฉพาะ x-height เพื่อให้สองฟอนต์อยู่ด้วยกันได้อย่างลงตัว
- อารมณ์เดียวกัน serif ที่เป็นทางการ กับ sans-serif ปลายมนที่ขี้เล่น ดึงไปคนละทาง
ตระกูลฟอนต์ใหญ่ที่มีเวอร์ชัน sans-serif และ serif คู่กัน เช่น IBM Plex Sans กับ Serif, Source Sans กับ Source Serif หรือ Noto Sans กับ Noto Serif ทำให้การจับคู่ฟอนต์ง่ายขึ้น หลีกเลี่ยง sans-serif สองตัวที่คล้ายกัน (ดูเหมือนใช้ผิด) ฟอนต์ตกแต่งในเนื้อหาหรือปุ่ม และตระกูลที่สาม สำหรับส่วน “พิเศษ”
ตั้งขนาด ความยาวบรรทัด และระยะบรรทัด
ขนาดตัวอักษรบนเว็บไซต์
เบราว์เซอร์ส่วนใหญ่ตั้งค่าเริ่มต้นที่ 16px ซึ่งเป็นขั้นต่ำที่สมเหตุสมผล สำหรับเนื้อหาบนมือถือ บนเดสก์ท็อป 17–20px มักอ่านง่ายกว่า ขึ้นกับ x-height ของฟอนต์ ตั้งขนาดด้วย rem แทนพิกเซล เพื่อให้ข้อความเคารพการตั้งค่าเบราว์เซอร์ ของผู้เข้าชมแต่ละคน ให้ช่องกรอกแบบฟอร์มมีขนาด 16px ขึ้นไปด้วย เพราะบน iPhone เบราว์เซอร์จะซูมเข้า เมื่อมีคนแตะช่องที่ข้อความเล็กกว่านั้น
สเกลขนาดสำหรับหัวข้อ
สเกลขนาดตัวอักษร (type scale) เพิ่มขนาดด้วยอัตราส่วนที่สม่ำเสมอ เพื่อให้หัวข้อแต่ละระดับดูสัมพันธ์กัน มือถือเหมาะกับอัตราส่วนที่ไม่ห่างมาก เช่น 1.2 หน้าจอใหญ่รับได้ 1.25 หรือ 1.333 นี่เป็นจุดเริ่มต้น ไม่ใช่กฎตายตัว:
ฟังก์ชัน clamp() ของ CSS ทำให้แต่ละขนาดโตขึ้นอย่างลื่นไหล จากมือถือถึงเดสก์ท็อป ใส่ค่า rem ไว้ในส่วนกลาง เช่น clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem): ถ้าใช้แค่หน่วย viewport ข้อความจะแทบไม่ขยาย เมื่อมีคนซูมเข้า สำหรับเลย์เอาต์ทั้งหน้า ดูmobile-first กับ responsive design
ความยาวบรรทัดและระยะบรรทัด
บรรทัดที่ยาว ทำให้หาบรรทัดถัดไปยาก บรรทัดที่สั้น ตัดประโยคเป็นท่อน ๆ แนวทางคลาสสิก จากหนังสือว่าด้วยสไตล์การจัดตัวอักษรของ Robert Bringhurst คือ 45 ถึง 75 ตัวอักษรต่อบรรทัด เกณฑ์ Visual Presentation (1.4.8) ระดับ AAA ของ WCAG ใช้ 80 ตัวอักษรเป็นขีดจำกัดบน (40 สำหรับภาษาจีน ญี่ปุ่น และเกาหลี) ความกว้างสูงสุดประมาณ 60ch ถึง 70ch มักอยู่ในช่วงนี้ แต่ให้เช็กกับข้อความจริง: ch คือความกว้างของเลขศูนย์ ไม่ใช่ความกว้างเฉลี่ยของตัวอักษร
ข้อความเนื้อหาต้องการระยะบรรทัดประมาณ 1.5 (ค่าต่ำสุดที่เกณฑ์ WCAG ข้อเดียวกันใช้ภายในย่อหน้า) และมากกว่านั้นเล็กน้อย สำหรับบรรทัดยาว หรือระบบการเขียนที่ตัวสูง หัวข้อต้องการน้อยกว่า มักอยู่ที่ 1.1–1.3 ไม่อย่างนั้นหัวข้อสองบรรทัด จะอ่านเหมือนสองบรรทัดแยกกัน ใช้ค่าที่ไม่มีหน่วย (1.5 ไม่ใช่ 24px) เพื่อให้ระยะบรรทัดปรับตามขนาดข้อความ
หัวข้อที่สร้างลำดับชั้น
- ระยะห่างเป็นของสิ่งที่ตามมา เว้นที่ด้านบนหัวข้อมากกว่าด้านล่าง เพื่อให้หัวข้อผูกกับส่วนของมัน
- ขั้นต้องชัดเจน H2 ไม่ควรถูกเข้าใจผิดว่าเป็น H3
- ใช้ sentence case และชิดด้านเริ่มต้น เก็บตัวพิมพ์ใหญ่ไว้ใช้กับป้ายสั้น ๆ และจัดย่อหน้าชิดซ้าย (ชิดขวาในภาษาที่เขียนจากขวาไปซ้าย) ไม่ใช่จัดเต็มแนวหรือจัดกึ่งกลาง
- โครงสร้างก่อน สไตล์ทีหลัง เลือกระดับหัวข้อตามโครงร่างของหน้า แล้วค่อยจัดสไตล์ H4 ที่เลือกเพราะ “ขนาดดูพอดี” ทำลายโครงร่าง ที่ผู้ใช้โปรแกรมอ่านหน้าจอใช้นำทาง และที่เสิร์ชเอนจินอ่าน
สำหรับหลักการกว้าง ๆ ของการนำสายตา ดูลำดับชั้นทางสายตาในการออกแบบเว็บ ส่วนอัตราคอนทราสต์ การขยายข้อความ และการปรับระยะห่าง อยู่ในบทความคอนทราสต์สี และตัวอักษรที่เข้าถึงได้
โหลดเว็บฟอนต์โดยไม่ทำให้เว็บช้า
ถ้าจัดการไม่ระวัง เว็บฟอนต์จะทำให้ข้อความที่อ่านได้ขึ้นช้า และทำให้หน้ากระโดดตอนสลับฟอนต์ ซึ่งอาจปรากฏใน Core Web Vitals เป็น Largest Contentful Paint ที่ช้าลง หรือเป็น layout shift
โหลดไฟล์ให้น้อยลง
แต่ละน้ำหนักและสไตล์ มักเป็นไฟล์แยก และเว็บไซต์ธุรกิจส่วนใหญ่ต้องการ 3 หรือ 4 ไฟล์: ปกติ ตัวเอียง ตัวหนา และอาจมีน้ำหนักสำหรับหัวข้อ variable font รวมหลายน้ำหนักไว้ในไฟล์เดียว แต่อาจหนักกว่าไฟล์ static สองไฟล์ จึงควรเทียบขนาด ถ้าหน้าต้องใช้ตัวหนาหรือตัวเอียง แต่คุณไม่ได้โหลดไว้ เบราว์เซอร์จะปลอมขึ้นมา ด้วยการทำให้ตัวปกติหนาขึ้นหรือเอียง ซึ่งแทบไม่เคยดูดี
โฮสต์ WOFF2 เอง
WOFF2 คือฟอร์แมตบีบอัด ที่เบราว์เซอร์ปัจจุบันทุกตัวรองรับ และเป็นฟอร์แมตเดียวที่เว็บไซต์ส่วนใหญ่ต้องใช้ การโฮสต์เอง ช่วยประหยัดการเชื่อมต่อไปยังเซิร์ฟเวอร์อื่น และไม่ส่ง IP address ของผู้เข้าชมให้บุคคลที่สาม เหตุผลเก่าที่สนับสนุนบริการฟอนต์ส่วนกลาง ว่าผู้เข้าชมมีไฟล์อยู่ในแคชแล้ว ใช้ไม่ได้อีกต่อไป: ตอนนี้เบราว์เซอร์แยกแคชของแต่ละเว็บไซต์ การทำ subset ตัดตัวอักษรที่ไม่ใช้ออก แต่ในเว็บไซต์หลายภาษา ให้เช็กว่าไม่มีเนื้อหาไหน ที่ยังต้องใช้ตัวอักษรเหล่านั้น
ควบคุมสิ่งที่ผู้เข้าชมเห็นระหว่างโหลดฟอนต์
descriptor font-display ในกฎ @font-face ของคุณ ใช้กำหนดเรื่องนี้:
swap แสดงข้อความทันทีด้วยฟอนต์สำรอง แล้วสลับเป็นเว็บฟอนต์ เป็นค่าเริ่มต้นที่ดีoptional ใช้เว็บฟอนต์เฉพาะเมื่อพร้อมใช้งานแทบทันที เช่น จากแคช เหมาะที่สุดเมื่อความนิ่งของหน้า สำคัญกว่าฟอนต์ที่ตรงเป๊ะ ในการเข้าชมครั้งแรก
preload เฉพาะไฟล์ 1 หรือ 2 ไฟล์ ที่ต้องใช้ในส่วนบนของหน้า เพื่อลดการกระโดดตอนสลับฟอนต์ ให้เลือกฟอนต์สำรองที่มีสัดส่วนใกล้เคียง แล้วปรับด้วย size-adjust และ descriptor ที่เกี่ยวข้องใน @font-face
ฟอนต์ของระบบก็เป็นทางเลือกที่ใช้ได้
ชุดฟอนต์ของระบบ (system font stack) ที่เริ่มด้วย system-ui ใช้ฟอนต์ที่มีอยู่แล้วในแต่ละอุปกรณ์ จึงไม่มีอะไรต้องดาวน์โหลด และมักรองรับระบบการเขียนได้กว้าง ข้อแลกเปลี่ยนคือการควบคุม: ข้อความจะแสดงด้วยฟอนต์ของแต่ละแพลตฟอร์ม เช่น San Francisco บนอุปกรณ์ Apple และ Segoe UI บน Windows แบรนด์จึงต้องสื่อผ่านเลย์เอาต์ น้ำหนัก และสี
เช็กสิทธิ์การใช้งาน
สิทธิ์การใช้งานบนเดสก์ท็อปและบนเว็บ มักแยกกัน และสิทธิ์บนเว็บมักคิดราคาตามจำนวนการเปิดหน้า หรือจำนวนโดเมน บริการแบบสมัครสมาชิกบางราย ให้บริการฟอนต์จากเซิร์ฟเวอร์ของตัวเองเท่านั้น และผูกการใช้บนเว็บ ไว้กับการสมัครสมาชิกที่ยังใช้งานอยู่ ยืนยันเป็นลายลักษณ์อักษรว่า สิทธิ์ของคุณครอบคลุมทุกโดเมน และทุกเวอร์ชันภาษา การโฮสต์เอง และการทำ subset
ทำอะไรต่อ
ใช้คำตอบสั้น ๆ ด้านบนเป็นเช็กลิสต์ สำหรับเว็บไซต์ปัจจุบัน แล้วทดสอบเร็ว ๆ 3 ข้อ:
จากนั้นล็อกผลลัพธ์ไว้ในสไตล์ส่วนกลางของธีม หรือ page builder เพื่อให้ผู้แก้ไขเลือก “Heading 2” แทนการตั้ง 27px ตัวหนา นั่นคือเมล็ดพันธุ์ของระบบดีไซน์
กำลังวางแผนเว็บไซต์ใหม่ หรือปรับปรุงเว็บไซต์? ตัดสินเรื่องตัวอักษรแต่เนิ่น ๆ: ทุกเทมเพลตสืบทอดมันไป ในงานออกแบบและพัฒนาเว็บไซต์ ของเรา การจัดตัวอักษรเป็นส่วนหนึ่งของดีไซน์ตามแบรนด์ของคุณ ซึ่งคุณอนุมัติก่อนเริ่มสร้างทุกอย่าง ถ้าไฟล์ฟอนต์ที่หนัก หรือข้อความที่อึดอัดบนมือถือ อาจกำลังฉุดเว็บไซต์ของคุณ การตรวจสอบเว็บไซต์ฟรี จะทบทวนความเร็วและประสบการณ์บนมือถือ และบอกว่าควรแก้อะไรก่อน