Responsive Web Design

เคล็ดลับในการปรับแต่งตัวอักษรเพื่อใช้ในงานออกแบบ

เรื่องที่เกี่ยวข้อง - Tips & Trick @en @en, Typography @en @en, Web Design @en

การใช้ตัวอักษรใน Web design เป็นเรื่องหนึงที่ผมหลงไหลมาตลอด วันนี้ก็ได้ไปเจอความรู้ดีๆ จาก Dan Mall จาก Superfriendly มา ซึ่งได้แนะนำเทคนิคในการออกแบบมาเล่าสู่กันฟัง ผมจึงสรุปเนื้อหา พร้อมยกตัวอย่างภาษาไทยประกอบมาด้วย มาดูกันดีกว่าว่ามีอะไรบ้าง

ปัญหาในการปรับแต่งตัวอักษร

เมื่อเราปรับแต่งตัวอักษรให้ผิดไปจากเดิม สิ่งหนึ่งที่มักจะเกิดขึ้นคือ ข้อความอ่านไม่ออก (ที่ฝรั่งจะเรียกกันว่า less readability) จะลองผิดลองถูกบ้างครั้งก็ออกมาดี บางครั้งก็ห่วย แต่ในเมื่อคนอื่นสามารถสร้าง logo หรือแบบข้อความที่สวย ดูดี และยังอ่านได้ง่าย มันต้องมีอะไรที่เรามองข้ามไปสิน่า งั้นผมว่าเรามาดูเคล็ดลับเล็กๆ น้อยๆ ที่สามารถเอาไปใช้งานได้กัน

1. การปรับแต่งส่วนล่างของตัวอักษร จะไม่มีผลต่อการอ่านข้อความ

ทีนี้ผมมีตัวอย่างของคุณ Dan กับของผมที่เป็นภาษาไทย มาให้ทดลองอ่านกัน ดูว่าแบบไหนอ่านง่ายกว่า

ตัวอย่าง Letter Readability ของคุณแดน

Letter-modification-readability-in-thai

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

การแก้ไขส่วนล่างของตัวอักษร แทนที่จะไปแก้ไขส่วนบน จะทำให้เราสามารถรักษา readability ไว้ได้ หรือข้อความยังอ่านรู้เรื่องอยู่นั่นเอง

2. รูปทรงของข้อความจะสังเกตได้ง่ายเสมอ

ทีนี้เราเริ่มรู้แล้วว่าตัวอักษรที่อยู่รวมกันเป็นข้อความ จะสร้างรูปทรงที่เราสามารถตีความได้ เรามาดูภาพตัวอย่างกันอีกอันหนึ่ง เพื่อให้แน่ใจถึงทฤษฎีนี้กัน

แบบแรกกับแบบที่สองจะสร้างรูปทรงที่แตกต่างกัน สมองเราจดจำและแยกแยะ “รูปทรง” ของตัวอักษรได้ชัดเจน (พวกตัวพิมพ์เล็ก) มากกว่าทรงเรียบแบบตัวพิมพ์ใหญ่ ลองทดสบกับภาพตัวอย่างของคุณ Dan ด้านล่างครับ

By Dan Mall

ดังนั้นเทคนิคข้อที่ 2 ที่เราต้องจำขึ้นใจไว้เลยว่า

การแก้ไข หรือปรับแต่งตัวอักษรในข้อความ ต้องไม่ทำให้ “รูปทรง” ของข้อความเดิมเปลี่ยนไปนั่นเอ

สรุป

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

หวังว่าคงได้เคล็ดลับดีๆ เอาไปลองออกแบบกันนะครับ แล้วเจอกับผมได้บน Google+, Facebook, หรือ Behance

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

  • เข้าใจง่าย ใช้ได้จริง ออกแบบการสอนอย่างเข้าใจโดยโค้ชพล
  • มีคอร์สสำหรับคนใช้งานทั่วไป จนถึงเรียนรู้เพื่อใช้งานในสายอาชีพขั้นสูง
  • ทุกคอร์สมีใบประกาศณียบัตรรับรองหลังเรียนจบ

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save