เทคนิคการเลือกใชฟอนตใหเหมาะสมกับเว็บไซตของเรา

rainmaker.in.th/how-to-choose-font-for-website

August 17, 2018

อยากใหหนาเว็บของเราสวยเหมือนหนานิตยสาร นอกจากการออกแบบหรือการเลือกซื้ อ Theme

ที่ดีมาใชงาน การเลือกฟอนตเพื่อมาแสดงผลในสวนของเนื้ อหาบนเว็บไซตก็สําคัญไมแพกัน
ในปั จจุบันเว็บฟอนตภาษาไทยมีใหเราไดเลือกใชเยอะมาก
และยังรวมไปถึงฟอนตฟรีอ่ น
ื ๆที่เราสามารถนําไปแปลงเพื่อใหแสดงผลบนเว็บก็สามารถทําได

ถาเป็ นเมื่อกอนฟอนตท่ใี ชบนเว็บก็คงจะหมีไมพนฟอนตระบบอยาง Tahoma

ที่ดูโบราณและไมเขากับดีไซนของเว็บเราเลยแมแตนอย
แตตอนนี้เรามีเว็บฟอนตใหไดเลือกใชกันเยอะมากขึ้นไมวาจะเป็ น Google Fonts, Noto
Font และฟอนตไทยฟรีจาก F0nt

พอตัวเลือกเยอะขึ้น ก็กลายเป็ นวาไมรูจะเลือกใชฟอนตตัวไหวดี ฟอนตน้ ก

ี ็สวย ฟอนตน้ ก
ี ็ดูดี
ื  
บางคนเลอกไมไดใสไปหลายฟอนตใน 1 เวบ ถาใครกําลังทําอยางที่กลาวมาอยู ขอใหหยุดทันทีเลย
  ็ 
เพราะสิ่งที่เราตองคํานึงถึงมากกวาความสวยของฟอนตก็คือความสะดวกสบายในการอานเนื้ อหาของ
User


ฟอนตบนเว็บไซตจะขอแยกออกเป็ น 4 สวนค ือ

1. Navigation (การนําทาง)
2. Title หรือ Headline (พาดหัว)
3. Subtitle (รองพาดหัว)
4. Body Text (เนื้ อหา)

เรามาดไู ปพรอมกันเลยดีกวาวาการเลือกใชฟอนตใหเหมาะสมกับเว็บไซตควรเลือกยังไงดี

สวนที่ 1 Navigation (การนําทาง)

1/6
 ู
 กดอานตอ, กดเลือกหมวดหม
ตําแหนงนี้ก็คือ เมนู หรือ ป ุมตางๆบนเว็บไซต เชน
ซึ่งขอความสวนมากจะเป็ นขอความสั้นๆไมยาวมาก แนะนําใหใชฟอนตแบบ Sans Serif
(ฟอนตไมมีหัว) จะสามารถทําให Navigation ตางๆบนเว็บดูทันสมัยและสะอาดตา

ื Headline (พาดหัว)
สวนที่ 2 Title หรอ

สวนมากข  อความ Title จะเป็ นขอความที่ไมยาวมากนักสามารถใชเวลา 2 – 4 วินาที
ก็สามารถอานเสรจ็ แตจะเป็ นตําแหนงที่มีความสําคัญมาก
เพราะจะเป็ นตําแหนงแรกที่ถูกอานกอนเสมอ แนะนําใหใชฟอนตแบบ Sans Serif (ฟอนตไมมีหัว)
เหมือนกับ Navigation แตขนาดฟอนตตองใหญกวาสวนอื่นๆเพื่อดึงดูดสายตาของผูอานใหได

ตัวอยางฟอนต Title ของเว็บ RAINMAKER

2/6
 ตัวอยางฟอนต Title ของเว็บ GRAPPIK

สวนที่ 3 Subtitle (รองพาดหัว)

รองลงมาจาก Title หรือ Headline ก็คือ Subtitle สองสวนนี้ก็จะไมแตกตางกัน
แตขอความของในสวนนี้จะมีมากกวา
อันนี้ก็จะอยูท่ก
ี ารออกแบบดวยวาใหมีขอความในสวนนี้มากนอยขนาดไหน
ฟอนตในสวนนี้สามารถใชไดท้ งั Sans Serif (ฟอนตไมมีหัว) และ Serif (ฟอนตมีหัว)

ในกรณีของเว็บ RAINMAKER จะใชฟอนต Sans Serif (ฟอนตไมม ี ั ว)

 ห
เพราะจํานวนขอความไมเ ยอะมาก

3/6
ถาเป็ นในสวนของ Grappik ขอความในสวนของ  ี านวนเยอะจึงเลือกใช Serif
Subtilte จะมจํ
(ฟอนตมห ี ั ว) เพื่อใหผูชมเว็บไซตอานขอความไดอยางสบายตา

4/6
สวนที่ 4 Body Text (เนื้อหา)
สวนนี้เลือกไมยาก เพราะเกือบทุกเว็บจะใชฟอนต Serif (ฟอนตมีหัว) เหมือนกันหมด
เพราะดวยจํานวนเนื้ อหาที่เยอะและตองใชเวลาในการอ
ู าน แถวตัวหนังสือในสวนนี้ก็จะไมใหญมาก
การเลือกใชฟอนต Serif (ฟอนตมีหัว) จะทําใหผชมเว็บไซตอานขอความไดอยางสบายตา

5/6
 
แตในสวนของ Body Text เราก็สามารถเพิ่มเติมฟอนตอ่ น 
ื ๆได เชน
ฟอนตในสวนที่ตองการเนนเป็ นพิเศษ หรือ จุดที่เป็ นขอความลูกเลนตางๆ

Body Text ของ The Matter ก็ใชฟอนตผสมกัน เพื่อไมใหฟอนตเนื้ อหาดูนาเบื่อจนเกินไป

สรุป
ฟอนตบนเว็บไซตควรจะมีไมเกิน 1 – 2 ฟอนต
เพื่อไมใหผูใชงานตองเปลี่ยนระยะสายตาสําหรับการอานอยูบอยๆ (สายตาคนเราไมเหมือนกัน
ฟอนตแตละชนิดก็อานยากงายไมเทากัน)
สวนไหนที่เป็ นสวนขอความไมเยอะก็สามารถใชฟอนตไดตามความชอบ
แตสวนไหนที่เนนขอมูลและขอความเยอะๆก็ควรใชฟอนต Serif (ฟอนตมีหัว) จะดีกวา

6/6