Typography

Styles of the family

Tipografi yang digunakan dalam suatu aplikasi mobile memiliki andil dalam merepresentasikan brand yang diangkat. Selain keperluan tersebut, tipografi juga baiknya memiliki aturan penggunaan sebagai komponen dalam aplikasi serta bersifat memudahkan bagi pengguna yang membacanya.

Teks yang terlalu kecil akan menyulitkan pengguna untuk membaca informasi yang disediakan, pun teks terlalu besar bisa mengganggu mata dari pengguna. Oleh karena itu, kebutuhan akan ukuran yang pasti sebagai dasar penggunaan teks dan skalanya menjadi penting, dan untuk mencapai hal tersebut, setidaknya diperlukan pertimbangan dalam menentukan font size dan line height yang cocok bagi aplikasi yang akan digarap.

Kombinasi dari font size dan line height dengan rasio yang cocok akan memudahkan baik desainer dan developer dalam mengembangkan aplikasi, serta memudahkan pengguna dalam membaca informasi yang disajikan.

Tentu kedua aturan tersebut tidak bersifat wajib diikuti sepenuhnya, karena perlu diingat, masing-masing brand menetapkan aturan tersebut berdasarkan OS smartphone yang dimiliki. iOS, macOS, serta ipadOS memiliki rentetan guideline yang setelah melewati banyak perhitungan, dianggap cocok untuk menggunakan aturan 11px-17px di atas.

Begitu pula Google, bersama AndroidOS-nya, menentukan ukuran cocok bagi teksnya di angka 12px-16px.

Line Height

Line height adalah jarak/spasi dari suatu teks dengan baris lebih dari satu, biasanya berupa paragraf. Penggunaan line height yang baik akan membantu tingkat readability teks yang disajikan. Sebaliknya, line height yang tidak baik akan menyulitkan pengguna dalam membaca informasi. Line height variatif sendiri umumnya hanya diaplikasikan pada teks berbentuk paragraf, namun jika diperlukan, dapat digunakan pada teks berbentuk label, placeholder, text field, dan lain-lain.

Untuk mengakomodir readability suatu paragraf, diperlukan line height yang sedikit lebih besar dari font size yang dipakai. Tidak ada besaran pasti yang dapat menentukan ukuran line height yang paling baik. Google, melalui Material Design 3-nya tidak menentukan takaran pasti bagi line height di setiap skala tipografi yang mereka miliki. Semakin kecil font size, maka semakin besar rasio-nya line height-nya. Sebagai contoh, skala Display Large Material memiliki size 57 dengan line height 64 (sekitar 1,12x), sementara skala Headline Large memiliki size 32 dan line height 40 (rasionya sebesar 1,25x).

Sementara Human Resource Guideline Apple memiliki skala teks Large Title dengan ukuran 34 dan line height 41 (sekitar 1,2x) dan Body Text ukuran 17 dengan line height 22 (rasio 1,29).

Ketidakseragaman ini mungkin membingungkan bagi baik desainer dan developer, namun setelah ditelaah lebih jauh, bagi aplikasi mobile, rasio line height ini seringkali berada di antara 1,2 hingga 1,5x dari font size yang dipakai, dengan aturan berbanding terbalik dimana font size yang lebih kecil memiliki rasio line height yang lebih besar.

Jika menyulitkan, desainer dapat mematok rasio 1,3x bagi line height, berapapun ukuran font-nya.

Font Type/Family

Font yang digunakan pada aplikasi mobile juga perlu ditentukan, font tersebut harus sesuai dengan brand yang diangkat, tingkat readability-nya, dan juga dicek penggunaan hak ciptanya. Biasanya satu aplikasi atau brand akan menggunakan satu tipe font family, atau maksimal dua tipe. Dengan klasifikasi satu tipe untuk body text dan satu lainnya untuk title/headline. Pada dasarnya tidak ada aturan khusus mengenai penggunaan font type/family pada aplikasi, sehingga pada hal ini desainer memiliki kebebasan untuk memilih font yang digunakan.

Type Scale

Type scale merupakan rentetan ukuran kombinasi font size dan line height tertentu yang tiap ukurannya berbeda, sehingga dapat digunakan pada tipe-tipe teks yang berbeda pula. Skala ini, pada Material Design dibagi ke dalam headline, subtitle, body, button, caption dan overline. Sementara pada Human Interface Guideline Apple, dibagi ke dalam title, headline, body, subhead, footnote, callout dan caption. Keduanya memiliki skala yang berbeda, dengan perhitungan masing-masing dalam menentukan font size dan line height tiap ukuran.

Secara praktis, tidak ada aturan pasti dalam menentukan ukuran type scale, namun di banyak kasus dan kebutuhan mobile app, biasanya ukurannya berkisar di antara 10px sebagai ukuran terkecil, dan 24px sebagai ukuran terbesar. Ukuran lebih besar dari 24px kadang digunakan, terutama pada aplikasi iOS, karena memiliki ukuran judul halaman atau large title yang membutuhkan ukuran lebih besar, yakni dengan font size 34px.

App iOS dan AndroidOS memiliki karakterisik yang berbeda, desainer dapat mengikuti guideline dari salah satu OS tersebut atau meleburnya untuk menciptakan type scale universal untuk app mobile.

Guideline Design System website yang digunakan Rolling Glory menggunakan skala Material Design dengan detail ukuran 6 headline, 2 subtitle, 2 body text, 1 button, 1 caption, dan 1 overline. Skala ini bisa saja digunakan untuk mobile app, namun pada skenario riil, headline 1 hingga 5 malah jarang sekali digunakan. Headline 6 dengan size 24px adalah ukuran yang paling sering digunakan sebagai ukuran terbesar. Untuk menanggulangi hal itu, skala bagi design system mobile akan mengadopsi Material Design namun dengan beberapa tweaking.

Perlu diketahui, skala di bawah ini bisa ditambah sesuai dengan kebutuhan dan kreativitas desainer.

Mobile Type Scale

Scale	Font Size	Line Height* (approx. 1,3x of font size)	Usage
Headline 1	32/34	40/42	iOS large title
Headline 2	24	30	Banner title
Headline 3	20	26	Header title, page title, banner title, section title
Headline 4	18	24	iOS page title
Subtitle 1	16	20	Section title
Subtitle 2	14	18	Secondary section title
Body 1	16	20	Primary body text
Body 2	14	18	Secondary body text
Button	14	14	Button
Caption	12	16	Caption, label
Overline	10	13	Secondary label, tag title

Beberapa hal yang perlu diperhatikan untuk text scale di atas adalah:

Pada komponen teks tunggal (bukan paragraf atau button), desainer dan developer bisa menghiraukan line height (membuat line height-nya 1x dari font size), supaya posisi teks tersebut bisa dengan tepat berada di tengah container.
Subtitle dan body memiliki ukuran yang sama, yang membedakannya hanyalah pada font weight. Body biasanya memiliki weight regular (400~500) sementara subtitle memiliki weight lebih medium/semibold (600~800).