คู่มือการจับคู่แบบอักษร: การเลือกชุดแบบอักษรที่ดีที่สุดสำหรับเว็บไซต์ของคุณ

เผยแพร่แล้ว: 2020-11-02

ในฐานะนักออกแบบเว็บไซต์ คุณมีการตัดสินใจที่สำคัญมากมายสำหรับเว็บไซต์แต่ละแห่งที่คุณสร้าง จานสี การโต้ตอบ UI เค้าโครงการนำทาง การเลือกแบบอักษรที่ดีที่สุดสำหรับเว็บไซต์ของคุณ และอื่นๆ อีกมากมาย

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

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

สารบัญ

  • ทำไมคุณถึงต้องการการจับคู่แบบอักษร
  • สิ่งที่ต้องพิจารณาเมื่อจับคู่แบบอักษร​
  • กฎ 4 ข้อสำหรับการจับคู่ฟอนต์ในการออกแบบเว็บ
  • กฎ #1: ใช้แบบอักษรไม่เกินสามแบบบนไซต์ของคุณ​
  • กฎข้อที่ 2: ความสามัคคีและความคมชัดเป็นสิ่งที่ดี ความขัดแย้งไม่ดี
  • กฎ #3: อย่ากลัวการจับคู่ภายในแบบอักษร Superfamilies
  • กฎข้อที่ 4: ตรวจสอบให้แน่ใจว่าแบบอักษรของคุณมีขนาดและรูปร่างที่เหมาะสม
  • การผสมผสานแบบอักษรที่ดีที่สุด 30 แบบสำหรับการออกแบบเว็บ

ทำไมคุณต้องจับคู่แบบอักษร

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

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

ฉันแน่ใจว่าคุณเคยเจอสถานการณ์เช่นนี้ในการเดินทางของคุณบนเว็บ:

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

การจับคู่แบบอักษรอาจผิดพลาดได้มากเกินไป หากคุณไม่ใช้เวลาทำความเข้าใจว่าแบบอักษรเข้ากันได้อย่างไร

เรียนรู้วิธีเพิ่มแบบอักษรที่กำหนดเองใน WordPress

สิ่งที่ต้องพิจารณาเมื่อจับคู่แบบอักษร

ในคำแนะนำเกี่ยวกับฟอนต์ที่ดีที่สุดสำหรับเว็บไซต์ เราได้สรุปลักษณะสำคัญที่ควรมองหา:

1. ความชัดเจน

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

หากคุณกำลังออกแบบหน้าเว็บที่มีคำมากกว่า 600 คำ ไม่ควรใช้ serif ในเนื้อหาด้วยเหตุผลนี้

ที่กล่าวว่า หากคุณพบซานเซอริฟที่มีรูปแบบตัวอักษรชัดเจน (แม้จะไม่มีเซอริฟ) ก็อย่ากลัวที่จะทดลอง เรามีตัวอย่างวิธีใช้ sans serif ทั้งในตำแหน่งเนื้อหาและส่วนหัวด้านล่าง

2. ความสามารถในการอ่าน

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

เนื่องจากความละเอียดของหน้าจอได้รับการปรับปรุงขึ้นอย่างมากในช่วงหลายปีที่ผ่านมา นักพิมพ์ตัวอักษรจึงสามารถสร้างแบบอักษรทั้งสองแบบที่อ่านได้เท่าเทียมกัน ตามที่ NNG อธิบายว่า:

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

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

สิ่งที่คุณควรจะตระหนักมากขึ้นก็คือขนาดและระยะห่างของอักขระของคุณแทน เนื่องจากจะส่งผลต่อความอ่านง่ายและความชัดเจน

3. ความสะดวกสบาย

มีนักออกแบบเว็บไซต์บางคนที่ไม่เต็มใจที่จะใช้แบบอักษรเช่น Helvetica หรือ Times New Roman เนื่องจากมีการใช้งานมากเกินไป อย่างไรก็ตาม การเลือกแบบอักษรและการจับคู่ไม่ได้เกี่ยวกับความรู้สึกของคุณเกี่ยวกับรูปแบบตัวอักษรของเว็บไซต์ของคุณ แต่เกี่ยวกับความสบายใจของผู้เข้าชมในการอ่าน

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

4. สไตล์

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

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

อย่ามองข้ามกฎเหล่านี้เมื่อคุณก้าวไปสู่ขั้นต่อไปของการออกแบบด้วยตัวอักษร: