20
Jan

เลือก Fonts อย่างไร ให้สวยโดนใจในเว็บไซต์ของเรา

Category: Blog / 1,069 views

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

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

หลังจากที่ผมได้ศึกษาเพิ่มเติม ประกอบกับการทำงานจริงๆ ก็ทำให้ผมได้รู้ว่าการจะเอา Fonts มาใช้บนเว็บไซต์ของเรานั้นมันมีเทคนิคอยู่บ้างครับ และผมก็อยากจะมาแบ่งปันแด่พี่น้องทุกคน

ก่อนอื่นนั้น ผมอยากจะแนะนำเรื่อง Fonts ก่อนครับ ว่าหลักๆแล้วมีกี่ประเภท จะได้รู้จักกัน

Serif ฟอนต์มีหัว ตัวมีขา

ฟอนต์ประเภทแรกที่ผมจะพูดถึงก็คือฟอนต์ประเภทมีเชิง(ภาษาอังกฤษ) หรือมีหัว (ภาษาไทย) สำหรับในภาษาอังกฤษ Fonts เหล่านี้ถ้าเอามาใช้ในการเขียนบทความยาวๆ หลายๆคนบอกว่า จะทำให้อ่านบนเว็บยากหน่อยครับ เหมือนต้องตั้งใจอ่านมากๆ แต่สำหรับภาษาไทย ฟอนต์ที่มีหัว จะอ่านง่ายกว่าฟอนต์ที่ไม่มีหัวครับ (ฟอนต์มีหัวก็คือฟอนต์ที่มีตัวกลมๆ ครบสูตรเหมือนแบบเรียนนั่นแหล่ะครับ  ฟอนต์ที่ไม่มีหัวก็อย่างเช่นฟอนต์ Supermarket หรือฟอนต์ ที่มีแต่เส้นๆ)

เทคนิคการเลือกใช้ฟอนต์นี้

ฟอนต์ Serif เหมาะสำหรับงานออกแบบที่ต้องการสื่อถึงความรู้สึกอบอุ่น เป็นส่วนตัว แลดูมีประวัติศาสตร์ เอาจริงๆ ผมใช้คำพูดภาษาไทยไม่ค่อยถูก เอาภาษาอังกฤษไปละกันเนาะ ฮ่าๆ คือเหมาะกับเว็บที่ต้องการสื่อแนวๆนี้ครับ

warm, personal, artistic, stately, traditional, conservative or intellectual.

เทคนิคที่ผมใช้ ส่วนมากผมจะใช้ Serif สำหรับข้อความสั้นๆ เช่น “หัวข้อ” หรือ “ย่อหน้าสั้นๆ” ครับ

ภาพด้านล่างคือตัวอย่างฟอนต์มีเชิง (ขีดเล็กๆที่ด้านล่างของตัวอักษร ในภาษาอังกฤษเรียกว่า serf ครับ)

serif fonts

Serif Fonts

Sans-serif ตัวอักษรไม่มีเชิง ไม่มีหัว

ต่อมาก็จะเป็นฟอนต์ที่ไม่มีหัว ไม่มีเชิง ครับ ฟอนต์พวกนี้จะเป็นฟอนต์ง่ายๆ ดูโมเดิร์นๆ (คำว่า sans เป็นภาษาฝรั่งเศส แปลว่า “ปราศจาก”) ฟอนต์พวกนี้ บนเว็บก็จะอ่านง่ายมากขึ้นครับ หลายๆเว็บไซต์ที่เป็นภาษาอังกฤษก็นิยมใช้ฟอนต์นี้สำหรับเขียนเนื้อหายาวๆ

เทคนิคในการเลือกใช้ฟอนต์ Sans-serif

ถ้าเราต้องการเว็บที่ดูทันสมัย ไม่วุ่นวาย ดูมีลูกเล่น แนววัยรุ่น เรียบง่าย การใช้ฟอนต์ตระกูลนี้ก็เป็นทางเลือกที่น่าสนใจครับ

เทคนิคที่ผมใช้ ผมจะใช้ฟอนต์ตระกูลนี้กับข้อความสำหรับบทความยาวๆ ครับ

Sans-serif Fonts

Sans-serif Fonts

นอกจากนี้มันจะมีฟอนต์อีกประเภทที่เรียกว่า Cursive ครับ ฟอนต์นี้จะเป็นฟอนต์มีลูกเล่น เช่นคล้ายตัวเขียน อะไรทำนองนี้เป็นต้น

ทีนี้ครับ ด้วยความที่ฟอนต์ก็มีให้เลือกเยอะมาก ผมเองก็ใช้ฟอนต์จาก Google Fonts มาใช้งานบนเว็บ พอมันเยอะมากๆเข้าก็ตาลาย จนได้มารู้จักเว็บหนึ่งที่มีการจับคู่ฟอนต์มาเป็นตัวอย่างให้เราดูครับ ผมว่ามีประโยชน์มากเลย ช่วยประหยัดเวลาไปได้เยอะ เว็บที่ว่าคือเว็บ fontpair.co ครับ

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


Phraisohn Siripool is a Graphic Designer and Website Developer. Contact Buksohn for Your Business Endeavours