ถ้าพูดถึงเรื่องฟอนต์บนแอนดรอยด์ ผู้ที่หลงเข้ามาอ่านก็คงนึกถึง Roboto เนอะ เพราะมันเป็นฟอนต์ที่ใช้บน Android 5.0 Lollipop เป็นต้นมา ถ้าทำแอปส่วนตัวก็คงไม่ต้องสนใจอะไรมาก แล้วใช้ฟอนต์ Roboto เนี่ยแหละ แต่ทว่าในโลกของการพัฒนาแอปนั้นบอกได้เลยว่า แค่เพียงฟอนต์เดียวก็อาจจะไม่เพียงพอเสมอไป
สำหรับโลกของการดีไซน์นั้น ลักษณะของฟอนต์นั้นมีผลต่อความรู้สึกและอารมณ์ ดังนั้นการเลือกฟอนต์ที่เหมาะสมกับรูปแบบของแอปนั้นจะช่วยเพิ่มความน่าสนใจและความสวยงามให้มากขึ้น ดั่งเช่นที่ทีมดีไซน์ของ Airbnb ได้สร้างฟอนต์ขึ้นเอง โดยมีชื่อว่า Airbnb Cereal เพื่อเพิ่มเอกลักษณ์ให้กับแอปของตัวเอง
ซึ่งการเปลี่ยนไปใช้ฟอนต์อื่นๆบนแอนดรอยด์นั้นก็ทำได้ไม่ยาก เพราะสมัยนี้มี Font Resource ให้ใช้งานอยู่แล้ว แถมรองรับเวอร์ชันเก่าๆด้วย อยากจะได้กี่ฟอนต์ก็บอกมาได้เลย
แต่สิ่งหนึ่งที่เหล่า Designer นั้นซีเรียสกันมากๆก็คือ "ขนาดของตัวหนังสือ" นั่นเอง และถ้าผู้ที่หลงเข้ามาอ่านมีประสบการณ์คลุกคลีอยู่กับเรื่อง Typography ก็จะค้นพบว่า
ฟอนต์แต่ละตัวไม่ได้มีขนาดเท่ากันเป๊ะๆ
ซึ่งเป็นเรื่องที่เหล่า Designer มักจะรู้กันอยู่แล้ว จึงทำให้เวลาเปลี่ยนฟอนต์ภายในแอปจึงไม่ค่อยซีเรียสเรื่องขนาดตัวหนังสือที่เปลี่ยนไปมากนัก
แนะนำ - ถ้าจำเป็นต้องใช้ TH Sarabun New แนะนำให้ใช้ Sarabun ที่อยู่ใน Google Fonts แทนดีกว่านะ
ถ้าทั้งแอปใช้อยู่แค่ฟอนต์เดียว การเปลี่ยนไปเป็นฟอนต์อื่นก็คงไม่รู้สึกอะไรมากนัก แต่เมื่อแอปมีหลายฟอนต์และมีหลายขนาด ก็จะพบว่าขนาดของฟอนต์เหล่านี้มีการเหลื่อมล้ำนิดหน่อย เช่น Title ที่ควรจะมีขนาด 18sp และ Content ขนาด 16sp แต่ฟอนต์ที่ใช้ใน Title ดันเล็กกว่าปกตินิดหน่อย ก็เลยทำให้มีขนาดเท่ากับฟอนต์ที่ใช้ใน Content ซะงั้น
สิ่งที่ต้องทำก็คือชดเชยขนาดฟอนต์ที่มีขนาดเล็กกว่าใช่มั้ยล่ะ?
แต่อยู่ๆจะไปเปลี่ยนขนาดของฟอนต์ที่ Title ให้ใหญ่กว่าปกติเลยมันก็สุ่มเสี่ยงไปหน่อย เพราะถ้ามีหน้าอื่นๆต้องแสดงขนาดเดียวกันแต่เป็นฟอนต์อื่นก็จะพลอยซวยไปด้วยนั่นเอง
ดังนั้นถ้ารู้สึกว่าวิธีการจัดการ Layout ของผู้ที่หลงเข้ามาอ่านนั้นมีปัญหาแบบนี้อยู่ มาเปลี่ยนวิธีกันเถอะ
กำหนดชื่อเรียกสำหรับตัวอักษรแต่ละขนาดแล้วหรือยัง?
ถ้าผู้ที่หลงเข้าประสบปัญหาจำไม่ได้ว่าฟอนต์ตรงไหนใช้ขนาดเท่าไร แทนที่จะจำตัวเลขก็ให้เปลี่ยนเป็นชื่อเรียกดีกว่า เพราะว่าขนาดของฟอนต์นั้นแปรผันไปตามฟอนต์ที่เลือกใช้ ถ้ามีการเปลี่ยนฟอนต์หรือใช้หลายๆฟอนต์ในแอปเดียวกัน ก็จะเพิ่มความสับสนมากขึ้น เวลาคุยกับคนในทีมก็อาจจะเข้าใจไม่ตรงกัน
ขนาดของแต่ละฟอนต์ไม่ควรใช้ร่วมกัน
ถึงให้กำหนดชื่อเรียกไงล่ะ จะได้ใช้ชื่อเรียกเป็นตัวกลางในการสื่อสารระหว่างทีมได้สะดวกขึ้นจากนั้นลองสร้างแอปเปล่าๆขึ้นมาซักตัวเพื่อเปรียบเทียบขนาดของฟอนต์เสียก่อน แล้วเทียบกับจากฟอนต์ปกติของตัวเครื่อง (Roboto นั่นเอง)
และถ้าแอปมีฟอนต์หลายขนาดก็ให้เทียบทุกขนาดเลยนะ เพราะผลต่างของขนาดตัวอักษรไม่ได้คงที่ แต่จะแปรผันไปตามขนาดที่สูงขึ้น
เมื่อได้ขนาดของแต่ละฟอนต์แล้ว ก็เตรียม Dimension Resource ไว้เลย
// dimens.xml
<resources>
// Default (Roboto)
<dimen name="text_size_default_sub_detail">12sp</dimen>
<dimen name="text_size_default_detail">14sp</dimen>
<dimen name="text_size_default_content">16sp</dimen>
<dimen name="text_size_default_sub_title">18sp</dimen>
<dimen name="text_size_default_title">22sp</dimen>
// Kanit
<dimen name="text_size_kanit_sub_detail">13sp</dimen>
<dimen name="text_size_kanit_detail">15sp</dimen>
<dimen name="text_size_kanit_content">18sp</dimen>
<dimen name="text_size_kanit_sub_title">19sp</dimen>
<dimen name="text_size_kanit_title">24sp</dimen>
// Mitr
<dimen name="text_size_mitr_sub_detail">13sp</dimen>
<dimen name="text_size_mitr_detail">15sp</dimen>
<dimen name="text_size_mitr_content">17sp</dimen>
<dimen name="text_size_mitr_sub_title">19sp</dimen>
<dimen name="text_size_mitr_title">23sp</dimen>
// Sarabun
<dimen name="text_size_sarabun_sub_detail">12sp</dimen>
<dimen name="text_size_sarabun_detail">14sp</dimen>
<dimen name="text_size_sarabun_content">16sp</dimen>
<dimen name="text_size_sarabun_sub_title">18sp</dimen>
<dimen name="text_size_sarabun_title">22sp</dimen>
</resources>
และสำคัญที่สุดก็คือการสร้าง Style Resource ขึ้นมาเพื่อจะได้ Reuse ค่าเหล่านี้ได้ง่ายขึ้น (ขนาดตัวอักษร, สี และฟอนต์)
// styles.xml
<resources>
<style name="Text" />
// Default (Roboto)
<style name="Text.Default" />
<style name="Text.Default.Black">
<item name="android:textColor">@color/black</item>
</style>
<style name="Text.Default.Black.Normal">
<item name="android:textSize">@dimen/text_size_default_normal</item>
</style>
<style name="Text.Default.Black.Large">
<item name="android:textSize">@dimen/text_size_default_large</item>
</style>
<style name="Text.Default.Black.Small">
<item name="android:textSize">@dimen/text_size_default_small</item>
</style>
// Kanit
<style name="Text.Kanit">
<item name="fontFamily">@font/kanit</item>
</style>
<style name="Text.Kanit.Black">
<item name="android:textColor">@color/black</item>
</style>
<style name="Text.Kanit.Black.Normal">
<item name="android:textSize">@dimen/text_size_kanit_normal</item>
</style>
<style name="Text.Kanit.Black.Large">
<item name="android:textSize">@dimen/text_size_kanit_large</item>
</style>
<style name="Text.Kanit.Black.Small">
<item name="android:textSize">@dimen/text_size_kanit_small</item>
</style>
// Mitr
<style name="Text.Mitr">
<item name="fontFamily">@font/mitr</item>
</style>
...ขี้เกียจพิมพ์...
// Sarabun
<style name="Text.Sarabun">
<item name="fontFamily">@font/sarabun</item>
</style>
...ขี้เกียจพิมพ์...
</resources>
ขอยกตัวอย่างเป็นตัวหนังสือสีดำทุกขนาดเฉพาะ 2 ฟอนต์แรกละกัน ขี้เกียจพิมพ์เยอะ...
พร้อมใช้งานแล้ว
อยากจะให้ใช้ฟอนต์อะไรตรงไหน ขนาดเท่าไรก็กำหนดด้วย Style Resource ได้ตามต้องการเลย<TextView
style="@style/Text.Kanit.Black.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/any_title" />
<TextView
style="@style/Text.Default.Black.Content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/any_content" />
เพียงเท่านี้ก็หมดปัญหาฟอนต์หลายตัวที่ดันมีขนาดต่างกันแล้ว ไม่ต้องตบตีกับ Designer อีกต่อไปแล้ว