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

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

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

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

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

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

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

บทนำ

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

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

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

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

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

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

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

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

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

แบบอักษรที่ปรับเปลี่ยนได้จะช่วยจัดการกับความท้าทายเหล่านี้โดยการรวมรูปแบบเป็นไฟล์เดียว

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

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

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

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

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

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

ตัวเอียง

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

รูปแบบตัวอักษรอื่นๆ (เช่น 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

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

แอนิเมชัน

แบบอักษร Zycon ออกแบบมาเพื่อภาพเคลื่อนไหวโดย David Berlow นักออกแบบแบบอักษรและที่ปรึกษาด้านแบบอักษรที่ Font Bureau

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

Anicons เป็นแบบอักษรไอคอนสีแบบเคลื่อนไหวไอคอนแรกของโลก โดยอิงตามไอคอน Material Design Anicons เป็นการทดลองซึ่งรวมเทคโนโลยีแบบอักษรที่ล้ำสมัย 2 แบบเข้าด้วยกัน ได้แก่ แบบอักษรที่หลากหลายและแบบอักษรสีต่างๆ

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

Finesse

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

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

แกน XTRA ใน Amstelvar ช่วยให้คุณปรับค่า "สีขาว" ต่อพันได้ ดังที่แสดงด้านบน การใช้ 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. ช่วงสไตล์: คุณจะเห็นว่าเรามีค่า 2 ค่าสําหรับ font-weight และ font-stretch แทนที่จะบอกเบราว์เซอร์ว่าแบบอักษรนี้ให้น้ำหนักใด (เช่น font-weight: 500;) ตอนนี้เราจะกำหนด range ของน้ำหนักที่แบบอักษรดังกล่าวรองรับ สำหรับ Roboto Flex แกนน้ำหนักจะอยู่ที่ 100 ถึง 1,000 และ CSS จะแมปช่วงแกนกับพร็อพเพอร์ตี้ font-weight style โดยตรง การระบุช่วงใน @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 มีแกนที่กำหนดเอง 2-3 แกน และที่สำคัญที่สุดคือ Grade (GRAD) แกน Grade น่าสนใจตรงที่เปลี่ยนน้ำหนักของแบบอักษรโดยไม่เปลี่ยนความกว้าง ดังนั้นการแบ่งบรรทัดจึงไม่เปลี่ยนแปลง การปรับแกนระดับจะช่วยให้คุณไม่ต้องเปลี่ยนแปลงแกนน้ำหนักที่ส่งผลต่อความกว้างโดยรวม แล้วค่อยไปเปลี่ยนแปลงแกนความกว้างที่ส่งผลต่อน้ำหนักโดยรวม

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

เนื่องจาก GRAD เป็นแกนที่กำหนดเอง ซึ่งมีช่วงของ Roboto Flex ตั้งแต่ -200 ถึง 150 เราต้องส่งเรื่องนี้ให้ 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 ด้วย

อย่างไรก็ตาม โปรดทราบว่า 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 Regular และไม่มีแบบอักษรอื่น คุณอาจไม่เห็นขนาดแบบอักษรเพิ่มขึ้นหากเปลี่ยนไปใช้แบบอักษรแบบผันแปรที่มีหลายแกน ดังเช่นเคย ทุกอย่างขึ้นอยู่กับกรณีการใช้งานของคุณ

ในทางกลับกัน การแสดงผลแบบเคลื่อนไหวของแบบอักษรระหว่างการตั้งค่าอาจทำให้เกิดปัญหาด้านประสิทธิภาพ แม้ว่าวิธีนี้จะดีขึ้นเมื่อการรองรับแบบอักษรในเบราว์เซอร์มีอายุมากขึ้น แต่ปัญหาจะลดลงได้พอสมควรโดยการทำให้แบบอักษรเคลื่อนไหวอยู่บนหน้าจอเท่านั้น ข้อมูลโค้ดที่มีประโยชน์นี้จาก 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 จะแสดงผลแบบตัวหนาปกติ เนื่องจากเป็นแบบอักษรตัวหนาเพียงแบบเดียวที่เรามี เมื่อรองรับแบบอักษรแบบผันแปรแล้ว เราจะใช้น้ำหนักที่หนาที่สุดที่ 1000 ได้

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 นักพัฒนาซอฟต์แวร์ของ axis-praxis.org
Mandy Michael นักพัฒนาซอฟต์แวร์ variablefonts.dev

รูปภาพหลักโดย Bruno Martins ใน Unsplash