แจกของฟรี

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

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

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

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

warm, personal, artistic, stately, traditional, conservative or intellectual.เทคนิคที่ผมใช้ ส่วนมากผมจะใช้ Serif สำหรับข้อความสั้นๆ เช่น “หัวข้อ” หรือ “ย่อหน้าสั้นๆ” ครับ

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




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

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




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

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

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


ที่มา: https://www.buksohn.com/how-to-use-fonts-in-your-website.html