Smashing Podcast ตอนที่ 5 ด้วย Jason Pamental: ฟอนต์ตัวแปรคืออะไร?

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

แสดงหมายเหตุ

อัพเดทประจำสัปดาห์

• “ระบบภาพประกอบแบรนด์: การวาดภาพเอกลักษณ์ทางภาพที่แข็งแกร่ง” Yihui Liu
• “ดิ้นรนเพื่อรับมือไฟกระชากจราจร” Suzanne Scacca
• “การสร้างเค้าโครง CSS: สตรีมสดกับราเชล แอนดรูว์” ราเชล แอนดรูว์
• “บทสรุปการออกแบบและพัฒนาเว็บสำหรับปี 2019” Rachel Andrew
• “ไซต์ผลงานของคุณควรเป็น กปภ. หรือไม่” Suzanne Scacca

แบบอักษรตัวแปร

• ค้นหา Jason บนเว็บที่ rwt.io
• จดหมายข่าวเว็บวิชาการ
• “ฟอนต์ตัวแปร: สิ่งที่ผู้เขียนเว็บต้องการทราบ” Jason Pamental
• หนังสือของ Ellen Lupton เรื่อง “Thinking With Type”
• หนังสือของ Erik Spiekermann เรื่อง “Stop Stealing Sheep & Find Out How Type Works”

การถอดเสียง

Drew McLellan: เขาเป็นนักยุทธศาสตร์ด้านการออกแบบ ผู้นำ UX นักเทคโนโลยี ผู้เชี่ยวชาญด้านการพิมพ์เว็บ และได้รับเชิญผู้เชี่ยวชาญใน W3C Web Fonts Working Group เขาเขียน พูด และทำงานร่วมกับทีมและเจ้าของแบรนด์เพื่อกำหนดประเภทให้ดีขึ้นบนแพลตฟอร์มดิจิทัล เขาได้พูดคุยกับองค์กรต่างๆ เช่น Adobe, Audible, Conde Nast, GoDaddy, IBM และนำเสนอผลงาน เวิร์กช็อป และการประชุมทั่วโลก จดหมายข่าว Web Typography News ของเขาเป็นที่นิยมสำหรับผู้ที่ต้องการอัปเดตล่าสุดและเคล็ดลับเกี่ยวกับการพิมพ์บนเว็บ เห็นได้ชัดว่าเขาเป็นผู้เชี่ยวชาญด้านการพิมพ์เว็บ แต่คุณรู้หรือไม่ว่าเขาเป็นตัวแทนของสวีเดนที่ Lawn Croquet ในการแข่งขันกีฬาโอลิมปิกปี 1984? เพื่อนที่ยอดเยี่ยมของฉัน ยินดีต้อนรับ Jason Pamental สวัสดี เจสัน คุณเป็นอย่างไรบ้าง?

Jason Pamental: ฉันยอดเยี่ยมมาก โดยเฉพาะหลังจากอินโทรนั้น

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

เจสัน: ครับ ที่จริงแล้ว คุณไม่ได้เป็นคนเริ่มอะไรใน Twitter เมื่อสองสามวันก่อนใช่ไหม เหมือนกับวันที่ 9 พฤศจิกายน 2552 เป็นเวลา 10 ปีในสองวันนับตั้งแต่ Typekit เปิดตัว ฉันรู้ว่า Font Deck นั้นถูกต้องในช่วงเวลาเดียวกัน จากนั้น Google Fonts และ Monotype Service ไม่นานหลังจากนั้น ฉันได้รับคำเชิญช่วงเบต้าที่เพื่อนของฉันชื่อ John Cianci ซึ่งปัจจุบันยังเป็นเพื่อนร่วมงานของภรรยาฉันในหน่วยงานที่เธอทำงานที่ Typekit ในปี 2009 นั่นเป็นการคิดค้นขึ้นมาใหม่โดยสมบูรณ์ของความสนใจในเว็บของฉัน . ฉันหมายความว่า การปฏิวัติสำหรับฉันมันไม่ใช่เรื่องสั้น ฉันหมายถึง ฉันชอบตัวอักษรเสมอเมื่อเรียนมันที่โรงเรียน แต่เราไม่สามารถทำอะไรกับมันบนเว็บได้เป็นเวลา 15 ปีแล้ว มันน่าทึ่งมาก

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

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

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

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

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

Jason: ดังนั้น การจัดเก็บเฉพาะส่วนต่าง คุณไม่จำเป็นต้องเก็บโครงร่างทั้งหมด เป็นรูปแบบที่มีประสิทธิภาพมากขึ้น แม้ว่ามันจะไม่เล็กเท่าไฟล์ฟอนต์เดียว แต่ก็ยังเล็กกว่าไฟล์ฟอนต์ทั้งหมดที่แยกจากกันมาก หากคุณดูบางอย่างเช่น Plex Sans จาก IBM ไฟล์ที่แยกจากกันทั้งหมดอาจมีขนาดเกือบ 1 เมกะไบต์ โดยที่ไฟล์ฟอนต์แบบแปรผันสองไฟล์ที่มีความกว้างและน้ำหนักทั้งหมดในแนวตั้งในไฟล์หนึ่ง ตัวเอียงในอีกไฟล์หนึ่งมีค่าเท่ากับ 230K นั่นเป็นชุดอักขระที่สมบูรณ์จริงๆ คนส่วนใหญ่สามารถใช้เซตย่อยของสิ่งนั้นและทำให้มันเล็กลงได้อีก ฉันมักจะเห็นขนาดไฟล์เหล่านั้นประมาณ 50-100K สำหรับเว็บไซต์ภาษาตะวันตกทั่วไปที่ต้องการ นั้นไม่ต่างจากการโหลด… เมื่อคุณโหลดไฟล์ฟอนต์สามหรือสี่ไฟล์ คุณอาจจะโหลดข้อมูลมากกว่านั้น เป็นชัยชนะที่น่าสนใจสำหรับประสิทธิภาพ แต่ยังเปิดช่วงของแบบอักษรทั้งหมดให้เราใช้บนเว็บผ่าน CSS

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

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

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

เจสัน: ถูกต้อง สิ่งที่ฉันคิดว่าน่าตื่นเต้นจริงๆ สำหรับฉันในฐานะคนที่ศึกษาการออกแบบกราฟิกและศึกษาการออกแบบการพิมพ์อย่างใกล้ชิดมาหลายปี แนวคิดของตัวหนาควรเปลี่ยนตามขนาดของข้อความที่คุณกำลังแสดงผล ดังนั้นโดยค่าเริ่มต้น 400 และ 700 นั้นสำหรับปกติและตัวหนาเป็นค่าเริ่มต้นของเว็บ แต่ในความเป็นจริง เหตุผลเดียวที่คุณกล้าแสดงออกคือคุณต้องการเน้น คุณต้องการให้บางสิ่งบางอย่างโดดเด่น แต่ขนาดตัวอักษรที่หนักกว่านั้นมีขนาดเล็กมากเท่าไร ก็ยิ่งอ่านยากขึ้นเท่านั้น มันเติมเต็มในที่โล่งเล็กๆ แทนที่จะใช้ 700 สำหรับสำเนาเนื้อหาเมื่อตั้งค่าไว้ที่ขนาดประมาณ 16 พิกเซลหรืออะไรก็ตามที่เราใช้อยู่ คุณอาจใช้ 550, 575 ซึ่งคุณเน้นเพียงพอ แต่รูปแบบจดหมายยังเปิดกว้างอยู่ เมื่อมีขนาดใหญ่ขึ้น คุณอาจใช้น้ำหนักที่มากขึ้น

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

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

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

Drew: น่าจะเป็นอย่างนั้น ไม่ใช่แค่น้ำหนักที่สามารถเปลี่ยนแปลงได้ในฟอนต์แบบแปรผัน มีวิธีอื่นที่เราสามารถเปลี่ยนแบบอักษรตามที่แสดงได้หรือไม่?

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

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

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

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

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

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

ดรูว์: ฉันคิดว่าเทคโนโลยีเว็บที่ทันสมัยกว่าหลายๆ แบบที่คุณเห็นอยู่ หากมีฟอนต์แบบแปรผันที่ค่อยๆ หายไปชั่วขณะหนึ่ง และสุดท้ายมันก็จบลงและเราได้รับการสนับสนุนในเบราว์เซอร์ และคนชอบทำเสียงเกี่ยวกับมันและให้ทุกคนรู้ว่ามันอยู่ที่นั่น นักออกแบบหรือนักพัฒนามาตรฐานสามารถสัมผัสได้เกือบทุกอย่างซึ่งเพิ่งเริ่มทำงานในแต่ละวันและไม่ติดตามการดาวน์โหลดล่าสุดทั้งหมด ดูเหมือนว่ามันจะออกมาจากที่ไหนเลย แต่ฉันเดาว่ามันค่อนข้างจะกระฉับกระเฉง… ฉันหมายถึง คุณพูดถึงการใช้งานที่แตกต่างกันเล็กน้อยสองแบบที่เรากำลังเผชิญอยู่ มีมาตรฐานที่เก่ากว่าและใหม่กว่าสำหรับการนำไปใช้หรือไม่?

Jason: อันที่จริงมันไม่เก่าและใหม่กว่า ทั้งคู่ตั้งใจมาก ฉันจะกลับมาที่ในวินาทีนั้นเพราะมันคุ้มค่าที่จะเข้าใจว่าความแตกต่างคืออะไร แต่คุณพูดถูก รูปแบบนี้เปิดตัวเมื่อสามปีที่แล้วในเดือนกันยายนปี 2016 จริง ๆ แล้วเรามีการใช้งานการทำงานครั้งแรกใน Safari ทุกคืนในสามสัปดาห์ต่อมา มันค่อนข้างเร็วอย่างน่าทึ่งที่เรามีเบราว์เซอร์ที่ใช้งานได้ Safari เป็นคนแรกที่สนับสนุนอย่างเต็มที่ ฉันคิดว่ามันเป็นตอนที่ High Sierra ออกมา ไม่รู้สิ เหมือน Safari 12 หรืออะไรประมาณนั้น

Jason: แต่หลังจากนั้นไม่นาน เราก็ได้รับการสนับสนุนใน Firefox, Edge และ Chrome จริง ๆ แล้วเราได้รับการสนับสนุนเบราว์เซอร์มาเกือบสองปีแล้ว แต่มีแบบอักษรไม่มากนัก มีวิวัฒนาการอย่างต่อเนื่องแบบนี้ การสนับสนุนการใช้งานบนเว็บมีมายาวนานกว่าที่อื่น ฉันหมายถึง ในทางเทคนิค รูปแบบนี้ใช้ได้กับระบบปฏิบัติการเดสก์ท็อปเช่นกัน ดังนั้น หากคุณมีรูปแบบ TTF คุณสามารถติดตั้งมันในระบบปฏิบัติการเดสก์ท็อปของคุณบน Windows หรือ Mac และคุณสามารถใช้มันในแอปพลิเคชันใดก็ได้ คุณไม่สามารถเปลี่ยนแกนในแบบที่คุณอาจต้องการเล่นกับพวกมันอย่างไม่สิ้นสุด แต่มีแนวคิดของอินสแตนซ์ที่มีชื่อที่ฝังอยู่ในไฟล์ฟอนต์นั้นที่แมปกลับไปยังสิ่งที่เราคุ้นเคย

เจสัน: ตัวอย่างเช่น ใน Keynote ไม่มีการสนับสนุนอย่างชัดเจนสำหรับฟอนต์แบบแปรผัน แต่รูปแบบจะใช้ได้หากมีสิ่งต่างๆ เช่น Tech Sense อีกครั้ง แบบย่อและเบา คุณจะมีตัวปกติ ตัวปกติ ตัวหนาปกติ ตัวแคบ ฯลฯ ทั้งหมดนี้จะมีอยู่ในเมนูแบบเลื่อนลงเหมือนกับการติดตั้งทั้งครอบครัว ถ้าคุณอยู่ใน Illustrator หรือ Photoshop หรือตอนนี้ InDesign ที่เพิ่งจัดส่งไปเมื่อสัปดาห์ที่แล้ว หรือ Sketch ที่จัดส่งไปเมื่อสองสามสัปดาห์ก่อน ตอนนี้ทั้งหมดรองรับฟอนต์แบบแปรผันแล้ว เพื่อให้คุณสามารถเข้าถึงแกนต่างๆ ทั้งหมดและเล่นกับมันได้ เนื้อหาของหัวใจ แต่ในเบราว์เซอร์ นั่นคือสิ่งที่เราต้องทำงานด้วยอีกมาก ตามความเห็นของภรรยาคุณ ฉันเคยตีกลองนี้มาระยะหนึ่งแล้ว พยายามให้คนอื่นรับรู้เรื่องนี้มากขึ้น ต้องขอบคุณทีมงาน Firefox ในการสร้างเครื่องมือสำหรับนักพัฒนา ด้วย Jen Simmons ที่ผลักดันสิ่งนั้นไปพร้อมกัน เรามีเครื่องมือที่น่าทึ่งในการทำงานด้วยบนเบราว์เซอร์ที่ช่วยให้เราเข้าใจว่าฟอนต์นั้นมีความสามารถอะไร

Drew: คุณพูดถึงผู้ออกแบบประเภทและความสามารถของฟอนต์ มีฟอนต์ให้เลือกเยอะไหม?

Jason: มีคนจำนวนมากกำลังทำอยู่ตอนนี้ ที่ที่ดีที่สุดและครอบคลุมที่สุดในการค้นหาคือไซต์ของ Nick Sherman, v-fonts.com, v-fonts.com นั่นเป็นเพียงไซต์แคตตาล็อก มันกำลังเติบโตอย่างรวดเร็ว ยิ่งใหญ่จริงๆ มีฟอนต์ที่หลากหลายออกมาตลอดเวลาในขณะนี้ โอเพ่นซอร์สมีไม่มากนัก แต่ถ้าคุณค้นหาฟอนต์ตัวแปรบน GitHub คุณจะพบโปรเจ็กต์ทั้งหมดที่นั่น แต่ Google ได้เปิดตัวเบต้าของ API ใหม่ของพวกเขาด้วยฟอนต์ตัวแปรประมาณโหลที่มีอยู่ มาจากพวกเขามากขึ้น พวกเขาเพิ่งเปิดตัว Recursive ที่ recursive.design ซึ่งเป็นแบบอักษรใหม่ที่ยอดเยี่ยมจาก Stephen Nixon ตัวแปร Plex มีอยู่ตัวหนึ่งซึ่งเป็นโอเพ่นซอร์ส จากนั้นก็มีของเชิงพาณิชย์มากมาย

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

Drew: เราเห็นการอัปเดตแบบอักษรที่มีอยู่ให้เป็นแบบอักษรตัวแปรเพื่อให้ครอบครัวแทนที่ด้วยแบบอักษรตัวแปรเดียวหรือไม่ มันเกิดขึ้นเลยเหรอ?

เจสัน: นั่นสินะ ตัวที่ Monotype ออกมานั้นเป็นการอัพเดทฟอนต์แบบคลาสสิกบางตัวจริงๆ FF Meta เป็นโปรแกรมหนึ่งที่ฉันช่วยพวกเขาเปิดตัวโดยออกแบบตัวอย่างสำหรับปีที่แล้ว พวกเขามีสิ่งนั้น Univers, Frutiger, Avenir ฉันคิดว่านั่นเป็นสิ่งที่พวกเขาเปิดตัวแล้ว สี่ตัวนั้น เหล่านี้เป็นแบบอักษรของแบรนด์คลาสสิกที่สำคัญจริงๆ พวกเขากำลังดำเนินการเพิ่มเติม ฉันรู้ว่าพวกเขามีอย่างน้อยอีกครึ่งโหลหรือมากกว่านั้นที่อยู่ในขั้นตอนต่างๆ ของการผลิต ฉันรู้ว่า Dalton Maag ซึ่งใช้แบบอักษรที่กำหนดเองได้มากมายสำหรับองค์กรขนาดใหญ่มีแบบอักษรที่ปรับเปลี่ยนได้หลายแบบ ฉันได้ทำงานบางอย่างกับ TypeTogether พวกเขายังมีแบบอักษรที่ยอดเยี่ยมหลายแบบ ฉันรู้ว่าหนึ่ง...

Jason: ฉันได้แสดงที่งานประชุมบางงานที่ฉันพูดเกี่ยวกับสิ่งเหล่านี้ว่า Adidas มีของตัวเองเช่นกันที่พวกเขาใช้สำหรับงานแบรนด์ทั้งหมดของพวกเขาในการพิมพ์มาเกือบสองปีแล้ว ซึ่งเป็นเรื่องที่น่าทึ่งมากจริงๆ แต่ Mark Simonson ก็กำลังพัฒนา Proxima Nova เวอร์ชันที่ปรับเปลี่ยนได้ นั่นเป็นเรื่องใหญ่ นั่นเป็นหนึ่งในแบบอักษรเว็บที่ขายดีที่สุดตลอดกาล มันกำลังเกิดขึ้น. มันเกิดขึ้นเป็นชิ้นๆ ขึ้นๆ ลงๆ แต่แม้บางสิ่งที่ง่ายอย่างการสมัคร David Jonathan Ross, Font of the Month Club จะทำให้คุณมีฟอนต์แบบแปรผันได้เกือบทุกเดือน ฉันหมายความว่า เขาเหลือเชื่อจริงๆ กับสิ่งที่เขานำเสนอออกมา มันเหมือนกับ 72 ดอลลาร์สำหรับปีหรืออะไรทำนองนั้น เขาเอาของสวยๆงามๆมาอวดกันหมด

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

Jason: ใช่แน่นอน นั่นเป็นคำถามที่ฉันได้รับอย่างสม่ำเสมอ เมื่อเร็ว ๆ นี้ ฉันกำลังดูเว็บไซต์ถ่ายทอดสดกีฬาขนาดใหญ่ที่ทีมพัฒนาถามฉันเกี่ยวกับคำถามเดียวกันนั้น ฉันดูและแน่นอนว่าสำหรับแบบอักษรสองแบบที่พวกเขาใช้อยู่ มีแบบอักษรแบบแปรผันได้ การวิจัยสั้นๆ แสดงให้เห็นว่าเราสามารถแทนที่สี่อินสแตนซ์ของแบบอักษรหนึ่งและอีกสามตัวด้วยไฟล์แบบอักษรสองไฟล์ และใช้ขนาดไฟล์มากกว่า 70% ไปในห้าคำขอ ฉันหมายความว่ามันจะเป็นคำถามที่จะชนะจากมุมมองด้านประสิทธิภาพ สำหรับไซต์ขนาดใหญ่จริงๆ เมื่อคุณดูการลบการดาวน์โหลดข้อมูลเกือบ 300,000 ครั้งจากผู้ใช้หลายล้านคน ที่จริงแล้วจะช่วยประหยัดเงินได้จริงและต้นทุนแบนด์วิดท์ แม้จะมองจากจุดยืนที่ใช้งานได้จริงโดยไม่ต้องเขียน CSS ใหม่ แค่แทนที่ฟอนต์เหล่านั้น มันก็เป็นชัยชนะที่สำคัญสำหรับพวกเขาในด้านประสิทธิภาพ ในเวลาแสดงหน้าเว็บ และในต้นทุนแบนด์วิดท์จริงสำหรับพวกมัน

Drew: ในทางปฏิบัติ มันง่ายอย่างที่คิด แค่สลับอันหนึ่งเป็นอย่างอื่นหรือไม่?

เจสัน: เป็นไปได้ ฉันคิดว่าตัวอย่างที่สมบูรณ์แบบของสิ่งนั้นคือสิ่งที่ Google ปล่อยผ่าน ATypI ในเดือนกันยายนที่พวกเขาเริ่มทำอย่างนั้นกับ Oswald 150 ล้านครั้งต่อวัน พวกเขาสร้างฟอนต์เวอร์ชันต่างๆ ขึ้นมา และพวกเขาเพิ่งเริ่มท่องเว็บไซต์ที่ใช้อินสแตนซ์มากพอที่จะทำให้ได้รับประโยชน์อย่างมาก พวกเขาไม่ได้บอกใคร พวกเขาไม่ได้บอกเจ้าของเว็บไซต์ ไม่มีใครต้องทำอะไรสักอย่าง เนื่องจากมีการแมปที่ถูกต้องของแกนน้ำหนัก ดังนั้นค่าเริ่มต้นจึงใช้งานได้ 150 ล้านครั้งต่อวันเป็นการแสดงแบบอักษรจำนวนมาก นั่นเริ่มให้ข้อมูลเชิงลึกที่ดีขึ้นแก่พวกเขาว่าภูมิทัศน์นี้จะเป็นอย่างไรสำหรับพวกเขา หากพวกเขาสามารถเริ่มเปลี่ยนแบบอักษรเว็บห้าอันดับแรกที่พวกเขาให้บริการได้ ฉันคิดว่า Open Sans น่าจะเป็นหนึ่งในนั้น ฉันรู้ว่าลาโต้น่าจะอยู่ที่นั่น โรโบโต

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

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

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

Drew: เนื่องจากคุณได้เขียนเมื่อเร็วๆ นี้ โดยแสดงความรู้สึกว่าบางทีเว็บอาจหลงทางไปกับการออกแบบเทมเพลตบทความต่อเว็บไซต์ อาจมีรูปแบบเนื้อหาที่แตกต่างกันสองสามประเภท แต่ทุกคนต่างมุ่งไปที่สไตล์ medium.com ของข้อความคอลัมน์เดียวที่อ่านง่ายในสายตาของฉัน เรียงอย่างสวยงาม เป็นเรื่องเลวร้ายอย่างนั้นหรือ?

Jason: ฉันไม่คิดว่ามันแย่ ฉันแค่คิดว่ามันจะน่าเบื่อ ฉันหมายถึง พอมีเดียมออกมา มันค่อนข้างแปลกใหม่ ฉันหมายถึง ฉันคิดว่าคอลัมน์หนึ่งของ... อย่างที่คุณพูด มันเป็นสำเนาที่เรียงพิมพ์อย่างสวยงาม มีพื้นที่ที่ดี มันไม่แออัด มันไม่คับแคบและแถบด้านข้างและสิ่งอื่น ๆ ทั้งหมดนี้ จะมีคำถามเกี่ยวกับรูปแบบธุรกิจอยู่เสมอและสิ่งที่จะสนับสนุนสิ่งนั้น นั่นเป็นเหตุผลที่ว่าทำไมการออกแบบใหม่ที่สวยงามจริงๆ ฉันคิดว่ามันเป็น Seattle Times ที่ Mike Monteiro สำหรับ Mule Design ทำเมื่อไม่กี่ปีก่อน งดงามจนเปิดตัว จากนั้นพวกเขามีแบนเนอร์ขนาดใหญ่เหล่านี้ที่ด้านใดด้านหนึ่งของคอลัมน์และมันก็เอาช่องว่างทั้งหมดออกไป มันเป็นความอัปยศจริงๆ

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

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

Drew: การพิมพ์เป็นผู้กอบกู้ของเราเมื่อพูดถึงการเพิ่มบุคลิกภาพให้กับเว็บอีกเล็กน้อยหรือไม่?

Jason: อืม ฉันคิดว่ามันอาจจะเป็นได้ ฉันคิดว่าเรามีวิวัฒนาการมายาวนานบนเว็บเพื่อให้ใช้งานได้ดีขึ้น แต่ฉันคิดว่าผู้บาดเจ็บล้มตายรายหนึ่งมีเมื่อเรากังวลว่าคนที่เป็นประโยชน์ เป็นวิธีที่ใช้ได้หรือไม่? ที่มักจะเอาชนะบุคลิกภาพ เมื่อทุกเว็บไซต์เป็น... อีกครั้งที่เรามีแบบอักษรของเว็บเข้ามาพร้อม ๆ กันและนั่นสร้างระดับใหม่ของการแสดงออกที่เราไม่เคยมีมาก่อน ทันใดนั้น เราก็สามารถ... การแสดงผลดีขึ้น ดังนั้นเซอริฟจึงกลับเข้าสู่มิกซ์ เราสามารถใช้สิ่งเหล่านั้นอีกครั้งบนเว็บ สิ่งเหล่านี้เพิ่มชีวิต จากนั้นเราได้ปรับให้เหมาะกับทุกคนโดยใช้ San-serif หนึ่งหรือสองตัว มันคือ Open Sans หรือ Roboto หรือ Oswald หรืออะไรก็ตาม เราย้อนกลับไปที่สิ่งเดียวกันกับที่มีแบบอักษรที่ดีและอ่านง่ายมากมาย เราไม่ได้สอนนักออกแบบ UX รุ่นปัจจุบันนี้เลยจริงๆ ซึ่งมักจะเป็นคนขับรถเรื่องนี้เกี่ยวกับการออกแบบตัวอักษร อะไรก็ตามที่เกี่ยวกับการแสดงออกได้แค่ไหน มันสามารถเปลี่ยนแปลงอารมณ์และน้ำเสียงได้มากน้อยเพียงใด

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

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

เจสัน: แน่นอน ไม่ต้องดำดิ่งสู่การเมือง แต่ฉันคิดว่าทั้งหมด... หนึ่งในประเด็นสำคัญที่เราประสบอย่างแน่นอนในสหรัฐอเมริกา และฉันแน่ใจว่าไม่ต่างจากสิ่งที่เกิดขึ้นในสหราชอาณาจักรในช่วงสองสามปีที่ผ่านมา เมื่อข่าวทั้งหมดถูกใช้ผ่านแพลตฟอร์มเดียว และทุกอย่างดูเหมือนกัน ก็ไม่มีความแตกต่างของเสียง ดังนั้นประมาณ 75% ของผู้ใหญ่ในสหรัฐอเมริกาบอกว่าพวกเขาได้รับส่วนสำคัญของข่าวจาก Facebook ฉันหมายถึง มากันเสียทีว่าโดยทั่วไปแล้วน่ากลัวแค่ไหนกัน แต่เนื่องจากทุกอย่างถูกนำเสนออย่างเท่าเทียมกัน ไม่มีความแตกต่างระหว่างบทความจาก The Guardian กับ New York Times, The Wall Street Journal, The Washington Post และข่าวปีกขวาของ Joe มันถูกนำเสนอเหมือนกันทุกประการ

เจสัน: เมื่อเราเห็นโลโก้นั้น สไตล์แบบนั้น เดอะการ์เดียนก็มีเอกลักษณ์เฉพาะตัว The Wall Street Journal มีลักษณะเฉพาะ เราจำได้ทันทีเมื่อเห็น แม้แต่เพียงหัวข้อข่าว เรารู้ว่ามันมาจากไหน จากนั้นมีการเชื่อมโยงอัตโนมัติกับแบรนด์นั้นและความถูกต้อง เมื่อคุณดึงข้อมูลทั้งหมดออก คุณจะเหลือว่า “ตกลง ฉันจะประเมินสิ่งนี้ในพาดหัวข่าว ต่อไปใครเขียนพาดหัวได้ดีกว่ากัน? ที่ไม่มากที่จะไป เลยคิดว่าเราขาดทุนมหาศาล หากคุณดูว่า Apple News Plus พยายามทำอะไร มีบางบริษัทที่พยายามแนะนำสิ่งนั้นอีกครั้ง Blundell ทำผลงานได้น่าสนใจมากในยุโรป พวกเขาเปิดตัวในสหรัฐอเมริกา แต่ฉันไม่แน่ใจจริงๆ ว่าพวกเขาเคยประสบความสำเร็จขนาดนั้น That was a platform that would allow you to subscribe and see content from all these different top level newspapers and publications. It would always be in their own design. So that was really kind of an interesting approach there. It was always preserving the brand voice, that authenticity and that authority that would go along with that news. It really helped provide some cues for you as a reader to kind of evaluate what you're reading.

Jason: I think that's important. I think it's not something to be taken lightly.

Drew: Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone's content was being just distributed via RSS and appearing in a reader in identical format, identical layout. I think you do lose something of the personality and the voice.

Jason: Yeah. มันเป็นความจริง. I don't think that's an entirely solvable problem. I think if you can imagine an RSS reader with a different typeface for every headline, it would be crazy. There's a reason why that that doesn't work that well, but there has to be some middle ground. Type does play a role in that. Then certainly, once you get back to the website, there is that sort of instant recognizability that will help that experience stand apart from seeing it anywhere else.

Drew: So say I'm a designer. I'm working in a small agency. I'm turning out designs for all sorts of different clients. I look at my work. I think, “This is all good. This is readable, but it's got no personality in it.” Where do I start to actually put back some interest, some excitement, and not just lean on this sort of uniform UX driven layout that I've sort of conditioned myself to use?

Jason: Well, I think the thing to do is if you've never studied typography, you haven't necessarily kind of trained your eyes to see what the differences are in one typeface to another. Even when you have studied graphic design, you have to remind yourself of these things all the time. So I think oftentimes that I'll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, “Where do you start?” I made a list of books that I think are really helpful. So something like Ellen Lupton's book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann's book, Stop Stealing Sheep is a great one although I think at the moment, it's out of print. I think that he might be working on another edition but that's so… If you find that one, that's a good one as well.

Jason: Those will help introduce you to the terminology and understanding what the differences are between the different styles of text. Then once you have that basic introduction, it gives you a better frame of reference when you look at other websites. Getting a sense of like, why does this one feel warmer than that one? What are the combinations of type? What are the characteristics? As a web developer often does or web designer often does, you inspect an element, see what the typeface is that's being used there, and that can start to help build a palette of ones that you become familiar with. Very often, designers do hone in on a few that they get to know well and they tend to use them on a lot of different projects. That's not necessarily a bad thing. It's certainly better now if you're working with a variable font and you can be that much more varied.

Jason: So you can decide that on this website, this is what I want to call normal. This is the width that I want to use and the other aspects of it. So even using the same typeface across websites because you have access to the full range of characteristics, it could still look quite different.

Drew: So I think there's a lot of reading to be done. I'm sure we'll add some links to the show notes of all the excellent articles you've written up and some references to these books and what have you. Because I think there's so much to learn. I think we've always got to be learning with these things. The learning never ends.

Jason: It's true. It is true. That is something that I've enjoyed immensely when I started writing this newsletter. Every week when I'm writing it, I'm reading more of the specs. I'm reading more of what other people have discovered and written. There's tremendously knowledgeable folks out there. Rich Rutter, for instance, from Clearleft, wrote a fantastic book called Web Typography. He was one of the founders of Font Deck, which was one of the very first services to launch. He's always been kind of the most scholarly of authors about this stuff. I mean, he's really tremendously thoughtful in the way he puts those things together. But there's a bunch of people doing really interesting stuff. That has kind of forced me to kind of keep up with what other people are doing all the time, which is really fantastic.

Drew: Is there anything in particular that you've been learning lately?

Jason: The stuff that I've been learning the most is actually the corners of the specs. I think it's something that… I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she's always talking about like, “Well, if you actually read what's written here, there's actually really good stuff to know.” So in reading exactly what the specs are, there's a tremendous amount of great typographic control that is available to us. Then layering into that different things like mix blend modes and CSS and learning more about different size units and how they interact together and learning how to use and where you can use CSS custom properties. I keep reading little bits more and more and then kind of compare that to what the browsers are doing. It really has been a tremendous experience for me in what I've been learning every week. Even having been doing this stuff for 25 years, there's still like a new gem every time I dig into one of these things.

Drew: That's fantastic. ขอขอบคุณ. So if you dear listener would like to hear more from Jason or perhaps hire him to work with you on your web typographic challenges, you can follow him on Twitter where he's @jpamental, or find his website at rwt.io where you can also find the web typography newsletter to sign up to. So thanks for talking to us today, Jason. Do you have any parting words?

Jason: Yeah, experiment. I mean, there's lots of open source stuff to play with. I think once people get this in their hands and get familiar with it, that I think they'll start to see more and more how much fun they can have with this stuff and how much more expressive they can be. I think I was talking to the design director at The Wall Street Journal actually on Friday. I was then talking to their design team. We were talking about it's great that you have a design system that standardizes things, but it's then like any good design where you break that rule. That's where the exciting things really happen. So we've gotten this necessary evolution of like getting really good at the system. Now we've got to break it some. That's when we can get excited again. Break the rules. That's my best advice, I think.