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

การ Custom Font หรือเปลี่ยน Font ภายในแอปให้เป็น Font ที่ต้องการ ถือว่าเป็นหนึ่งในเรื่องที่นักพัฒนาสามารถเจอกันได้อยู่บ่อยๆ เพราะไม่ใช่ทุกแอปที่ออกแบบมาเพื่อให้ใช้ System Font ดังนั้นวันนี้ของเล่าเรื่องราวเกี่ยวกับการทำ Custom Font ภายในแอปดีกว่า

ทำไมถึงไม่ใช้ System Font?

เพราะการเลือกใช้ Font อย่างเหมาะสมจะช่วยให้ UI ภายในแอปมีเอกลักษณ์ ดูโดดเด่น และเป็นที่น่าจดจำสำหรับผู้ใช้

ยกตัวอย่างเช่น Airbnb ที่ใช้ Custom Font ในแอพทั้งหมด เพื่อให้ดีไซน์ในแอปของตัวเองมีจุดเด่นและเป็นที่น่าจดจำ

แต่การเลือก Custom Font มาใช้นั้น ไม่ใช่การหยิบ Font อะไรก็ได้มาใช้ในแอป เพราะต้องดูความเหมาะสมกับดีไซน์และการใช้งานของแอปด้วยนะ

Font ที่จะเลือกมาใช้

ขอให้ยึดหลักพื้นฐาน 3 อย่างก็พอครับ

• อ่านง่าย สบายตา ไม่ต้องใช้เวลาทำความเข้าใจกับตัวอักษรมานัก

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

และเพื่อให้ง่ายต่อการพัฒนาแอป ไม่ควรใช้ Font มากกว่า 2 แบบขึ้นไป ถ้าจะให้ดีก็ควรเป็น Font เดียวแล้วใช้งานทั้งแอปเลยดีกว่า

การกำหนด Font ลงใน View ของแอนดรอยด์

นักพัฒนาสามารถใช้ Font Resource เพื่อกำหนด Font ที่ต้องการได้เลย หรือจะสร้างเป็น Font XML ก็ได้เช่นกัน

โดยการนำ Font Resource ไปกำหนดไว้ใน Layout XML แบบนี้

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/sarabun_regular"
    ... />

สามารถอ่านเรื่องราวของ Font Resource แบบเต็มๆได้ที่ เปลี่ยนฟอนต์บนแอนดรอยด์แบบง่ายๆด้วย Font Resource

เปลี่ยนฟอนต์บนแอนดรอยด์แบบง่ายๆด้วย Font Resource

ในที่สุดนักพัฒนาก็สามารถเปลี่ยนฟอนต์ได้ง่ายๆแล้ว เย้

Akexorcist - Sleeping For LessAkexorcist

เพราะ Font ทุกตัวนั้นไม่ได้เหมือนกัน

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

เมื่อดูภาพตัวอย่างข้างบนนี้ก็จะเห็นว่า แต่ละ Font มีความแตกต่างกัน ดังนั้นในการพัฒนาแอปที่จำเป็นต้องใช้ Custom Font ควรจะเช็คการแสดงผลของ Font ด้วยเสมอ

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

<resources>
    ...

    <style name="Roboto">
        <item name="android:fontFamily">@font/sarabun</item>
    </style>

    <style name="Roboto.Title">
        <item name="android:textSize">22sp</item>
    </style>

    <style name="Roboto.Title.Black">
        <item name="android:textColor">@color/text_black</item>
    </style>

    <style name="Superspace">
        <item name="android:fontFamily">@font/sarabun</item>
    </style>

    <style name="Superspace.Title">
        <item name="android:textSize">26sp</item>
        <item name="android:lineSpacingExtra">6dp</item>
    </style>

    <style name="Superspace.Title.Black">
        <item name="android:textColor">@color/text_black</item>
    </style>

</resources>

ดังนั้นถ้าจะให้ดีก็ให้สร้าง Style Resource แยกของแต่ละ Font ไปเลย เพื่อกำหนดขนาดของตัวอักษรและระยะห่างระหว่างบรรทัดแยกกัน

จงเลี่ยง Font ที่ไม่เหมาะกับหน้าจอความละเอียดต่ำ

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

ทั้งนี้ก็เพราะว่าบนแอนดรอยด์ไม่ได้เหมือนกับบน Photoshop ที่จะมี Anti-aliasing Setting ให้ปรับขอบของเส้นให้ดูสวยงามมากขึ้น

ทางที่ดีควรเช็คให้ดีตั้งแต่แรกก่อนว่า Font ที่จะนำมาใช้นั้นรองรับกับหน้าจอความละเอียดต่ำหรือไม่

ไม่ควรแยก Font สำหรับแต่ละภาษา

ในเชิงเทคนิคแล้ว นักพัฒนาสามารถแยก Font สำหรับแต่ละภาษาด้วย Configuration Qualifier ได้ แต่จะทำให้เสียเวลามากขึ้น เพราะว่า Font แต่ละตัวมี Typography ที่แตกต่างกัน การนั่งกำหนดค่าให้กับ Font สำหรับแต่ละภาษาจึงไม่ใช่เรื่องสนุกซักเท่าไร เปลือง Effort ในการพัฒนาแอปด้วย (เมื่อเทียบกับสิ่งที่ได้)

และข้อจำกัดที่สำคัญที่สุดก็คือ ไม่สามารถกำหนด Font แยกภาษาให้กับ View ที่มีข้อความผสมกันหลายภาษา เช่น

"ยินดีต้อนรับสู่ Sleeping For Less จ้า"

ทั้งนี้ก็เพราะว่า View บนแอนดรอยด์ถูกออกแบบมาให้กำหนดได้แค่เพียง Font เดียวเท่านั้นเอง (จะเปลี่ยนไปวาด Text บน Canvas เพื่อแยก Font ก็ได้นะ แต่จะคุ้มเหนื่อยหรือป่าวก็อีกเรื่องนึง)

ถ้าไม่ใช่ Lollipop ขึ้นไป ยังไงภาษาไทยก็ตัดคำห่วย

สำหรับในยุคนี้ที่แอปส่วนใหญ่รองรับเฉพาะ Android 5.0 Lollipop (API 21) ขึ้นไปแล้ว ก็จะหมดปัญหานี้ไปในทันที เพราะในอดีตนั้นการตัดคำของภาษาไทยในแอนดรอยด์ที่เวอร์ชันต่ำกว่านั้นมันห่วยจริงๆ!

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

ส่วนแอปที่ทำงานอยู่บน Android 5.0 Lollipop (API 21) ขึ้นไป บอกเลยว่าหายห่วง เพราะตั้งแต่เวอร์ชันนี้เป็นต้นไป ได้มีการปรับปรุงเรื่อง Typography มากพอสมควร รวมไปถึงการตัดคำสำหรับภาษาไทยด้วย เย้

การเปลี่ยนแปลงทาง Typography หลังจาก Android 5.0

เนื้อหาส่วนนี้อ้างอิงจาก Session ที่ชื่อว่า Android Textual Layout จากงาน Android Dev Summit 2015 นะครับ ซึ่งเจ้าของบล็อกได้ไปฟังมาแล้วพบว่าเหมาะกับบทความนี้สุดๆ

หลังจาก Android 5.0 Lollipop เป็นต้นไป ระบบแอนดรอยด์ได้เปลี่ยนมาใช้ Roboto เวอร์ชัน 2 ที่รองรับการแสดงผลที่ดีมากขึ้น และรองรับได้หลายภาษามากขึ้น​โดย Roboto เป็น Font ที่ Opensource

ในปัจจุบันมี Font ที่ Google พัฒนาขึ้นมาที่ชื่อว่า Noto เพื่อให้เป็น Font ที่สามารถรองรับได้ทุกภาษาทั่วโลก โดยนักพัฒนานักพัฒนาสามารถดาวน์โหลดมาใช้งานได้ฟรี

นอกจากนี้ Android 5.0 Lollipop ยังรองรับ OpenType ที่สามารถปรับรูปแบบของ Font ผ่านโค้ดให้เพิ่มมากขึ้น เช่น Kerning, Ligatures, Number Forms และ Letter Spacing จากเดิมที่ทำได้แค่ไม่กี่อย่าง

Kerning

ระยะระหว่างตัวอักษรเฉพาะตัว

Ligatures

การผสมระหว่างตัวอักษรสองตัว

Number Forms

ลักษณะของตัวเลข

Letter Spacing

ระยะห่างระหว่างตัวอักษร

ซึ่ง Kerning, Ligatures และ Number Forms สามารถกำหนดผ่าน android:fontFeatureSettings ได้เลย

<TextView
    ...
    android:fontFeatureSettings="'kern' on, 'liga' off, 'onum'" />

หรือจะกำหนดแค่อย่างใดอย่างหนึ่งก็ได้เช่นกัน

<TextView
    ...
    android:fontFeatureSettings="'kern' off" />

ส่วน Letter Spacing กำหนดผ่าน android:letterSpacing

<TextView
    ...
    android:letterSpacing="0.1"/>

นอกจากนี้การมาของ Android 6.0 Marshmallow ยังมีการปรับปรุงเรื่องการตัดคำให้ดียิ่งขึ้นอีก โดยสามารถกำหนดรูปแบบในการตัดคำได้

และที่เจ้าของบล็อกชอบก็คือ มันรองรับภาษาไทยด้วยนะเออ!!

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

แต่เจ้าของบล็อกไม่แน่ใจนะว่าใช้กับภาษาไทยได้มั้ย แต่ที่แน่ๆคือจะใช้เวลา Process นานกว่าปกติ

สรุป

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