Mengenal Rumus Ukuran Font, Mulai Dari Satuan Hingga Rasio

Konsep Utama Dalam Rumus Ukuran Font

Secara umum, rumus ukuran font digunakan dalam menentukan skala teks di berbagai aplikasi. Hal ini berlaku di desain web hingga grafis maupun pengolahan dokumen.

Satuan Ukuran Font

Dalam konteks rumus ukuran font, satuan memiliki peran penting untuk menyesuaikan dan skala teks agar sesuai dengan berbagai kebutuhan dan media. 

Secara umum, satuan ukuran font adalah parameter yang digunakan untuk menentukan besarnya teks dalam desain atau dokumen. Berikut adalah beberapa satuan ukuran font yang umum digunakan:

• Piksel (px): Satuan ini menawarkan konsistensi dan kontrol atas tampilan teks di layar. Ini karena piksel merujuk pada titik-titik individual pada sebuah display.

• Em: Ukuran relatif yang berbasis pada ukuran font dari elemen induknya. Misalnya, jika ukuran font induk adalah 16px, maka 1em sama dengan 16 px.

• Rem: Satuan relatif terhadap ukuran font dari elemen root dokumen. Ini dapat menjaga konsistensi ukuran font di seluruh dokumen.

• Poin (pt): Satuan yang sering digunakan dalam setting cetak. 1 poin setara dengan 1/72 dari satu inci. Dalam konteks digital, satuan ini digunakan untuk dokumen cetak.

• Persentase (%): Satuan ini digunakan untuk menyesuaikan ukuran font berdasarkan induknya. Ini berguna untuk membuat desain yang responsif terhadap preferensi pengguna dan ukuran layar berbeda.

Baca juga: Cari Tahu Bedanya UI UX Design Lewat 5 Hal Ini!

Formula Scalable Typography

Formula scalable typography adalah pendekatan dalam desain web dan digital. Ini memungkinkan ukuran teks untuk menyesuaikan dengan berbagai kondisi layar dan perangkat.

1. Penggunaan Satuan Relatif

Dalam scalable typography, satuan relatif seperti em, rem, dan persentase digunakan untuk mendefinisikan ukuran font. Hal ini memastikan bahwa ukuran font dapat beradaptasi berdasarkan ukuran font induk atau root.

2. Viewport Units

Ini merupakan satuan yang relatif terhadap ukuran viewport browser. Berikut adalah contohnya:

• Viewport Width (VW): Satuan ini berbasis pada lebar viewport. 1vw sama dengan 1% dari lebar viewport. Ini memungkinkan ukuran font untuk menyesuaikan secara otomatis berdasarkan lebar layar.

• Viewport Height (VH): Serupa dengan vw, tetapi berbasis pada tinggi viewport.

• vmin dan vmax: Masing-masing merupakan nilai minimal dan maksimal dari vw dan vh. Ini berguna untuk desain yang lebih kompleks dan kondisional.

3. Fungsi CSS calc()

Ini memungkinkan perhitungan langsung dalam definisi CSS. Misalnya, mengkombinasikan satuan tetap dengan satuan relatif. 

Golden Ratio Typography

Ini berkaitan erat dengan rumus ukuran font melalui aplikasinya. Mulai dari penentuan font size, line-height, dan line-width yang ideal untuk menciptakan keseimbangan visual dalam teks.

1. Menentukan Ukuran Font

Ini dimulai dengan memilih ukuran font dasar sebagai titik awal. Misalnya, jika ukuran font dasar yang diinginkan adalah 16px, maka itu bisa dijadikan dasar perhitungan lebih lanjut.

2. Menghitung Tinggi Baris

Ini bisa dilakukan dengan golden ratio agar teks bisa dipastikan nyaman dibaca. Contohnya, jika ukuran font dasar adalah 16px, maka tinggi baris dapat dihitung sebagai 16px X 1618. Dengan begitu, tinggi baris ideal akan menjadi sekitar 26px.

3. Menyesuaikan Lebar Baris

Dengan golden ratio, lebar basir bisa diatur berdasarkan tinggi baris. Contohnya, tinggi baris 26px, lebar nya bisa dihitung sebagai 26px X 1618.

4. Skala dan Hierarki

Golden ratio juga bisa digunakan untuk menentukan hierarki teks. Misalnya, judul, subjudul, dan body texts. 

Rumus Ukuran Font Untuk Responsivitas

Setelah mempelajari konsep dasar dalam rumus ukuran font, selanjutnya mari pelajari cara hitung dalam menciptakan desain responsif. Rumus ukuran font untuk responsivitas adalah pendekatan yang dirancang untuk menyesuaikan ukuran teks berdasarkan layar.

Hal ini memastikan bahwa konten tetap mudah dibaca dan estetis di berbagai perangkat. Berikut adalah beberapa teknik dan rumus yang dapat digunakan untuk mencapai tipografi yang responsif:

1. Media Queries

Pertama, media queries dalam CSS memungkinkan desainer untuk menerapkan gaya yang berbeda berdasarkan beberapa hal. Ini mencakup fitur-fitur tertentu dari perangkat atau viewport. Misalnya, lebar, tinggi, atau orientasi layar.

2. Satuan Relatif (em, rem)

Berikutnya menggunakan satuan relatif seperti em atau rem membantu memastikan bahwa teks skalasi secara proporsional terhadap ukuran font induk atau root. Ini membuat desain lebih fleksibel dan responsif.

3. Viewport Width (vw)

Satuan vw (viewport width) memungkinkan ukuran font untuk menyesuaikan berdasarkan lebar viewport. Dengan ini, teks bisa menjadi lebih besar atau lebih kecil secara otomatis sesuai dengan perubahan ukuran layar.

Contoh penggunaan vw untuk ukuran font yang skalabel:

body {

  font-size: 2vw; /* Ukuran font akan menyesuaikan dengan lebar viewport */

}

Rumus ukuran font diatas bisa saja menyebabkan teks terlalu kecil atau besar pada viewport yang sangat kecil atau besar. Solusinya adalah menggabungkan vw dengan satuan tetap pakai calc(). Ini contohnya:

body {

  font-size: calc(12px + 1vw); /* Mengkombinasikan ukuran tetap dengan skalabilitas */

}

Baca Juga: 9 Cara Membuat Web Responsif dan User Friendly

4. Fungsi CSS clamp ()

Terakhir adalah fungsi CSS clamp() yang menyediakan solusi untuk menentukan nilai ukuran font minimum, pilihan, dan maksimum. Ini memastikan bahwa ukuran font tetap responsif tanpa menjadi terlalu kecil atau terlalu besar.

Contoh penggunaan clamp() adalah sebagai berikut:

body {

  font-size: clamp(12px, 2vw, 18px); /* Ukuran font akan menyesuaikan antara 12px dan 18px, dengan preferensi 2vw */

}

Itulas pembahasan mengenai rumus ukuran font. Dapat disimpulkan bahwa penerapan rumus ukuran font yang baik bisa menciptakan pengalaman responsif dan inklusif. Hal ini memastikan bahwa teks tetap mudah dibaca dan estetis di semua ukuran layar.

Oleh sebab itu, penting bagi UI/UX designer untuk memahami rumus ukuran font yang tepat. Untuk memperdalam pemahamanmu di UI/UX, MinDi mau rekomendasikan Bootcamp UIUX/Product Design. 

Program ini cocok buat kamu yang mau belajar UI/UX dari nol sampai mahir. Di sini, kamu bisa belajar konsep dasar, alat pendukung, hingga praktik dengan real-case project. Terlebih lagi, pembelajarannya didasari oleh silabus beginner-friendly.

Jadi, siapapun bisa belajar sampai ahli, karena kamu bakal dibimbing sampai jadi! Yuk, segera daftar dan mulai karir yang baik bersama Dibimbing.id!