คู่มือการจับคู่แบบอักษรสำหรับนักออกแบบเว็บไซต์ + 30 ตัวอย่างที่น่าทึ่ง!

เผยแพร่แล้ว: 2021-01-27

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

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

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

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

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

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

วิธีจับคู่แบบอักษร

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

1. สร้างความรู้สึกที่ต้องการ

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

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

2. กำหนดบทบาท

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

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

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

3. ความสามารถในการอ่าน & ความชัดเจน

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

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

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

4. อย่ากลัวความคลาสสิก

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

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

กฎการจับคู่แบบอักษร

ต่อไปนี้คือกฎง่ายๆ แต่สำคัญบางประการที่ควรทำเมื่อจับคู่แบบอักษร:

กฎ #1: อย่าใช้แบบอักษรมากกว่าสามแบบบนเว็บไซต์ของคุณ

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

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

กฎ #2: ความเปรียบต่างดี ความขัดแย้งเป็นสิ่งไม่ดี

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

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

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

กฎข้อที่ 3: การจับคู่ภายใน Super-Families เป็นเรื่องปกติ

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

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

กฎ #4: ตรวจสอบให้แน่ใจว่าฟอนต์ของคุณมีขนาดและรูปทรงที่เหมาะสม

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

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