Apa itu Font Vertical Metrics?

Font vertical metrics mengacu pada pengaturan dan properti yang mempengaruhi penempatan, perataan, dan pengukuran vertikal karakter dalam suatu font. Beberapa istilah yang terkait dengan font vertical metrics meliputi:

1. Ascent (Kenaikan): Ascent adalah jarak vertikal maksimum dari baseline (garis dasar) hingga bagian atas karakter teratas dalam sebuah font. Ini termasuk bagian-bagian karakter yang melebihi batas dasar dari huruf-huruf seperti “b” atau “d”.

2. Descent (Turun): Descent adalah jarak vertikal maksimum dari baseline hingga bagian bawah karakter terendah dalam sebuah font. Ini mencakup bagian-bagian karakter yang melebihi batas atas dari huruf-huruf seperti “p” atau “q”.

3. Line gap (Jarak antar baris): Line gap adalah jarak vertikal tambahan antara dua baris teks berurutan. Ini memberikan ruang antara garis dasar baris atas dengan garis dasar baris bawah.

4. Line height (Tinggi baris): Line height adalah jumlah total ketinggian yang ditempati oleh satu baris teks, termasuk ascent, descent, dan line gap.

5. Cap height (Tinggi huruf besar): Cap height adalah ketinggian huruf besar dalam sebuah font. Ini mencakup huruf-huruf seperti “A”, “B”, atau “C” dalam font tersebut. Tinggi huruf besar dapat mempengaruhi keseluruhan estetika dan konsistensi dalam sebuah font.

6. X-height (Tinggi huruf kecil): X-height adalah ketinggian huruf kecil dalam sebuah font. Ini mencakup huruf-huruf seperti “x”, “a”, atau “e” dalam font tersebut. Tinggi huruf kecil juga dapat mempengaruhi estetika dan konsistensi dalam sebuah font.

Pentingnya Font Vertical Metrics

Vertical metrics pada font memiliki peran penting dalam menciptakan tampilan teks yang baik dalam desain grafis. Berikut adalah alasan mengapa font vertical metrics penting:

1. Legibilitas dan keterbacaan: Dengan mengatur dengan baik vertical metrics pada font, teks menjadi lebih mudah dibaca dan dipahami oleh pembaca. Ascent dan descent yang tepat memastikan tidak ada pemotongan karakter yang penting, sementara line gap memberikan ruang yang cukup antara baris untuk menghindari tumpang tindih dan membingungkan mata.

2. Konsistensi visual: Dalam sebuah desain yang menggunakan berbagai ukuran teks, penggunaan vertical metrics yang konsisten memastikan bahwa teks memiliki penempatan yang seragam dan terlihat seimbang. Hal ini membantu menciptakan estetika yang harmonis dan menyelaraskan elemen-elemen desain secara visual.

3. Pengaturan dan perataan: Dalam beberapa kasus, font vertical metrics juga mempengaruhi pengaturan dan perataan elemen-elemen desain lainnya, seperti ikon, gambar, atau kotak teks. Dengan memahami vertical metrics pada font yang digunakan, desainer dapat dengan tepat mengatur dan menyusun elemen-elemen tersebut agar sejajar dan simetris secara visual.

Vertical Metrics Harus Ditetapkan Secara Manual

Setiap font editor memiliki kalkulasi vertical metrics yang berbeda, hal tersebut akan menghasilkan output yang tidak konsisten pada setiap platform. Oleh karena itu vertical metrics harus ditetapkan secara manual, untuk lebih singkatnya kita akan merujuk ke 3 set metrik: Typo, Hhea, Win

1. Hhea: Digunakan oleh MacOS, Linux, Android
2. Win: Metrics spesifik untuk windows environment
3. Typo: Metrics spesifik untuk windows environment, jika parameter use_typo_metrics diaktifkan.

Jika use_typo_metrics diaktifkan, maka windows environment akan mengabaikan Win dan akan menggunakan Typo, tetapi tidak semua windows environment berperilaku seperti itu, beberapa legacy windows environment hanya bisa memproses Win. (lihat gambar di bawah)

Perhatikan Use Typo Metrics pada Custom Parameters

Setiap font dalam family harus memiliki nilai Hhea, Typo, dan Win metrics yang sama untuk menjaga konsistensi lintas platform.

Gambar di bawah adalah contoh menetapkan vertical metrics pada glyphsapp. Perlu dicatat jika nilai winDescent harus dikonversi menjadi nilai positif, ini merupakan persyaratan dari OpenType Specification.

Untuk menghindari clipping, nilai WinAscent dan WinDescent harus sama atau melebihi dari nilai yMin dan yMax. Contoh:

Line Height Calculator

Formula: ( Ascender + abs(Descender) ) / UPM = Line Height

Silahkan coba tools kami Line Height Calculator.

Real World Example

Di bawah ini merupakan beberapa contoh kasus vertical metrics yang sering ditemui di dunia nyata yang diambil dari kasus-kasus font open source. Tanpa bermaksud untuk merugikan pihak manapun silahkan pelajari mengenai libre font culture dan open source guide.

1. Freedom to use and run.
2. Freedom to study and edit.
3. Freedom to contribute.
4. Freedom to share, redistribute and redistribute modifications.

Variable font does not sit properly on baseline #26

Variable font does not sit on the baseline properly. This makes aligning font to any box not looking visually balanced.

There is more space “above” the font, than “below it” (above the cap, than below the descender).

So when for example I design a button using Mona Sans Variable, it looks like the button label is too low, and should be higher.

This issue is not present in normal fonts, it is only in the variable font.

Below there is a screenshot explaining this situation (I’m using Sketch for design) with a variable version of the font and not variable, and there are significant differences between them.

Contoh diatas merupakan font open source Mona Sans sebagai salah satu rilis kandidat di googlefonts.

Font isn’t vertically centered #28

This may be a Mobile (Android) only issue. Notice the empty space at the top of the text in the buttons in the screenshot above. Can confirm this isn’t an issue with other fonts. Do note that the empty space isn’t because of any paddings I have added to the TextView in Android. Happy to test and provide more information if necessary.

Contoh diatas merupakan Plus Jakarta Sans sebagai salah satu font open source di googlefonts.

Kesimpulan

Vertical metrics digunakan untuk menentukan ruang diantara dua baris teks. Beberapa metrik adalah spesifik untuk MacOs dan beberapa spesifik untuk Windows. Diskusi yang belum berakhir dan tidak terhitung jumlahnya, artikel ini memutuskan untuk memprioritaskan kompatibilitas lintas platform.

Font vertical metrics adalah aspek penting dalam penggunaan font dalam desain grafis. Dengan memahami aspek-aspek seperti ascent, descent, line gap, line height, cap height, dan x-height, desainer dapat mengoptimalkan penampilan dan legibilitas teks, menciptakan konsistensi visual, dan mengatur elemen-elemen desain secara efektif.

Dalam pemilihan dan penggunaan font, pastikan untuk mempertimbangkan vertical metrics agar teks terlihat baik dalam berbagai ukuran dan konteks desain. Dengan memanfaatkan font vertical metrics dengan bijak, Anda dapat menciptakan tampilan teks yang menarik, mudah dibaca, dan profesional dalam desain grafis Anda.

References

SIL | Line Metrics

John Hudson | Vertical Metrics

GF Guide | Metrics

Glyphs App | Vertical Metrics.