โฮมเพจ » ออกแบบเว็บไซต์ » Typograph 101 Serif vs. Sans-Serif

    Typograph 101 Serif vs. Sans-Serif

    ในขั้นตอนของการเลือกแบบอักษรนักออกแบบมักถามตัวเอง, “ถึง Serif หรือ Sans-Serif”? การเลือกประเภทของแบบอักษร การใช้งานในการออกแบบมีความสำคัญอย่างยิ่งเนื่องจากมีผลกระทบอย่างมาก ความสามารถในการอ่าน, ประสบการณ์ผู้ใช้ และความสวยงามโดยรวมของการออกแบบ.

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

    ลองดูที่บทความต่อไปนี้ที่ เน้นความแตกต่างที่สำคัญระหว่างฟอนต์ serif และ sans-serif เพื่อความเข้าใจที่ดีขึ้นของทั้งสอง.

    serifs มาจากไหน?

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

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

    แล้ว sans-serif ล่ะ?

    ในทางตรงกันข้าม Sans-serif, แท้จริงหมายถึง "ปราศจาก serif". แบบอักษรใด ๆ ที่ไม่มีจังหวะห้อยต่องแต่งเหล่านี้ที่ส่วนท้ายของแต่ละมุมถือได้ว่าเป็นฟอนต์ sans-serif.

    เมื่อรู้อย่างนี้แล้ว, ทางเลือกของการไปกับ serifs หรือ sans-serif สามารถ ส่งผลกระทบต่อการออกแบบของคุณ? นี่คือบางสิ่งที่ควรพิจารณา:

    การอ่าน

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

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

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

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

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

    ความชัดเจน

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

    ในกรณีของภาพด้านบน, ตัวพิมพ์เล็ก L และ I สำหรับ sans serif ใน Arial ดูคล้ายกันมาก. ลองนึกภาพพิมพ์คำว่า “รัฐอิลลินอยส์”.

    ที่นี่เพื่อเน้นจุดของฉัน.

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

    Alex Poole เขียนบทความที่มีการอธิบายอย่างดีเมื่อเปรียบเทียบแบบอักษร serif และ sans-serif ในความพยายามที่จะค้นหาว่าแบบไหนที่อ่านง่ายกว่า.

    ตามที่เขาพูดมีห้าคุณสมบัติที่ควรทราบเมื่อมันมาถึงความชัดเจน:

    • Serif หรือ Sans-serif
    • ขนาดพอยต์
    • X-สูง
    • เคาน์เตอร์
    • ครองและสืบทอด

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

    อย่างไรก็ตามเขากล่าวว่า:

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

    การปรับขนาดและความละเอียด

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

    ในพื้นที่นี้มันปลอดภัยที่จะพูดว่า sans-serif ชนะการต่อสู้เนื่องจากมีความยืดหยุ่นมากกว่าในการปรับสเกล. แบบอักษร Sans-serif นั้นง่ายขึ้นมากที่จะให้ความสำคัญและอ่านง่ายในความละเอียดที่น้อยกว่า เนื่องจากพวกเขารอดจากการเลอะเทอะเนื่องจากขาดรายละเอียด.

    ภาพ: เวลา

    นี่คือสิ่งที่ดีที่สุด ตัวอย่างของการใช้ serif อย่างไม่ดี. ดูที่ย่อหน้าด้านล่างบนหน้าปกนิตยสารไทม์ด้านบนและคุณจะสังเกตได้ง่าย มันยากที่จะอ่านเพราะมันไม่ไหลง่าย โดยเฉพาะอย่างยิ่งกับขนาดที่เล็ก แต่ให้สังเกตว่าเอฟเฟกต์นั้นสมบูรณ์แบบเพียงใดเมื่อเปลี่ยนไปเป็น sans serif เพื่อ “Jonathan Franzen”.

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

    เพื่อ serif หรือ sans-serif?

    ดังนั้นคำตอบของคำถามคืออะไร?

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

    ในทางกลับกันถ้าคุณต้องการที่จะทำให้ ส่วนข้อความของเว็บไซต์ที่ตอบสนอง, จากนั้นเลือกแบบอักษร sans-serif อาจฉลาดเพราะคุณไม่ต้องการให้ข้อความของคุณเล็กเกินกว่าจะอ่านได้.

    ภาพ: GQ

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

    บางคำพูดสุดท้าย

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