การเลือกแบบอักษรที่เหมาะสมสำหรับเว็บไซต์ของเรา 2023-2024

การเลือกแบบอักษรที่เหมาะสมสำหรับเว็บไซต์ของเรา 2023-2024

สำหรับการออกแบบ fonts (แบบอักษร) นั้นอาจไม่ใช่สิ่งที่โดดเด่นบนไซต์ที่สวยงามมากเท่าไหร่นัก และอาจไม่ใช่สิ่งที่ยึดองค์ประกอบการออกแบบ UI ทั้งหมดไว้ด้วยกัน

 

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

 

อีกทั้งการเลือกแบบอักษร ก็จำเป็นต้องควรพิจารณาหลายสิ่ง เช่น บุคลิกของแบรนด์, ผลิตภัณฑ์, บริการที่นำเสนอ และผู้ชม เป็นต้น 

 

ดังนั้นเราไปดูการเลือกแบบอักษรที่สมบูรณ์แบบ สำหรับเว็บไซต์ของเรากันเลยยยยย.

 

อะไรคือความแตกต่างระหว่าง font และ typeface

Fonts หมายถึงน้ำหนักความกว้าง และสไตล์ที่ประกอบเป็น typeface ในขณะที่ typeface เป็นตระกูลของ fonts ที่เกี่ยวข้อง ซึ่ง typefaces มี 3 ประเภทที่แตกต่างกัน

  1. serif
  2. sans-serif
  3. decorative

 

1.หาแรงบันดาลใจ (เช่นการเลือกดูตัวอย่างก่อนเยอะๆ)

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

 

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

 

2. สะท้อนบุคลิก โทนสี และการสร้างแบรนด์

ถึงแม้ว่า Fonts นั้นจะมีให้เลือกบนเว็บไซต์อย่างไม่จำกัด นั่นหมายความว่าเป็นไปได้ที่จะมีตัวพิมพ์ที่เป็นเอกลักษณ์สำหรับผลิตภัณฑ์ของเรา แต่สิ่งต่างๆ อาจซับซ้อนเกินไปได้โดยง่าย 

 

โดยเฉพาะอย่างยิ่ง หากเราไม่รู้ว่าจะเริ่มตรงไหน นั่นเป็นเหตุผลที่ควรพิจารณาอย่างรอบคอบถึงวัตถุประสงค์ของผลิตภัณฑ์ และผู้ชมของเราอย่างรอบคอบ เช่น

  1. เราต้องการให้ผู้ใช้รู้สึกอย่างไร เมื่อเข้าสู่เว็บไซต์ของเราเป็นครั้งแรก 
  2. เราต้องการจำลองบรรยากาศที่เป็นกันเองหรือไม่? 
  3. เราต้องการให้เว็บไซต์ให้ความรู้สึกหรูหรา เป็นกันเอง ขี้เล่น หรือจริงจัง 
  4. เว็บไซต์ของเราจะขับเคลื่อนด้วยภาพมากขึ้นหรือไม่ หรือขับเคลื่อนด้วยข้อความเป็นส่วนใหญ่ 

 

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

3. เน้นความเรียบง่าย

แน่นอนว่าการใช้แบบอักษรหลายแบบในการออกแบบเดียว อาจทำให้รู้สึกอึดอัดหรือยุ่งเหยิงได้ ดังนั้นเราขอแนะนำให้เริ่มต้นด้วยแบบอักษรจากตระกูลเดียวกัน (หรือที่เรียกว่าแบบอักษรเดียว) เนื่องจากฟอนต์จาก typeface เดียวกันถูกสร้างขึ้นเพื่อให้ทำงานรวมกันได้อย่างกลมกลืน 

 

ซึ่งการเลือกใช้ฟอนต์เดียวจะทำให้ Interface ของเราดูเหนียวแน่นมากยิ่งขึ้นนั่นเอง และอย่างไรก็ตาม แบบอักษรที่เราเลือกควรครอบคลุมช่วงที่เพียงพอเพื่อให้เราสามารถเลือก Primary font, Secondary font และ Tertiary (accent) font ได้

 

4. ประเมินความสามารถในการอ่าน

เมื่อเลือกฟอนต์โดยเฉพาะฟอนต์รอง ความสามารถในการอ่านควรมีความสำคัญเป็นอันดับหนึ่ง และฟอนต์บางตัวก็อ่านง่ายกว่าแบบอื่นๆ 

 

5. ตรวจสอบให้แน่ใจว่าตัวอักษรสามารถปรับขนาดได้

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

 

ดังนั้น การทำให้แบบอักษรของเรา สามารถปรับขนาดได้นั้นเป็นขั้นตอนที่สำคัญ เมื่อรวมการออกแบบตัวอักษรเข้ากับ interface ผู้ใช้ของเรา

 

อย่างไรก็ตาม เมื่อทดสอบความสามารถในการปรับขนาดของฟอนต์ใน interface อย่าลืมทดสอบด้วยข้อความจริงแทนตัวยึดตำแหน่ง Lorem Ipsum โดยวิธีนี้จะช่วยให้เราเข้าใจความเป็นจริงมากขึ้นว่า สามารถปรับขนาดได้ดีเพียงใด

 

6. คำนึงถึงเวลาในการโหลดแบบอักษร

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

 

ดังนั้น เมื่อดาวน์โหลดฟอนต์เว็บ อย่าดาวน์โหลดชุดอักขระ ภาษา หรือสไตล์มากเกินความจำเป็น ด้วยวิธีนี้เราจะหลีกเลี่ยงไม่ให้น้ำหนักเกินได้



 

 

 

---Wynnsoft Solution รับทำเว็บไซต์ รับทำ SEO รับทำการตลาดออนไลน์ รับทำโฆษณา Facebook รับทำเว็บไซต์ ขอนแก่น และรับทำเว็บไซต์ทั่วประเทศ

ข้อมูลจาก: careerfoundry.com