Advertisement
  1. Web Design
  2. Typography

Mengambil Ems Lebih Jauh

Scroll to top
Read Time: 7 min
This post is part of a series called A-Z of Web Typography.
A Web Designer's Typographic Boilerplate
Figuring Out @font-face

Indonesian (Bahasa Indonesia) translation by Septriansyah Rehan (you can also view the original English article)

Baru-baru ini saya menulis tentang ems; apa mereka, bagaimana mereka digunakan dan beberapa potongan-potongan yang perlu diingat ketika Anda menerapkannya sendiri. Saya hanya menggaruk permukaan, dan utas komentar melemparkan dua kali lebih banyak pertanyaan sebagai artikel menjawab! Dalam tindak lanjut ini saya akan mengambil langkah lebih jauh, melihat mereka lebih detail.

taking-ems-even-further-Etaking-ems-even-further-Etaking-ems-even-further-E

E pada Dribbble 

Catatan: Artikel sebelumnya mencakup semua dasar-dasarnya. Saya sarankan Anda membaca tentang mereka sebelum melangkah lebih jauh.


Nilai Pengukuran Tanpa Unit

Subjek pengukuran tanpa unit (yaitu: nilai tanpa piksel, persentase, em, yard, depa..) ditawarkan oleh beberapa orang terakhir kali, terutama karena saya mendorong penggunaan ems untuk menentukan line-height.

Ems sangat masuk akal dalam hal ini karena relatif terhadap font-size. Jika teks yang dipermasalahkan tumbuh atau menyusut, demikian juga garis-tingginya jika diset dalam ems. Unit absolut, seperti piksel, akan benar-benar mengacaukan segalanya. Hal yang sama berlaku untuk letter-spacing, contoh lain dari dimensi yang harus selalu relatif terhadap ukuran font.

taking-ems-even-further-lineheighttaking-ems-even-further-lineheighttaking-ems-even-further-lineheight

Namun, kita dapat memperbaiki ini. Ems mempersulit hal-hal ketika nilai-nilai mereka mengalir; elemen mewarisi nilai em induk mereka. Ambil pengaturan ini misalnya: artikel yang berisi paragraf:

taking-ems-even-further-article-1taking-ems-even-further-article-1taking-ems-even-further-article-1

Jika kita menerapkan tinggi baris ke artikel, itu juga akan diwarisi oleh paragraf, yang bagus:

taking-ems-even-further-article-2taking-ems-even-further-article-2taking-ems-even-further-article-2

Tetapi apa yang sebenarnya diwariskan paragraf adalah nilai yang dihitung (dalam hal ini efektif 24px), sehingga tinggi garis relatif terhadap ukuran font artikel, bukan miliknya sendiri. Jika kita menambah ukuran font paragraf menjadi setara dengan 20px:

taking-ems-even-further-article-3taking-ems-even-further-article-3taking-ems-even-further-article-3

maka ketinggian garisnya tetap pada 24px. Idealnya, kita ingin ketinggian garisnya muncul 1.5 * 20 = 30px.

Di sinilah pengukuran tanpa unit masuk. Dengan menghapus unit em dari tinggi baris artikel:

taking-ems-even-further-article-4taking-ems-even-further-article-4taking-ems-even-further-article-4

paragraf akan mewarisi nilai unitless, 1.5. Ketinggian paragraf sekarang relatif terhadap ukuran font-nya sendiri, bingo!

Pena ini akan membantu Anda..


Menariknya, ini tidak berlaku untuk letter-spacing. Dan Anda dapat sepenuhnya melupakan margin, teks-indent, hal semacam itu.

Jika Anda tertarik untuk membaca lebih lanjut tentang topik ini, Eric Meyer membahasnya dengan kuat pada tahun 2006, ditambah Harry Roberts memiliki tinjauan luas unit pengukuran dari beberapa tahun yang lalu.


EMS dan Macrotypography

Sedangkan microtypography mengacu pada detail kecil dalam dokumen (tanda baca, ligatur, tanda hubung, kerning, dan sebagainya) macrotypography menangani semua hal "besar". Pikirkan tentang semua aspek tipografi yang membuat tubuh teks dapat dibaca; spasi putih, panjang garis (ukur), lekukan paragraf, dll.

Lihatlah pengaturan kolom cairan ini:

taking-ems-even-further-columns-basetaking-ems-even-further-columns-basetaking-ems-even-further-columns-base

Layout yang sangat baik; dua div, masing-masing tepat 50% lebar, dengan beberapa padding kiri dan kanan untuk membentuk talang (di dalam setiap div, dengan asumsi * { box-sizing: border-box } sedang digunakan). Biasanya, Anda akan tergoda untuk menentukan bantalan menggunakan piksel, atau (bahkan lebih baik) persentase, jika Anda merasa sangat fleksibel.

Namun, piksel dan persentase keduanya akan memiliki efek yang merugikan pada keterbacaan konten, jika (ketika) ukuran font diubah. Lebar selokan, seperti halnya spasi putih pada umumnya, harus benar-benar berukuran relatif terhadap teks. Dalam contoh ini, kita memiliki dua kolom teks, dengan talang air diterapkan sebagai persentase dari lebar kolom, seperti yang dijelaskan di atas:

taking-ems-even-further-columns-1taking-ems-even-further-columns-1taking-ems-even-further-columns-1

Ini adalah demo langsung, lihat dan mainkan sendiri..

Namun, ketika Anda mengubah ukuran font, Anda akan melihat selokan menjadi relatif lebih sempit, mengaburkan pembagian antara kolom teks dan membuatnya lebih sulit untuk dibaca.

taking-ems-even-further-columns-3taking-ems-even-further-columns-3taking-ems-even-further-columns-3

Ini adalah contoh ekstrem, dengan teks besar bukan kepalang untuk lebar kolom, tetapi menggambarkan intinya..

Jauh lebih baik untuk mendefinisikan padding menggunakan ems:

Dengan cara ini, selokan tumbuh dan menyusut bersama dengan teks, menjaga jarak antara kolom dan menjaga hal-hal yang mudah dibaca.

taking-ems-even-further-columns-2taking-ems-even-further-columns-2taking-ems-even-further-columns-2

Coba mainkan dengan yang ini..

Setup Ol' 62.5%

Jika Anda belum menggunakan ems, mungkin salah satu dari dua hal yang tidak Anda sukai tentang mereka; fakta bahwa nilai-nilai mereka mengalir, atau harus menghitung nilai-nilai itu di tempat pertama.

Pendekatan 62.5% (pertama kali diusulkan oleh Richard Rutter pada 2004) akan membantu Anda untuk yang kedua. Sederhananya, alih-alih mengatur ukuran font dasar menjadi 100% (yang dianggap 16px), kita menetapkannya menjadi 62.5%, efektif 10px.

Dari titik itu, 1em = 10px. Karena itu:

Ems Pixel yang setara
0.5em 5px
... ...
1.1em 11px
1.2em 12px
1.3em 13px
1.4em 14px
... ...
47.3em 473px

dan seterusnya, yang seharusnya menghilangkan beberapa aritmatika mental. Namun, ada masalah kecil dengan pendekatan ini, dan itu semua ada hubungannya dengan...


Pertanyaan Media Berbasis Em

Kita akan berbicara sedikit tentang peringatan 62.5% dalam beberapa saat, tetapi pertama-tama kita perlu meletakkan beberapa yayasan.

Dalam bentuknya yang paling sederhana, pertanyaan media membantu kita menerapkan aturan CSS dalam keadaan yang berbeda, umumnya tergantung pada ukuran layar. Resolusi layar diukur dalam piksel, jadi masuk akal jika kita mendefinisikan pertanyaan media dengan cara yang sama:

Mari terapkan ini pada demo kita sebelumnya, untuk membagi kolom setelah titik tertentu.

taking-ems-even-further-media-querytaking-ems-even-further-media-querytaking-ems-even-further-media-query

Dalam pendekatan pertama seluler ini, kolom kita dibagi begitu viewport mencapai 600px

Angka sewenang-wenang 600px kebetulan baik-baik saja dalam kasus ini; panjang garis optimal (atau ukuran) adalah topik yang sangat diperdebatkan, tetapi seperti yang dikatakan Robert Bringhurst:

Apa pun dari 45 hingga 75 karakter secara luas dianggap sebagai panjang baris yang memuaskan untuk halaman satu kolom yang diatur dalam wajah teks serif dalam ukuran teks. Garis 66 karakter (menghitung huruf dan spasi) secara luas dianggap ideal.

Robert Brighurst - Unsur-unsur Gaya Tipografi

Dalam demo kita, pada ukuran font 1em, ukurannya sekarang mencapai sekitar 70 karakter sebelum dipecah menjadi dua kolom.

taking-ems-even-further-mq-singletaking-ems-even-further-mq-singletaking-ems-even-further-mq-single
taking-ems-even-further-mq-doubletaking-ems-even-further-mq-doubletaking-ems-even-further-mq-double

Setelah menekan dua kolom, ukurannya mungkin sedikit lebih sempit dari yang diinginkan, tetapi kolom ini benar-benar oke untuk keperluan demo ini. Namun, masalah muncul ketika kita mengubah ukuran font browser kita (tekan command +).

taking-ems-even-further-mq-double-bigtaking-ems-even-further-mq-double-bigtaking-ems-even-further-mq-double-big

Dengan ukuran font yang ditingkatkan menjadi "Sangat Besar" (Saya menggunakan Chrome) ukuran kolom kita terlalu sempit, membuat kontennya tidak terbaca. Karena alasan ini, kita juga harus mempertimbangkan untuk membuat pertanyaan media kita relatif terhadap ukuran font.

Ingat rumus dari artikel kami sebelumnya?

demystifying-ems-equation-2demystifying-ems-equation-2demystifying-ems-equation-2

Kita bertujuan untuk 600px, dari ukuran font yang diwarisi 16px. 600/16 = 37.5em, jadi mari kita ubah petanyaan media untuk mencerminkan bahwa:

taking-ems-even-further-media-query-emstaking-ems-even-further-media-query-emstaking-ems-even-further-media-query-ems

Sekarang, ketika pengaturan ukuran font peramban kita diubah, kita melihat perbedaan dalam cara pertanyaan media berperilaku. Dengan teks yang lebih besar, inilah pertanyaan media berbasis piksel, dengan viewport yang ditetapkan sekitar 630px lebar:

taking-ems-even-further-media-query-pixel-basedtaking-ems-even-further-media-query-pixel-basedtaking-ems-even-further-media-query-pixel-based

Sedangkan, pada lebar layar itu, pertanyaan media berbasis em membuat semuanya rapi dalam satu kolom; bagus dan enak dibaca.

taking-ems-even-further-media-query-em-basedtaking-ems-even-further-media-query-em-basedtaking-ems-even-further-media-query-em-based

Perbesar/perkecil dan saksikan permintaan media mulai berlaku

Kembali ke hal 62.5%

Inilah krisisnya; pertanyaan media berbasis em benar-benar tidak tertarik dalam ukuran apa pun pada html, body, atau apa pun; mereka relatif terhadap ukuran font browser. Ini berarti bahwa, dengan mengatur ukuran font dasar ke hal lain selain 100%, Anda harus mengelola dua skala nilai em.

Bekerja dari basis 100% dan semuanya akan dimulai dari level playing field. Selain itu, seperti pendapat Filament Group, bekerja dengan cara ini menjauhkan Anda dari berpikir dalam piksel, yang merupakan hal yang baik.


Ems, Rems, Fungsi dan Mixin

Satu kata muncul lebih dari yang lain di utas komentar dari artikel sebelumnya; mixin. Jika Anda kesulitan untuk melakukan perhitungan, lalu mengapa tidak membiarkan preprocessor CSS melakukan pekerjaan berat untuk Anda?

Dengan preprocessor CSS, seperti Sass, LESS dan Stylus, Anda dapat menentukan mixin dan fungsi. Ini menerima parameter, lalu menghitung dan menghasilkan nilai CSS untuk Anda.

Catatan: Jika Anda baru mengenal konsep ini, lihatlah Mastering Sass: Pelajaran 2 di mana Jeffrey memperkenalkan Sass mixin.

Mixin dan fungsi dapat menangani semua jenis hal untuk Anda, termasuk matematika yang merepotkan di sekitar mereka.

Ambil contoh sederhana ini dari Garrett Winder di Erskine. Dia mulai mendefinisikan fungsi (disebut "em") yang menerima dua nilai (seperti rumus kita sebelumnya) meskipun nilai konteks memiliki default 16, jadi tidak perlu ditentukan lagi kecuali diperlukan.

taking-ems-even-further-mixin-basetaking-ems-even-further-mixin-basetaking-ems-even-further-mixin-base

Kita kemudian dapat menggunakan fungsi "em" itu dalam CSS setelahnya, memintanya untuk menghitung setara dengan 30px:

taking-ems-even-further-mixin-usetaking-ems-even-further-mixin-usetaking-ems-even-further-mixin-use

Yang, ketika dikompilasi, menghasilkan CSS dalam bentuk raw:

taking-ems-even-further-mixin-resulttaking-ems-even-further-mixin-resulttaking-ems-even-further-mixin-result

Dan ini bukan satu-satunya contoh dari jenisnya - ribuan developers front-end telah memotong gigi preprocessing mereka dengan menulis mixin mereka sendiri. Rems juga; dengan memasukkan nilai piksel yang diinginkan dalam mixin ini yang ditampilkan oleh Chris Coyier, Anda dapat dengan mudah membuat output yang dihasilkan, dengan piksel fallback.

taking-ems-even-further-mixin-rem-basetaking-ems-even-further-mixin-rem-basetaking-ems-even-further-mixin-rem-base

Berikut adalah mixin.
taking-ems-even-further-mixin-rem-usetaking-ems-even-further-mixin-rem-usetaking-ems-even-further-mixin-rem-use

Berikut ini adalah penggunaan.
taking-ems-even-further-mixin-rem-resulttaking-ems-even-further-mixin-rem-resulttaking-ems-even-further-mixin-rem-result

Inilah hasilnya.

Daftar ini hampir tidak ada habisnya, tetapi jika Anda memiliki mixin yang ingin digunakan dalam pekerjaan Anda sendiri (untuk menghasilkan em dan rem) beri tahu saya di komentar dan saya akan menambahkannya di sini:

Sass

Less

Stylus


Kesimpulan

Ini adalah subjek yang luas, jelas ada banyak hal yang harus diperhatikan, tetapi terjun ke dunia ems adalah salah satu tantangan yang lebih memuaskan dalam pengembangan web front-end. Hentikan berpikir piksel dan mulai berpikir relatif, hari ini!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.