หน้านี้ได้รับการแปลโดย Cloud Translation API

ข้อมูลเบื้องต้นเกี่ยวกับแบบอักษรตัวแปรบนเว็บ

ข้อกำหนดใหม่ของแบบอักษรที่สามารถลดขนาดไฟล์แบบอักษรลงได้อย่างมาก

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

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

ความเข้ากันได้กับเบราว์เซอร์

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

เกริ่นนำ

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

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

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

ตัวอย่างองค์ประกอบและรายการสไตล์ต่างๆ ของครอบครัว Roboto — ซ้าย: ตัวอย่างชุดแบบอักษรของ Roboto ขวา: รูปแบบที่มีชื่อภายในกลุ่ม

ความท้าทายสำหรับนักออกแบบและนักพัฒนา

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

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

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

โครงสร้างของแบบอักษรที่เปลี่ยนแปลงได้

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

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

แบบอักษรของตัวแปร Roboto Flex มี 3 รูปแบบสำหรับแกนน้ำหนัก รูปแบบปกติจะอยู่ที่กึ่งกลาง ส่วนอีกด้านหนึ่งมี 2 สไตล์ที่ปลายแกนตรงกันข้าม สไตล์หนึ่งเบากว่า และอีกแบบหนักกว่า โดยเลือกได้จาก 900 อินสแตนซ์ดังต่อไปนี้

แสดงตัวอักษร "A" ในน้ำหนักที่ต่างกัน — ด้านบน: ภาพแสดงกายวิภาคของแกนน้ำหนักสำหรับ Roboto ที่มีแบบอักษร

นักพัฒนาซอฟต์แวร์แบบอักษรสามารถนำเสนอชุดแกนต่างๆ ได้ คุณสามารถรวมเข้าด้วยกันได้ เพราะทุกรูปแบบเริ่มต้นเหมือนกัน Roboto มี 3 รูปแบบในแกนความกว้าง ซึ่งรูปปกติอยู่กึ่งกลางของแกน และ 2 รูปแบบคือแบบแคบและกว้างที่ปลายแต่ละด้าน เพื่อแสดงความกว้างทั้งหมดของสไตล์ปกติ และรวมกับแกนน้ำหนักเพื่อให้ได้ความกว้างทั้งหมดสำหรับทุกน้ำหนัก

Roboto Flex ในชุดค่าผสมแบบสุ่มของความกว้างและน้ำหนัก

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

ตัวเอียง

วิธีจัดการตัวเอียงในแบบอักษรที่เปลี่ยนแปลงได้เป็นสิ่งที่น่าสนใจ เนื่องจากมีวิธีการที่แตกต่างกัน 2 วิธี แบบอักษร เช่น Helvetica หรือ Roboto มีการประมาณค่าในช่วงอัตราส่วนที่เข้ากันได้ ดังนั้นรูปแบบโรมันและตัวเอียงจึงสามารถแทรกเข้ามาระหว่างแกน Slant และสามารถใช้จากโรมันไปจนถึงตัวเอียงได้

แบบอักษรอื่นๆ (เช่น Garamond, Baskerville หรือ Bodoni) มีรูปแบบรูปอักขระแบบโรมันและตัวเอียงที่เข้ากันไม่ได้ ตัวอย่างเช่น โครงสร้างที่โดยทั่วไปจะกำหนดอักษรตัวพิมพ์เล็ก "n" ของโรมัน จะไม่ตรงกับรูปทรงที่ใช้กำหนดอักษรตัวพิมพ์เล็ก "n" ที่เป็นตัวเอียง แทนที่จะแทรกเส้นโครงร่างหนึ่งไปยังอีกเส้นหนึ่ง แกนตัวเอียงจะสลับจากเส้นโค้งโรมันเป็นตัวเอียง

ตัวอย่างแกนน้ำหนักสำหรับแบบอักษร Amstelvar — โครงสร้าง "n" ของ Amstelvar เป็นแบบตัวเอียง (12 จุด น้ำหนักปกติ ความกว้างปกติ) และในภาษาโรมัน รูปภาพจาก David Berlow นักออกแบบและนักพิมพ์ตัวอักษรที่ Font Bureau

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

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

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

คำจำกัดความของแกน

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

แม้ว่าแกนจะควบคุมฟีเจอร์เดียวกันได้ แต่แกนอาจใช้ค่าที่ต่างกัน ตัวอย่างเช่น ในแบบอักษรตัวแปร Oswald และ Hepta Slab จะมีให้แค่แกนเดียว คือน้ำหนัก แต่ช่วงต่างกันตรงนั้น Oswald มีช่วงเดียวกันกับช่วงก่อนที่จะอัปเกรดให้เป็นตัวแปรคือ 200 ถึง 700 แต่ Hepta Slab กลับมีเส้นผมหนาที่สุดอยู่ที่ 1 ซึ่งเติมถึง 900 ทั้งหมด

แกนที่ลงทะเบียน 5 แกนมีแท็กตัวพิมพ์เล็ก 4 อักขระที่ใช้ในการกำหนดค่าใน CSS ดังนี้

ชื่อแกนและค่า CSS
น้ำหนัก	`wght`
ความกว้าง	`wdth`
ไม่มั่นใจ	`slnt`
ขนาดออปติคัล	`opsz`
ตัวเอียง	`ital`

เนื่องจากนักพัฒนาซอฟต์แวร์แบบอักษรจะกําหนดแกนที่พร้อมใช้งานในแบบอักษรที่เปลี่ยนแปลงได้ และค่าที่มีได้ คุณจึงควรหาว่าแบบอักษรแต่ละแบบให้อะไรบ้าง คุณควรแนบเอกสารของแบบอักษรมาด้วย หรือจะตรวจสอบแบบอักษรโดยใช้เครื่องมืออย่าง Wakamai Fondue ก็ได้

กรณีการใช้งานและประโยชน์

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

สีหน้าตื่นเต้น

ตัวอย่างที่ดีอย่างหนึ่งของการแสดงออกด้านศิลปะคือการสำรวจภาพพิมพ์ของ Decovar โดย Mandy Michael

คุณดูตัวอย่างที่ใช้งานได้และซอร์สโค้ดของตัวอย่างข้างต้นได้ที่นี่

แอนิเมชัน

Typeface Zycon ออกแบบภาพเคลื่อนไหวของ David Berlow นักออกแบบและนักพิมพ์ตัวอักษรของ Font Bureau

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

ไอคอนไอคอนเป็นแบบอักษรไอคอนสีแบบเคลื่อนไหวชุดแรกของโลก โดยใช้ไอคอนดีไซน์ Material Anicons เป็นการทดลองที่ รวมเทคโนโลยีแบบอักษรที่ล้ำสมัย 2 อย่างเข้าด้วยกัน ได้แก่ แบบอักษรที่เปลี่ยนแปลงได้และแบบอักษรสี

ตัวอย่างบางส่วนของภาพเคลื่อนไหวที่แสดงเมื่อเลื่อนเมาส์ผ่านจากแบบอักษรไอคอนสีของ Anicon

Finesse

Amstelvar ใช้ XTRA เล็กๆ ในทิศทางตรงข้ามกัน เพื่อให้ความกว้างของคำเท่ากัน

Roboto Flex และ Amstelvar ขอเสนอชุด "แกนพาราเมตริก" ในแกนเหล่านี้ ตัวอักษรจะถูกแยกโครงสร้างออกเป็น 4 แง่มุมที่เป็นพื้นฐานของรูป ซึ่งได้แก่ รูปทรงสีดำหรือรูปทรงบวก รูปร่างสีขาวหรือลบ และขนาด x และ y คุณใช้ 4 ด้านนี้เพื่อปรับแกนอื่นๆ ได้ด้วยวิธีเดียวกับที่สีหลักสามารถผสมผสานกับสีอื่นๆ เพื่อปรับได้

แกน XTRA ใน Amstelvar จะให้คุณปรับค่า "สีขาว" ต่อค่า 1,000 ครั้งได้ดังที่แสดงด้านบน เมื่อใช้ XTRA เล็กๆ ในทิศทางตรงข้ามกัน ความกว้างของคำจะเท่ากัน

แบบอักษรที่เปลี่ยนแปลงได้ใน CSS

กำลังโหลดไฟล์แบบอักษรตัวแปร

แบบอักษรตัวแปรจะโหลดผ่านกลไก @font-face แบบเดียวกับแบบอักษรเว็บแบบคงที่ดั้งเดิม แต่มีการปรับปรุงใหม่ 2 รายการดังนี้

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

1. รูปแบบแหล่งที่มา: เราไม่ต้องการให้เบราว์เซอร์ดาวน์โหลดแบบอักษรหากเบราว์เซอร์ไม่รองรับแบบอักษรที่เปลี่ยนแปลงได้ เราจึงเพิ่มคำอธิบาย format และ tech โดยครั้งหนึ่งอยู่ในไวยากรณ์ในอนาคต (format('woff2') tech('variations')) หนึ่งในไวยากรณ์ที่เลิกใช้งานแต่รองรับในเบราว์เซอร์ต่างๆ (format('woff2-variations')) หากเบราว์เซอร์รองรับแบบอักษรที่เปลี่ยนแปลงได้และรองรับไวยากรณ์ที่กำลังจะเกิดขึ้น เบราว์เซอร์จะใช้การประกาศแรก หากรองรับแบบอักษรตัวแปรและไวยากรณ์ปัจจุบัน ระบบจะใช้การประกาศที่ 2 ทั้งคู่ชี้ไปยังไฟล์แบบอักษรเดียวกัน

2. ช่วงรูปแบบ: คุณจะเห็นว่าเราระบุ 2 ค่าสำหรับ font-weight และ font-stretch แทนที่จะบอกเบราว์เซอร์ว่าแบบอักษรนี้ให้น้ำหนักใด (เช่น font-weight: 500;) ตอนนี้เราจะให้ช่วงของน้ำหนักที่แบบอักษรรองรับ สำหรับ Roboto Flex แกนน้ำหนักจะอยู่ในช่วงตั้งแต่ 100 ถึง 1000 และ CSS จะแมปช่วงแกนกับพร็อพเพอร์ตี้รูปแบบ font-weight โดยตรง เมื่อระบุช่วงใน @font-face ค่าใดๆ นอกช่วงนี้จะถูก "ค่าสูงสุด" เป็นค่าที่ถูกต้องที่ใกล้เคียงที่สุด ช่วงแกนความกว้างจะแมปในลักษณะเดียวกับพร็อพเพอร์ตี้ font-stretch

หากคุณใช้ Google Fonts API ปัญหาทั้งหมดจะได้รับการแก้ไข CSS ไม่เพียงแต่จะมีรูปแบบและช่วงแหล่งที่มาที่เหมาะสมเท่านั้น Google Fonts จะส่งแบบอักษรสำรองแบบคงที่ในกรณีที่ระบบไม่รองรับแบบอักษรที่เปลี่ยนแปลงได้

การใช้น้ำหนักและความกว้าง

ปัจจุบันแกนที่คุณสามารถตั้งค่าได้อย่างน่าเชื่อถือจาก CSS คือแกน wght ถึง font-weight และแกน wdth ถึง font-stretch

ก่อนหน้านี้คุณจะตั้งค่า font-weight เป็นคีย์เวิร์ด (light, bold) หรือเป็นค่าตัวเลขระหว่าง 100 ถึง 900 ในขั้นตอนของ 100 เมื่อใช้แบบอักษรที่เปลี่ยนแปลงได้ คุณสามารถตั้งค่าใดก็ได้ในช่วงความกว้างของแบบอักษร

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

แกนน้ำหนักของ Roboto Flex กำลังเปลี่ยนจากต่ำสุดเป็นสูงสุด

ในทำนองเดียวกัน เราอาจตั้งค่า font-stretch ด้วยคีย์เวิร์ด (condensed, ultra-expanded) หรือเป็นค่าเปอร์เซ็นต์ ดังนี้

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

แกนความกว้างของ Roboto Flex กำลังเปลี่ยนจากต่ำสุดเป็นสูงสุด

การใช้ตัวเอียงและภาระหน้าที่

แกน ital ใช้สำหรับแบบอักษรที่มีทั้งรูปแบบปกติและตัวเอียง แกนนี้เป็นสวิตช์เปิด/ปิด โดยค่า 0 ปิดอยู่และจะแสดงรูปแบบปกติ ส่วนค่า 1 จะแสดงตัวเอียง ต่างจากแกนอื่นๆ ตรงที่ไม่มีการเปลี่ยนแปลง ค่า 0.5 จะไม่แทน "ตัวเอียงครึ่งหนึ่ง"

แกน slnt แตกต่างจากตัวเอียงตรงที่ไม่ใช่รูปแบบใหม่ แต่เป็นสไตล์เอียงแบบปกติเท่านั้น ค่าเริ่มต้นของคือ 0 ซึ่งหมายถึงรูปร่างตัวอักษรตั้งตรงเริ่มต้น Roboto Flex เอียงสูงสุดอยู่ที่ -10 องศา ซึ่งหมายความว่าตัวอักษรจะเอนไปทางขวาเมื่อเปลี่ยนจาก 0 ถึง -10

คุณสามารถตั้งค่าแกนเหล่านี้ผ่านพร็อพเพอร์ตี้ font-style ได้อย่างง่ายดาย แต่ในเดือนเมษายน 2020 คุณจะดำเนินการอย่างไรยังอยู่ระหว่างดำเนินการ ในตอนนี้ คุณควรจัดการสิ่งเหล่านี้เป็นแกนที่กำหนดเอง แล้วตั้งค่าผ่าน font-variation-settings

i, em, .italic {
    /* Should be font-style: italic; */
    font-variation-settings: 'ital' 1;
}

.slanted {
    /* Should be font-style: oblique 10deg; */
    font-variation-settings: 'slnt' 10;
}

แกนเอียงของ Roboto Flex มีการเปลี่ยนแปลงจากต่ำสุดเป็นสูงสุด

การใช้ขนาดออปติคัล

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

ตัวอักษร "a" แสดงในขนาดออปติคอลขนาดต่างๆ — ตัวอักษร "a" ใน Roboto Flex ที่ขนาดพิกเซลต่างๆ จากนั้นได้รับการปรับให้มีขนาดเท่ากันจะแสดงความแตกต่างในการออกแบบ ลองใช้ด้วยตัวเองใน Codepen

มีการเพิ่มพร็อพเพอร์ตี้ CSS ใหม่สำหรับแกนนี้: font-optical-sizing ค่าเริ่มต้นจะตั้งเป็น auto ซึ่งทำให้เบราว์เซอร์กำหนดค่าแกนตาม font-size ซึ่งหมายความว่าเบราว์เซอร์จะเลือกขนาดออปติคัลที่ดีที่สุดโดยอัตโนมัติ แต่หากต้องการปิดการตั้งค่านี้ ให้ตั้งค่า font-optical-sizing เป็น none

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

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

การใช้แกนที่กำหนดเอง

แกนที่กำหนดเองจะไม่แมปกับพร็อพเพอร์ตี้ CSS ที่มีอยู่ ซึ่งต่างจากแกนที่ลงทะเบียนไว้ คุณจึงต้องตั้งค่าผ่าน font-variation-settings เสมอ แท็กสำหรับแกนที่กำหนดเองจะเป็นตัวพิมพ์ใหญ่เสมอเพื่อแยกความแตกต่างจากแกนที่ลงทะเบียน

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

กำลังเปลี่ยนแกนคะแนนของ Roboto Flex จากต่ำสุดเป็นสูงสุด

เนื่องจาก GRAD เป็นแกนที่กำหนดเองที่มีช่วง -200 ถึง 150 ใน Roboto Flex เราจำเป็นต้องแก้ไขปัญหาด้วย font-variation-settings:

.grade-light {
    font-variation-settings: `GRAD` -200;
}

.grade-normal {
    font-variation-settings: `GRAD` 0;
}

.grade-heavy {
    font-variation-settings: `GRAD` 150;
}

แบบอักษรที่ปรับเปลี่ยนได้ใน Google Fonts

Google Fonts ได้ขยายแคตตาล็อกด้วยแบบอักษรที่เปลี่ยนแปลงได้ และเพิ่มแบบใหม่เป็นประจำ ปัจจุบันอินเทอร์เฟซนี้เน้นไปที่การเลือกอินสแตนซ์เดี่ยวจากแบบอักษร โดยให้เลือกรูปแบบที่ต้องการ คลิก "เลือกรูปแบบนี้" แล้วระบบจะเพิ่มอินเทอร์เฟซดังกล่าวลงในองค์ประกอบ <link> ที่ดึงข้อมูล CSS และแบบอักษรจาก Google Fonts

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

เครื่องมือลิงก์แบบอักษรตัวแปรของ Google ยังให้ URL ล่าสุดสำหรับแบบอักษรตัวแปรแบบเต็มได้ด้วย

การสืบทอดการตั้งค่ารูปแบบแบบอักษร

แม้ว่าในเร็วๆ นี้ระบบจะรองรับแกนที่ลงทะเบียนทั้งหมดผ่านพร็อพเพอร์ตี้ CSS ที่มีอยู่ แต่สำหรับตอนนี้คุณอาจต้องใช้ font-variation-settings เป็นตัวเลือกสำรอง และหากแบบอักษรมีแกนที่กำหนดเอง คุณจะต้องใช้ font-variation-settings ด้วย

อย่างไรก็ตาม นี่คือ Gocha เล็กๆ น้อยๆ จาก font-variation-settings พร็อพเพอร์ตี้ทุกรายการที่คุณไม่ได้ตั้งค่าอย่างชัดแจ้งจะรีเซ็ตเป็นค่าเริ่มต้นโดยอัตโนมัติ และจะไม่รับค่าที่กำหนดไว้ก่อนหน้านี้ ซึ่งหมายความว่ารายการต่อไปนี้ไม่ทำงาน ตามที่คาดไว้

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

ก่อนอื่น เบราว์เซอร์จะใช้ font-variation-settings: 'slnt' 10 จากคลาส .slanted จากนั้นระบบจะใช้ font-variation-settings: 'GRAD' -200 จากคลาส .grade-light แต่การดำเนินการนี้จะรีเซ็ต slnt กลับไปเป็น 0 ตามค่าเริ่มต้น ผลลัพธ์จะเป็นข้อความที่มีระดับสีอ่อน แต่ไม่เอียง

แต่โชคดีที่เราสามารถแก้ไขปัญหานี้ได้โดยการใช้ตัวแปร CSS ดังนี้

/* Set the default values */
:root {
    --slnt: 0;
    --GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
    --slnt: 10;
}

.grade-light {
    --grad: -200;
}

.grade-normal {
    --grad: 0;
}

.grade-heavy {
    --grad: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
    font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

ตัวแปร CSS จะเรียงซ้อนกัน ดังนั้นหากองค์ประกอบ (หรือองค์ประกอบระดับบนสุด) มีการตั้งค่า slnt เป็น 10 ค่านั้นจะเก็บค่าไว้แม้ว่าคุณจะตั้งค่า GRAD เป็นอย่างอื่นก็ตาม ดูการแก้ไขการสืบทอดแบบอักษรตัวแปรสำหรับคำอธิบายเชิงลึกของเทคนิคนี้

โปรดทราบว่าการทำให้ตัวแปร CSS เคลื่อนไหวไม่ได้ (ตามการออกแบบ) วิธีนี้จึงไม่ได้ผล

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

ภาพเคลื่อนไหวเหล่านี้จะต้องเกิดขึ้นโดยตรงใน font-variation-settings

ประสิทธิภาพที่ได้รับ

แบบอักษรตัวแปร OpenType ช่วยให้เราเก็บตัวแปรของประเภทที่หลากหลายไว้ในไฟล์แบบอักษรเดียว Monotype ทำการทดสอบโดยรวมแบบอักษรอินพุต 12 แบบเพื่อสร้างน้ำหนัก 8 แบบ โดยมีความกว้าง 3 แบบ ทั้งในรูปแบบตัวเอียงและโรมัน การจัดเก็บแบบอักษร 48 รายการไว้ในไฟล์แบบอักษรตัวแปรเดียวทำให้ขนาดไฟล์ลดลง 88%

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

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

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

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

หากใช้ Google Fonts คุณควรเชื่อมต่อล่วงหน้ากับ https://fonts.gstatic.com ซึ่งเป็นโดเมนที่โฮสต์แบบอักษรของ Google ไว้ วิธีนี้จะช่วยให้เบราว์เซอร์รู้ตั้งแต่เนิ่นๆ ว่าจะรับแบบอักษรได้จากที่ไหนใน CSS

<link rel="preconnect" href="https://fonts.gstatic.com" />

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

ดูเคล็ดลับเพิ่มเติมเกี่ยวกับประสิทธิภาพสำหรับการโหลด Google Fonts ใน Google Fonts ที่เร็วที่สุด

สำรองและการสนับสนุนเบราว์เซอร์

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

/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: Roboto;
    src: url('Roboto-Regular.woff2');
    font-weight: normal;
  }

  @font-face {
    font-family: Roboto;
    src: url('Roboto-Bold.woff2');
    font-weight: bold;
  }

  body {
    font-family: Roboto;
  }

  .super-bold {
    font-weight: bold;
  }
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

  .super-bold {
    font-weight: 1000;
  }
}

สำหรับเบราว์เซอร์รุ่นเก่า ข้อความที่มีคลาส .super-bold จะแสดงผลเป็นตัวหนาปกติ เนื่องจากเป็นแบบอักษรตัวหนาเพียงอย่างเดียวที่เรามี เมื่อระบบรองรับแบบอักษรตัวแปร เราจะใช้น้ำหนักที่มากที่สุดคือ 1, 000 ได้

Internet Explorer ไม่รองรับกฎ @supports เบราว์เซอร์นี้จึงไม่แสดงการจัดรูปแบบ หากปัญหาเกิดขึ้น คุณสามารถใช้การแฮ็กแบบเก่าวิธีหนึ่งเพื่อกำหนดเป้าหมายไปยังเบราว์เซอร์รุ่นเก่าที่เกี่ยวข้องได้เสมอ

หากคุณใช้ Google Fonts API ระบบจะจัดการโหลดแบบอักษรที่เหมาะสมสำหรับเบราว์เซอร์ของผู้เข้าชม สมมติว่าคุณขอแบบอักษร Oswald อยู่ในช่วงน้ำหนัก 200 ถึง 700 ดังนี้

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

เบราว์เซอร์สมัยใหม่ที่สามารถจัดการแบบอักษรที่เปลี่ยนแปลงได้จะได้รับแบบอักษรที่เปลี่ยนได้ และจะมีน้ำหนักระหว่าง 200 ถึง 700 ทั้งหมด เบราว์เซอร์รุ่นเก่าจะได้รับ แบบอักษรคงที่แต่ละแบบอักษรสำหรับทุกน้ำหนัก ในกรณีนี้หมายความว่าพวกเขาจะดาวน์โหลดไฟล์แบบอักษร 6 ไฟล์ ไฟล์หนึ่งสำหรับน้ำหนัก 200 ไฟล์หนึ่งสำหรับน้ำหนัก 300 เป็นต้น

ขอขอบคุณ

บทความนี้จัดทำขึ้นด้วยความช่วยเหลือของบุคคลต่อไปนี้

Mustafa Kurtuldu นักออกแบบและผู้สนับสนุนการออกแบบ UX ของ Google
Roel Nieskens นักออกแบบ/นักพัฒนา UX และผู้เชี่ยวชาญด้านการออกแบบตัวอักษรของ Kabisa
Dave Crossland ผู้จัดการโปรแกรมของ Google Fonts
David Berlow นักออกแบบและผู้เชี่ยวชาญด้านการพิมพ์ของ Font Bureau
Laurence Penney นักพัฒนาของ XX-pr เป็นต้น
Mandy Michael นักพัฒนาของ variablefonts.dev

รูปภาพหลักของ Bruno Martins ใน Unsplash