Variable fonts กับอนาคตของการออกแบบเว็บไซต์

Natk

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

ซึ่งคุณ Jason Pamental ผู้บรรยายที่อ้างอิงในบทความนี้ ได้แนะนำว่าเขาได้รู้จัก Variable fonts ครั้งแรกนั้นจากงาน Atypl Warsaw ในปี 2016 เขาเองก็บอกว่าตื่นเต้นมากที่ได้ทำความรู้จักกับตัวนี้เพราะคิดว่าฟอนต์เหล่านี้จะมาเขย่าวงการคนทำเว็บต่อไปแน่นอนในอนาคต

ส่วน Variable fonts จะมีคอนเซปต์ที่มาที่ไปในการทำงานอย่างไรนั้น
มาอ่านบทความแบบพื้นฐานและเริ่มต้นไปกับ Designil กันค่ะ

การใช้งานฟอนต์ในสมัยก่อน

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

โดยตัวหนังสือเองนั้นก็ออกแบบมาให้มีทั้ง Width (ความกว้าง), Weight (น้ำหนัก), x-height (ส่วนสูง), slant (ตัวเอียง)

นอกจากนี้ยังมีสัญลักษณ์พิเศษอีกต่าง ๆ มากมายไม่ว่าจะเป็น เครื่องหมาย “”, – , fractions (เครื่องหมายในการเขียนสูตรต่าง ๆ), ตัวขึ้นต้นพิมพ์ใหญ่

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

การใช้งานฟอนต์ในเว็บไซต์ ในยุคปัจจุบัน

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

ลองยกตัวอย่าง หากดีไซน์เนอร์ออกแบบเว็บไซต์ด้วยความสวยงาม ฟรุ้งฟริ้ง หนาบางไม่เท่ากันล่ะก็ เดเวลอปเปอร์ คงจะตีกลับมาแล้วพูดว่า “โห ฟอนต์ตั้ง 14 ฟอนต์ เอากลับไปทำใหม่เถอะ มันโหลดช้าแล้วใครจะรออ่านล่ะแบบนี้” แน่นอนว่าฝั่งของดีไซน์เนอร์เองนั้นก็คงจะขัดใจตัวเองอยู่มิใช่น้อย แต่เราก็ต้องทำการบาลานซ์ระหว่างความสวยงาม และความโหลดเร็ว มาเกี่ยวข้องอีก

สิ่งที่ต้องคำนึงอีกอย่างหนึ่งก็คือ

ใน 3 วินาทีน้ัน 53% ของผู้ใช้งานมือถือ จะออกจากเว็บไซต์
และใช้เวลาอีก 2.9 วินาที คิดว่าทำไมเว็บเป็นสีขาว ทำไมข้อความไม่โหลด

การทำงาน Web browser เองนั้นจะต้องทำการรอฟอนต์ของเราโหลดเสร็จ และในระหว่างการรอ font จาก cdn ทั้งหลาย เหล่านั้นหน้าจอของเราก็จะเป็นสีขาวทั้งหมด เพราะฉะนั้นไม่ต้องคาดเดาเลยว่าทำไมคนถึงปิดเว็บไซต์ของเราทั้งที่ยังไม่ครบ 3 วินาที

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

นอกจากนี้สถิติจากเว็บไซต์ Google Fonts ยังบอกไว้ในเว็บอีกว่า

ฟอนต์ Open Sans จาก Google Fonts
มียอดดาวน์โหลด 29.5 พันล้านครั้ง
สถิติจากสัปดาห์ที่ผ่านมา

Open Sans จัดเป็นฟอนต์ยอดนิยมสูงสุดที่ทั้งในไทยและต่างประเทศชอบเอามาเป็นทั้งตัวอ่าน paragraph และตัวหัวข้อ heading ในเว็บไซต์

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

เปรียบเทียบประสิทธิภาพการใช้งานฟอนต์แบบเดิม กับ Variable Fonts

ถ้าเราลองมาเปรียบเทียบตัวอย่างการใช้ฟอนต์แบบเวอร์ชั่นปัจจุบันที่เราใช้หลากหลาย weight หลากหลายฟอนต์นั้น เราจะต้องใช้ไฟล์ทั้งหมดกี่ไฟล์กันแน่

Variablefonts-designil
Variablefonts-designil
  • จากภาพข้างต้น การที่เราจะได้งานออกแบบตามภาพนี้นั้น เราจะต้องใช้ไฟล์ฟอนต์ทั้งหมด
    26 ไฟล์, 619kb ใช้เวลาเกือบ 30% ในการโหลดฟอนต์ทั้งหมด

 

  • แต่หากถ้าเราปรับมาใช้ Variable fonts โดยดีไซน์เหมือนกับภาพด้านบนนี้เหมือนเดิมทุกประการ
    โดยฟอนต์นี้สามารถปรับรูปร่างตัวเองได้ ไม่ว่าจะเป็น Weight, slant, width, optical size ล่ะก็
    เราจะใช้ไฟล์แค่ 2 ไฟล์ และมีขนาดเพียงแค่ 74 kb เท่านั้น

 


ตัวอย่างของ Variable font

ที่สามารถปรับรูปร่างหน้าตา อ้วนไปผอม เอียงไปตรง ได้ภายใน 1 ฟอนต์เท่านั้น!!!

if type is the voice of our words that voice just became a chorus

ข้อดีของ Variable fonts

  • ดีไซน์ยอดเยี่ยม – จัดการตัวหนังสือได้ดียิ่งขึ้นสำหรับนักออกแบบ นักพัฒนา รวมไปถึงผู้อ่านอีกด้วย
  • Performance ที่ดีขึ้น – ไม่ว่าจะเป็นไฟล์ที่เล็กลง หรือระยะเวลาการดาวน์โหลด
  • 1 ไฟล์ แต่กลายร่างเป็นได้หลายร้อยสไตล์  – ตอบโจทย์ทั้งจอเล็ก จอใหญ่ desktop, tablet, mobile
  • การจัดการที่ง่ายขึ้น – เวลาแก้ไขตัวเอียง ตัวผอม ตัวสูง ตัวอ้วน ตัวบาง ก็แก้แค่ที่ตัว css มิต้องโหลดไฟล์ฟอนต์ใหม่ถ้าจะเอา weight อื่น
  • ตอบโจทย์ Accessibility ที่ดีขึ้น – การปรับ weight, width ของตัวอักษรในแต่ละ screen ยังช่วยให้เว็บไซต์ของเราตอบโจทย์กับผู้ที่มีปัญหาทางด้านสายตา หรือตาบอดสี เพื่อให้อ่านตัวอักษรได้ชัดขึ้น ยกตัวอย่าง หากเราทำตัวหนาในมือถือจอเล็ก ก็จะทำให้ภาพคมชัดขึ้น ตัวอักษรอ่านง่าย แทนที่เราจะเพิ่มขนาดให้บรรทัดเพิ่มขึ้นแล้วไปกระทบกับความสวยงามของเว็บไซต์ เราก็เพิ่มแค่ตัวให้มันหนาขึ้นนั่นเอง

แล้วในอนาคตต่อจากนี้ล่ะ ?

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

ดังนั้นหวังว่าในอนาคต เราจะสามารถเพิ่มความสวยงาม เติมชีวิตกลับมาให้กับเว็บไซต์ข่าวขนาดใหญ่ โดยที่ไม่ต้องโหลดนาน เปลือง perfomance อีกต่อไป

variable fonts
variable fonts

 


ปิดท้ายด้วยการใช้ CSS ใน Variable fonts

 

ภาค 2 มาแล้ว!!! สำหรับผู้ใช้งาน Photoshop CC, Illustrator CC
วิธีการใช้ Variable Fonts ใน Photoshop CC 2018

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

Credits: 
Video
Slide
Natk

Natk

UI Specialist ซิดนีย์ ออสเตรเลีย เป็นดีไซน์เนอร์มา 12 ปี | สนใจเรื่อง User Interface, User Experience, Accessibility, Education | ผู้ก่อตั้งกลุ่มเฟซบุ๊ก Tech ไทยในออสเตรเลีย | ผู้ดูแลเว็บไซต์ Designil
บทความทั้งหมด