วิธีจัดโครงสร้างลำดับชั้นการพิมพ์ที่มีประสิทธิภาพ

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

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

ลำดับชั้นการพิมพ์คืออะไร?

นักออกแบบเริ่มต้นบางครั้งดูถูกดูแคลนความจำเป็นในการใช้ลำดับชั้นของการพิมพ์ ลองดูตัวอย่างนี้:

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

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

มีหลายสิ่งที่ประกอบเป็นลำดับชั้นของการพิมพ์บนเว็บ ซึ่งรวมถึง:

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

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

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

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

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

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

วิธีสร้างลำดับชั้นการพิมพ์ (และจัดระเบียบการออกแบบของคุณด้วยสายตา)

นักออกแบบมีตัวเลือกมากมายในการสร้างลำดับชั้นการพิมพ์ แต่การรู้ว่าสิ่งใดที่นำไปสู่การสร้างลำดับชั้นเพียงอย่างเดียวไม่ได้ช่วยให้นักออกแบบสร้างลำดับชั้นที่มีประสิทธิภาพเสมอไป

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

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

ชนิด ขนาด

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

มาตราส่วนการพิมพ์แบบคลาสสิกจาก The Elements of Typographic Style เป็นที่คุ้นเคยสำหรับนักออกแบบส่วนใหญ่ เนื่องจากมักเป็นค่าเริ่มต้นที่โปรแกรมประมวลผลคำส่วนใหญ่มีให้เมื่อเลือกขนาดแบบอักษร มาตราส่วนคือ:

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60, และ 72.

มีตัวอย่างมาตราส่วนการพิมพ์เพิ่มเติมซึ่งเป็นไปตามสมการทางคณิตศาสตร์ต่างๆ สำหรับการคำนวณขนาดที่เพิ่มขึ้น

นักออกแบบมีแนวโน้มที่จะตั้งค่าเริ่มต้นเป็นขนาดข้อความเนื้อหา 12 จุด แต่การเพิ่มขึ้นเป็น 14 หรือ 16 (หรือสูงถึง 24) อาจทำให้อ่านง่ายขึ้นขึ้นอยู่กับแบบอักษรที่ใช้ ตัวอย่างเช่น เว็บไซต์ส่วนตัวของ Jeffrey Zeldman ใช้ขนาดตัวอักษร 24px สำหรับสำเนาเนื้อหา ในขณะที่ Vogue.com ใช้ขนาดข้อความเนื้อหา 19px

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

การเลือกรูปแบบการประสานงาน

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

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

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

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

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

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

ด้วยแนวทางเหล่านี้ นักออกแบบสามารถปฏิบัติตามกระบวนการสี่ขั้นตอนที่ Better Web Type ของตัวพิมพ์เว็บกำหนดไว้สำหรับการสร้างชุดค่าผสมที่มีประสิทธิภาพ:

1. ค้นหาแบบอักษรสมอสำหรับข้อความเนื้อหาหลักของคุณ
2. ค้นหาแบบอักษรรองสองสามแบบสำหรับชุดค่าผสมที่เป็นไปได้
3. ประเมินชุดค่าผสม
4. กำจัด/เลือกชุดแบบอักษร

ข้อควรพิจารณาเพิ่มเติม

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

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

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

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

บทสรุป

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

เมื่อพื้นฐานเหล่านั้นถูกกำหนดขึ้นในใจของนักออกแบบ (และการฝึกฝน) พวกเขาสามารถสร้างลำดับชั้นของภาพที่เป็นไปตามหรือทำลาย "กฎ" ตามความจำเป็น เพื่อสร้างการออกแบบที่ไม่เหมือนใครซึ่งเป็นแรงบันดาลใจและน่าพึงพอใจแก่ผู้ใช้

• • •

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

• การออกแบบเพื่อให้อ่านง่าย – คู่มือการพิมพ์เว็บ (พร้อมอินโฟกราฟิก)
• การทำความเข้าใจความแตกต่างของการจำแนกแบบอักษร
• Design Foundations – A Guide to Visual Hierarchy (พร้อมอินโฟกราฟิก)
• ลักษณะแบบอักษรสำหรับเว็บและการออกแบบสิ่งพิมพ์
• เพิ่ม UX ของคุณด้วยลำดับชั้นภาพที่ชัดเจน