บทช่วยสอนขนาดเล็ก – คู่มือการรวมแบบอักษร

“วิชาการพิมพ์เป็นสถาปัตยกรรมสองมิติ ขึ้นอยู่กับประสบการณ์และจินตนาการ และเป็นไปตามกฎเกณฑ์และความสามารถในการอ่าน” —Herman Zapf

เมื่อไม่กี่ปีมานี้ นักออกแบบถูกจำกัดการเลือกแบบอักษรบนเว็บอย่างเข้มงวด โดยทั่วไปแล้ว ตัวเลือกต่างๆ จะจำกัดอยู่ที่แบบอักษรของระบบ และหวังว่าผู้เยี่ยมชมไซต์จะติดตั้งแบบอักษรเหล่านั้นไว้

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

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

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

ในทางกลับกัน ประเภทที่ไม่ดีอาจทำให้เนื้อหาอ่านยากขึ้นและทำให้ผู้ที่อ่านไม่พึงพอใจ

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

ลักษณะประเภท

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

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

การจำแนกประเภท

การจัดประเภทแบบอักษรเป็นหนึ่งในแนวคิดพื้นฐานที่สุดที่ต้องทำความเข้าใจ มีสี่ประเภทหลักที่จะเรียนรู้: serif, sans serif, สคริปต์และการตกแต่ง

แบบอักษร Serif และ Sans Serif เหมาะสำหรับทั้งพาดหัวและเนื้อหา อย่างไรก็ตาม สคริปต์ (บางครั้งเรียกอีกอย่างว่าแบบอักษรลายมือ) และแบบอักษรตกแต่ง โดยทั่วไปยอมรับได้เฉพาะสำหรับพาดหัวและหัวเรื่อง หรือข้อความส่วนเล็กๆ อื่นๆ

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

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

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

น้ำหนัก

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

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

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

สไตล์

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

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

ตัดกัน

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

ความเปรียบต่างเมื่อรวมแบบอักษรเข้าด้วยกันหมายถึงลักษณะที่แบบอักษรแตกต่างกัน ซึ่งรวมถึงการจัดประเภท น้ำหนัก ลักษณะ และโครงสร้าง

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

อีกวิธีง่ายๆ ในการสร้างคอนทราสต์คือการรวมการจำแนกประเภทของฟอนต์ที่แตกต่างกัน เช่น sans serif และ serif หรือ script และ serif เป็นต้น ในกรณีเหล่านี้ ตรวจสอบให้แน่ใจว่า อารมณ์ ของฟอนต์ทั้งสองตรงกันเป็นสิ่งสำคัญ

ตัวอย่างเช่น การรวมฟอนต์ที่ดูสบายๆ เช่น Amatic SC เข้ากับฟอนต์ที่เป็นทางการอย่าง Baskerville จะขัดแย้งกันมากกว่าคอนทราสต์ แต่การรวมบางอย่างเช่น Amatic SC เข้ากับแบบอักษรทั่วไปเช่น Josefin Slab ก็ใช้งานได้ดี

X-ความสูง

X-height หมายถึงความสูงของอักขระแต่ละตัวภายในแบบอักษร โดยเฉพาะตัวพิมพ์เล็ก x แบบอักษรที่มีความสูง x ใกล้เคียงกันจะทำงานร่วมกันได้ดีกว่าแบบอักษรที่มีความสูง x ต่างกัน

โครงสร้าง

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

อารมณ์

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

ตัวอย่างเช่น Comic Sans เป็นแบบอักษรที่ไม่เป็นทางการซึ่งไม่เหมาะสำหรับใช้ในสถานการณ์ส่วนใหญ่ ในทางกลับกัน Bickham Script นั้นเป็นทางการมาก แต่ให้ความประทับใจที่ผิดสำหรับสิ่งต่าง ๆ เช่นการติดต่อทางธุรกิจ

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

การตกแต่ง สี และพื้นผิว

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

การรวมแบบอักษรที่มีประสิทธิภาพ

มีไซต์มากมายที่ดูเหมือนไม่มีที่สิ้นสุดด้วยตัวอักษรที่สวยงามพร้อมกับอุปทานที่ไม่มีที่สิ้นสุดเท่า ๆ กันสำหรับไซต์ที่มีประเภทไม่ดีหรือน่าเบื่อ การศึกษาไซต์ที่เหมาะสมเป็นวิธีที่ยอดเยี่ยมในการเรียนรู้วิธีรวมแบบอักษรเมื่อนักออกแบบเริ่มต้นหรือพยายามพัฒนาทักษะของพวกเขาไปอีกระดับ

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

Adjuvant Capital ใช้แบบอักษร serif ที่ทันสมัยและแปลกใหม่เล็กน้อย Orpheus Pro รวมกับแบบอักษร GT America sans serif ที่ทันสมัย สำหรับบริษัทให้บริการทางการเงิน นี่เป็นทางเลือกที่ทันสมัยมาก แต่ทำงานได้ดีกับภารกิจการลงทุนระดับโลกที่รับผิดชอบต่อสังคม

Bloomscape ใช้แบบอักษร serif แบบไม่เป็นทางการ Morion ร่วมกับ sans serif Raisonne เพื่อสร้างการออกแบบตัวอักษรที่ทันสมัยและโดดเด่น Morion ไม่จำเป็นต้องเป็นตัวเลือกที่ชัดเจนสำหรับประเภทร่างกายเนื่องจากมีรูปแบบตัวอักษรที่มีการตกแต่งมากกว่า แต่เมื่อใช้ในขนาดที่เหมาะสม (ตามที่เป็นอยู่) จะเหมาะอย่างยิ่งสำหรับส่วนเนื้อหาที่สั้นกว่า Raisonne มีรูปแบบตัวอักษรที่ตกแต่งคล้ายคลึงกัน ซึ่งทำให้แบบอักษรเว็บทั้งสองทำงานร่วมกันได้อย่างสวยงาม

Vogue ใช้แบบอักษร Savoy serif ที่ทันสมัยและสง่างาม จับคู่กับ Sans Serif Franklin Gothic ที่แปลกประหลาด ซึ่งได้รับการออกแบบครั้งแรกในปี 1902 การผสมผสานของทั้งสองทำให้เกิดการออกแบบที่หรูหราซึ่งดึงดูดผู้ชมที่มีวัฒนธรรมซึ่งเป้าหมายของนิตยสารเป็นเป้าหมาย

นิตยสารไลฟ์สไตล์ของภาคใต้ Garden & Gun มีรูปแบบตัวอักษรที่ซับซ้อนบนเว็บไซต์ของพวกเขามากกว่าแบบอื่นๆ ที่รวมไว้ที่นี่ ซึ่งทำให้แตกต่างออกไปจริงๆ ไซต์นี้ใช้แบบอักษรหลักสี่แบบ: ชื่อบทความหลักคือ serif Domaine Display; ข้อความเนื้อหาและพาดหัวข่าวบางส่วนในหน้าแรกเป็นฟอนต์ serif Domaine Text ข้อมูลเมตา การนำทาง และส่วนหัวของส่วนใช้ sans serif Avenir Next; และส่วนหัวของส่วนเพิ่มเติมในหน้าแรกอยู่ใน Domaine Sans Display

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

แบบอักษรที่คุณเลือกมีความสำคัญพอๆ กับสิ่งที่คุณทำกับแบบอักษรนั้น

— บอนนี่ ซีเกลอร์

บทสรุป

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

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

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

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