วิวัฒนาการของการพิมพ์ด้วยแบบอักษรที่หลากหลาย: การแนะนำ

บางหนาและทุกสิ่งในระหว่าง: FF Meta Variable จาก Monotype

คำพูดมีพลังและการพิมพ์เป็นเสียงของพวกเขา

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

จากหลาย ๆ คนหนึ่ง (กระบวนทัศน์: เปลี่ยนแล้ว)

ตัวแปรแบบอักษรเป็นแบบอักษรเดียวที่ทำหน้าที่เป็นจำนวนมาก
- จอห์นฮัดสัน

การถือกำเนิดของ Variable Fonts นั้นเปลี่ยนแปลงตลอดเวลา ตามที่อธิบายไว้โดย John Hudson แบบอักษรแบบผันแปรเป็นแบบอักษรเดียวที่ทำหน้าที่เป็นหลายอย่าง: ความกว้างและน้ำหนักแบบเอียงและตัวเอียงทั้งหมดสามารถรวมอยู่ในไฟล์แบบอักษรเดียวที่มีประสิทธิภาพสูงและบีบอัดได้ มีอะไรเพิ่มเติม: รูปแบบ (ซึ่งเป็นส่วนหนึ่งของข้อมูลจำเพาะทางเทคนิคของ OpenType 1.8) สามารถขยายได้อย่างสมบูรณ์ ตัวออกแบบชนิดมีการควบคุมแกนที่ใช้ช่วงและแม้แต่ความหมายของแกนใหม่อย่างสมบูรณ์ ขณะนี้มี 5 "แกน" ที่ลงทะเบียน (ความกว้างน้ำหนักเอียงตัวเอียงและการปรับขนาดด้วยแสง) แต่ผู้ออกแบบสามารถเปลี่ยนแปลงแกนที่พวกเขาเลือกได้ ตัวอย่างบางตัวอย่างรวมถึงความสูงของตัวขึ้นและลง, เกรดตัวอักษร, แม้แต่รูปร่างแบบ serif ความเป็นไปได้เกือบไร้ขีด จำกัด ด้วยการลบอุปสรรคด้านประสิทธิภาพเราเปิดประตูสำหรับการออกแบบที่น่าสนใจและมีชีวิตชีวามากขึ้นและความสามารถที่เหนือกว่าในการถ่ายทอดเสียงที่แท้จริงของแบรนด์ ทั้งหมดนี้ในขณะที่ยังคงความเที่ยงตรงของแบบอักษรไว้: เฉพาะแกนที่ถูกเปิดเผยโดยผู้ออกแบบประเภทเท่านั้นที่สามารถเปลี่ยนแปลงได้ ไม่ผิดเพี้ยนของเทียม

ออกแบบเว็บสร้างใหม่

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

เครื่องหมายจาก 100 ถึง 900 น้ำหนัก

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

แต่ในขณะที่เสรีภาพเหล่านี้ช่วยให้เราแสดงออกได้มากขึ้นความสามารถที่น่าสนใจบางอย่างจะช่วยเปลี่ยนแปลงประสบการณ์การอ่านเอง หน้านี้ (หน้าตัวอย่างจริง ๆ ) ได้รับการตั้งค่าด้วยตัวอักษรตัวแปรใหม่ของ FF Meta การออกแบบคลาสสิก sans-serif โดย Erik Spiekermann เปิดตัวครั้งแรกในปี 1991 แม้จะมีแกนการเปลี่ยนแปลง (น้ำหนัก) เพียงหนึ่งแกนของทั้งคู่ ตัวแปรแบบโรมันและตัวเอียงเสียงที่ยอดเยี่ยมสามารถทำได้ด้วยประสิทธิภาพที่เพิ่มขึ้นอย่างมาก: 18 ไฟล์และมากกว่า 288k แทนที่ด้วยไฟล์เดียวที่มีเพียง 84k

นวัตกรรมการอ่านบนหน้าจอ

[Meta] ต้องทำมากกว่าดูดี: มันต้องทำงานหนัก
- Erik Spiekermann

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

พร้อมสำหรับการถ่ายภาพระยะใกล้

ภาพตัดของ Garamond ในศตวรรษที่ 18 ตัดเป็นขนาดออปติคอล ภาพแรกมีขนาด 6pt ภาพที่สองอยู่ที่ 72 หมายเหตุความแตกต่างของความเปรียบต่างจังหวะ มันมีขนาดที่ใหญ่ขึ้น

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

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

โปแลนด์และชั่ง

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

เราอาจยังอยู่ในช่วงเริ่มต้นของยุคใหม่นี้ แต่ในอนาคตมันจะสดใสอย่างแน่นอน

ตั้งแต่เดือนพฤษภาคมปี 2018 เว็บเบราว์เซอร์หลัก 3 ใน 4 ตัวรองรับแบบอักษรที่หลากหลายแล้วนอกเหนือจากแพลตฟอร์มมือถือที่โดดเด่นทั้งสอง (ตรวจสอบการสนับสนุนบน caniuse.com) เมื่อคำนึงถึงสิ่งนี้เราพร้อมที่จะเริ่มให้บริการเว็บในวันนี้

นี่คือหน้าเต็มของ CodePen ดูสิ่งทั้งหมดเข้าด้วยกันแล้วดูที่ CSS ที่ขับเคลื่อนมัน ซึ่งรวมถึงระบบการพิมพ์ที่ปรับขนาดที่ฉันสร้างขึ้นตามความคิดบางอย่างที่ฉันได้เรียนรู้จาก Jen Simmons และ Tim Brown, การใช้หน่วยวิวพอร์ต, คุณสมบัติกำหนดเอง CSS (ตัวแปร aka) และการคำนวณจำนวนมาก คุณสามารถดูได้โดยตรงบน CodePen หรือตรวจสอบฝังด้านล่าง

ความคิดบางอย่างเกี่ยวกับแบบอักษรและโครงการ

ฉันเป็นแฟนของผลงานของ Erik Spiekermann เสมอและฉันคิดว่าเหตุการณ์และประวัติของ Meta, Officina และ Fira นั้นน่าสนใจมากและเป็นส่วนหนึ่งของการออกแบบดิจิทัลสำหรับฉันในช่วง 25 ปีที่ผ่านมา โอกาสที่จะพิมพ์ด้วยประวัติศาสตร์และผลกระทบในโลกการออกแบบและทำงานร่วมกับมันในบริบทของเทคโนโลยีใหม่เอี่ยมน่าตื่นเต้นจริงๆ ฉันชื่นชมโดยเฉพาะอย่างยิ่งความสามารถในการทำงานกับทั้งน้ำหนักและตัวเอียงเป็นส่วนหนึ่งของไฟล์เดียวกัน: มันแสดงให้เห็นถึงค่าของรูปแบบตัวอักษรตัวแปรที่ดีจริงๆ

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

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

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

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

[Monotype เมื่อเร็ว ๆ นี้ให้ฉันเขียนและออกแบบหน้าตัวอย่างเพื่อนำเสนอฟอนต์ตัวแปรใหม่ของ FF Meta ของ Erik Spiekermann นี่คือข้อความของหน้านั้นและภาพบางส่วน หน้าสดเต็มรูปแบบเป็นเจ้าภาพใน CodePen และฝังอยู่ด้านบน เปิดให้ทุกคนสามารถคัดลอกและเล่นด้วยตัวเองได้ คุณสามารถดูคำแนะนำเกี่ยวกับเทคโนโลยีได้เช่นกัน]

เนื้อหาต้นฉบับโพสต์ในบล็อกของฉัน