Menggunakan atribut font-size untuk menskalakan teks adalah salah satu aspek yang paling sulit gaya di CSS. CSS menawarkan empat unit untuk mengukur ukuran teks yang ditampilkan di browser web. Manakah dari empat unit berikut yang paling cocok untuk dokumen web? Masalah ini telah menimbulkan banyak diskusi dan kontroversi. Sulit untuk memberikan jawaban pasti atas pertanyaan seperti itu.

Mengenal unit-unitnya

Um ( em): em adalah unit scalable yang digunakan untuk dokumen web. Satu em sama dengan ukuran font saat ini. Misalnya, jika ukuran font dokumen adalah 12pt, maka 1em sama dengan 12pt. Karena em berskala, 2em sama dengan 24pt, .5em sama dengan 6pt, dan seterusnya. Karena skalabilitas dan kompatibilitasnya yang tinggi dengan perangkat seluler, em semakin banyak digunakan dalam dokumen web.

Piksel ( piksel): Piksel adalah satuan berukuran tetap yang digunakan untuk semua hal yang dapat dibaca layar komputer. Satu piksel sama dengan satu titik di layar komputer (ini adalah pembagian terkecil dari resolusi layar Anda). Banyak desainer web menggunakan piksel dalam dokumen web untuk memastikan bahwa situs web tampak sempurna saat ditampilkan di browser. Satu-satunya masalah adalah pikselnya tidak dapat diperbesar untuk mengakomodasi pembaca yang memiliki gangguan penglihatan atau diperkecil agar lebih mudah membaca perangkat seluler Oh.

Poin ( pt): Titik secara tradisional digunakan dalam media cetak (yaitu untuk apa pun yang dicetak di atas kertas). Satu titik sama dengan 1/72 inci. Titik sangat mirip dengan piksel yang dimilikinya ukuran tetap dan tidak dapat ditambah/dikurangi.

1. Persentase ( % ): Percent sangat mirip dengan em , kecuali ada beberapa perbedaan utama. Pertama, ukuran font saat ini adalah 100% (yaitu 12pt = 100%). Menggunakan unit Persentase memungkinkan Anda memperbesar/memperkecil teks agar lebih mudah dibaca.

Apa bedanya?

Perbedaan antara unit-unit ini mudah dipahami contoh spesifik. Begini cara mereka berhubungan satu sama lain: 1em = 12pt = 16px = 100%. Mari kita lihat apa yang terjadi ketika kita meningkatkan ukuran font utama (menggunakan pemilih body CSS) dari 100% menjadi 120%.

Seperti yang Anda lihat, Ems dan Persentase meningkat seiring bertambahnya ukuran font dasar, namun Piksel dan Titik tidak. Sangat mudah untuk menggunakan ukuran absolut untuk teks Anda, namun jauh lebih mudah untuk menggunakan teks skalabel yang ditampilkan pada perangkat apa pun. Oleh karena itu, lebih baik menggunakan satuan Em dan Persen untuk teks dokumen web.

EM atau Persentase?

Kami menemukan bahwa Point dan Pixel bukanlah unit terbaik untuk dokumen web. Jadi, yang tersisa hanyalah Em dan Persen. Secara teoritis, Em dan Persen adalah satuan yang sama, namun dalam praktiknya terdapat perbedaan kecil di antara keduanya yang tidak dapat diabaikan.

Pada contoh di atas, kami menggunakan satuan Persentase sebagai ukuran font dasar (untuk tag body). Jika Anda mengubah ukuran font dasar dari Percent ke Em (yaitu body ( font-size: 1em; )), Anda mungkin tidak akan melihat perbedaannya. Mari kita lihat apa yang terjadi ketika ukuran font untuk isi adalah 1em dan ketika klien mengubah pengaturan "Ukuran Teks" browser (pengaturan ini tersedia di beberapa browser, seperti Internet Explorer).

Ketika ukuran teks di browser klien diatur ke medium, tidak ada perbedaan antara Em dan Persen. Namun jika Anda mengubah pengaturan ini, perbedaannya akan cukup terlihat. Dengan pengaturan Terkecil, Ems jauh lebih kecil dibandingkan Persen. Dan dengan pengaturan “Terbesar”, yang terjadi adalah sebaliknya - Em jauh lebih besar daripada Persen. Bisa dibilang unit Em diskalakan sebagaimana mestinya, namun dalam praktiknya, teks tersebut diskalakan terlalu tajam dan pada beberapa perangkat, teks terkecil menjadi tidak dapat dibaca.

Kesimpulan

Secara teori, satuan Em merupakan standar baru untuk ukuran font pada dokumen web, namun dalam praktiknya ternyata satuan Persen lebih ramah pengguna. Saat berubah pengaturan klien teks yang menggunakan unit Persentase diskalakan dengan tepat, memungkinkan desainer mempertahankan keterbacaan, aksesibilitas, dan desain visual.

Pemenang: persentase (%).

Biasanya saat saya membuat desain baru kemudian untuk elemen body saya menggunakan persentase (body ( font-size: 62.5%; )) dan kemudian menggunakannya untuk menskalakan lebih jauh. Selama pengaturan isi disetel ke Persentase, Anda dapat menggunakan Persentase atau Em untuk aturan dan penyeleksi CSS lainnya dan tetap memanfaatkan manfaat penggunaan Persentase sebagai ukuran font utama Anda.

Selama beberapa tahun terakhir, praktik ini menjadi sangat umum dalam desain web.
Piksel kini digunakan sebagai satuan ukuran font yang valid (pengguna dapat menggunakan fitur "zoom" browser untuk membaca teks kecil). Namun, penggunaan piksel menjadi masalah karena perangkat seluler dengan layar dengan kepadatan piksel yang sangat tinggi (beberapa Perangkat Android dan iPhone memiliki kepadatan 200-300 piksel per inci, sehingga font 11 dan 12 piksel sulit dibaca). Jadi, saya terus menggunakan Persentase sebagai ukuran font utama untuk dokumen web.

Salah satu aspek yang paling membingungkan CSS adalah aplikasinya ukuran font atribut untuk penskalaan teks. Menggunakan CSS Anda dapat mengubah ukuran teks di browser menggunakan empat unit yang berbeda pengukuran. Manakah dari empat unit berikut yang terbaik untuk web? Pertanyaan inilah yang menimbulkan berbagai diskusi dan kritik. Sulit untuk menemukan jawaban pasti karena pertanyaannya sendiri rumit.

Temui unitnya

Jadi apa bedanya?

Mengubah ukuran Font dari 100% menjadi 120%.

Seperti yang Anda lihat, "em" dan "%" meningkatkan ukuran font, sedangkan "px" dan "pt" tidak. Menetapkan ukuran absolut untuk teks Anda mungkin mudah, namun jauh lebih baik bagi pengunjung Anda untuk menggunakan teks yang dapat diskalakan yang dapat ditampilkan pada perangkat atau mesin apa pun. Oleh karena itu, unit "em" dan "%" lebih baik digunakan untuk teks dokumen web.

"mereka" vs "%"

Pada contoh di atas, kami menggunakan persentase (dalam tag body) sebagai satuan ukuran font dasar. Jika Anda mengubah satuan ukuran font dasar dari "%" menjadi "em" (yaitu, isi (ukuran font: 1em;)), Anda, sebaiknya tidak memperhatikan perbedaannya. Mari kita lihat apa yang terjadi ketika "1em" adalah unit dasar kita, dan ketika klien mengubah "Ukuran Font" di pengaturan browser mereka (banyak browser, seperti Internet Explorer, memiliki opsi ini).

Ukuran font saat klien mengubah ukuran teks di browser.

Ketika ukuran teks browser klien disetel ke "medium", tidak ada perbedaan mencolok antara "em" dan "%". Namun jika parameternya diubah, perbedaannya menjadi sangat besar. Bila disetel ke “Terkecil”, “em” jauh lebih kecil dari “%”, dan bila disetel ke “Terbesar”, sebaliknya, “em” ditampilkan jauh lebih besar daripada “%”. Meskipun banyak yang berpendapat bahwa satuan dalam skala "em" sesuai dengan yang diharapkan, dalam praktiknya teks dalam skala "em" terlalu drastis, sehingga menyebabkan teks terkecil menjadi tidak terbaca di beberapa mesin.

Dakwaan

Pemenang: persen (%).

Saat bekerja dengan CSS, selalu ada saatnya Anda mulai menyadari betapa hebatnya alat ini atau itu. Meskipun saya memiliki pemahaman yang cukup baik tentang unit CSS em, saya baru benar-benar merasakan kekuatannya setelah membaca postingan Simurai. Pada artikel ini saya akan menggunakan pengalamannya.

Apa itu?

Dalam CSS, unit em sama dengan ukuran font saat ini dari elemen yang menerapkan em. Ketika unit em digunakan pada elemen anak yang tidak memilikinya ukuran tertentu font, mereka mewarisinya dari orang tuanya, sampai ke elemen dasar dokumen.

Lihat kode berikut CSS:

Contoh (ukuran font: 20 piksel; )

DI DALAM dalam hal ini 1em dari elemen ini atau anak-anaknya ( jika tidak ada definisi ukuran font lainnya) akan sama dengan 20px . Jadi jika kita menambahkan baris:

Contoh ( ukuran font: 20 piksel; radius batas: .5em; )

Nilai radius batas 5em akan sama dengan 10px (yaitu, 20 * 0.5 ). Juga:

Contoh ( ukuran font: 20px; radius batas: .5em; padding: 2em; )

Nilai padding 2em akan menjadi 40px (20 * 2 ). Seperti disebutkan, jenis penghitungan ini berlaku untuk elemen turunan apa pun kecuali elemen tersebut memiliki ukuran font yang ditentukan secara eksplisit. Kemudian nilai unit CSS em akan dihitung dengan cara serupa.

Jika CSS tidak menentukan ukuran font, maka em akan menjadi ukuran font default browser. Paling sering nilai ini adalah 16px. Mari kita lihat bagaimana Anda dapat menggunakan metode ini untuk mengubah ukuran elemen dengan mudah.

Mengubah Ukuran Tingkat Komponen

Konsep “komponen” cukup populer saat ini. Ini sangat cocok untuk modular metode CSS, dan juga untuk gagasan bagian kode yang dienkapsulasi secara umum. Dan saya membayangkan metode selanjutnya akan menjadi lebih menarik setelah komponen web mendapatkan dukungan luas.

Cara kerjanya seperti ini: menggunakan properti font-size, yang membuat unit dasar untuk berbagai elemen dalam modul. Karena unit em dihitung berdasarkan ukuran font elemen induk, hal ini membuat seluruh komponen mudah diedit dengan mengubah properti font-size elemen induk.

Mari kita lihat aksinya:

Lihat demo

Modul ini terdiri dari empat elemen utama. Pindahkan penggeser di bagian atas halaman demo untuk mengubah ukuran modul. Anda dapat melihatnya jika Anda mau V modus layar penuh . Penggeser berisi satu nilai untuk elemen akar komponen: nilai ukuran font.

Perlu diperhatikan bahwa pengaturan dimensi suatu komponen setelah satu properti CSS opsional, pengguna dapat mengubah ukuran di pengaturan. Hal ini dilakukan agar pengembang dapat dengan cepat melakukan perubahan tanpa melalui proses apa pun arti yang berbeda di seluruh bagian komponen.

Ketika ukuran font diubah, itu mempengaruhi semua nilai em CSS dari elemen induk, serta semua turunannya, membuat semua bagian komponen fleksibel secara proporsional.

Perhatikan bahwa:

• Di dalam komponen, semua dimensi ditentukan menggunakan em . Kecuali perbatasan luar dan gambar, yang dapat diubah jika diinginkan, tetapi saya puas dengan ukurannya, yang dalam hal ini statis;
• Ikon di sebelah kanan sudut atas, yang terlihat seperti tetesan air mata, adalah elemen semu yang juga menggunakan ukuran font elemen induknya;
• CSS juga menyertakan dua media queries yang menyesuaikan ukuran font elemen induk. Yang menunjukkan kegunaan metode ini, karena Anda tidak perlu mengubah semua ukuran di media queries, tetapi hanya ukuran font saja.

Beberapa komentar, kelalaian, dll..

Seperti yang dapat Anda lihat dari contoh, jenis pengubahan ukuran fleksibel ini tidak selalu harus Anda gunakan. Hal ini mungkin agak terbatas.

Anda mungkin perlu mengubah beberapa nilai unit em di CSS. Dan seperti batas elemen induk pada contoh, Anda mungkin tidak ingin mengubah ukurannya. Karena sifat tersebut berlaku untuk semua elemen. Anda dapat mengatasi masalah ini hanya dengan keluar dari elemen yang ingin Anda pertahankan.

Tidak perlu menggunakan piksel untuk mengatur ukuran font root. Anda dapat menggunakan em untuk ini, tapi ingat bahwa unit ini akan diturunkan dari orang tua.

Bagaimana dengan rem dan Sass?

Unit rem di CSS selalu mewarisi nilai ukuran font elemen root, berapa pun ukuran font yang dihitung. Dalam HTML, elemen root adalah . Dengan cara ini Anda dapat menggunakan rem. Namun ini berarti Anda harus mengontrol semua komponen pada halaman menggunakan ukuran font elemen tersebut. Ini mungkin berhasil pada beberapa proyek, tetapi menurut saya metode ini berfungsi paling baik saat mengubah ukuran komponen terpisah, bukan keseluruhan dokumen.

Mengenai penggunaan Praprosesor Sass, maka ini adalah masalah sekunder. Pada akhirnya, CSS akan menggunakan unit apa pun yang ditentukan dalam kode Sass, dan warisan akan bekerja dengan cara yang sama.

Kesimpulan

Saya percaya ini metode yang bagus untuk digunakan saat membuat kerangka CSS atau pustaka komponen. Metode ini secara meyakinkan membuktikan caranya sebuah alat yang ampuh adalah unit em di CSS.

Terjemahan artikel “Kekuatan Unit em dalam CSS” disiapkan oleh tim proyek yang ramah.

Salah satu aspek yang paling membingungkan CSS adalah aplikasinya ukuran font atribut untuk penskalaan teks. Dengan menggunakan CSS, Anda dapat mengubah ukuran teks di browser menggunakan empat unit pengukuran berbeda. Manakah dari empat unit berikut yang terbaik untuk web? Pertanyaan inilah yang menimbulkan berbagai diskusi dan kritik. Sulit untuk menemukan jawaban pasti karena pertanyaannya sendiri rumit.

Temui unitnya

Jadi apa bedanya?

Mengubah ukuran Font dari 100% menjadi 120%.

Seperti yang Anda lihat, "em" dan "%" meningkatkan ukuran font, sedangkan "px" dan "pt" tidak. Menetapkan ukuran absolut untuk teks Anda mungkin mudah, namun jauh lebih baik bagi pengunjung Anda untuk menggunakan teks yang dapat diskalakan yang dapat ditampilkan pada perangkat atau mesin apa pun. Oleh karena itu, unit "em" dan "%" lebih baik digunakan untuk teks dokumen web.

"mereka" vs "%"

Pada contoh di atas, kami menggunakan persentase (dalam tag body) sebagai satuan ukuran font dasar. Jika Anda mengubah satuan ukuran font dasar dari "%" menjadi "em" (yaitu, isi (ukuran font: 1em;)), Anda, sebaiknya tidak memperhatikan perbedaannya. Mari kita lihat apa yang terjadi ketika "1em" adalah unit dasar kita, dan ketika klien mengubah "Ukuran Font" di pengaturan browser mereka (banyak browser, seperti Internet Explorer, memiliki opsi ini).

Ukuran font saat klien mengubah ukuran teks di browser.

Ketika ukuran teks browser klien disetel ke "medium", tidak ada perbedaan mencolok antara "em" dan "%". Namun jika parameternya diubah, perbedaannya menjadi sangat besar. Bila disetel ke “Terkecil”, “em” jauh lebih kecil dari “%”, dan bila disetel ke “Terbesar”, sebaliknya, “em” ditampilkan jauh lebih besar daripada “%”. Meskipun banyak yang berpendapat bahwa satuan dalam skala "em" sesuai dengan yang diharapkan, dalam praktiknya teks dalam skala "em" terlalu drastis, sehingga menyebabkan teks terkecil menjadi tidak terbaca di beberapa mesin.

Dakwaan

Pemenang: persen (%).

Untuk mengatur ukuran berbagai elemen, CSS menggunakan satuan pengukuran absolut dan relatif. Satuan absolut tidak bergantung pada perangkat keluaran, tetapi satuan relatif menentukan ukuran suatu elemen relatif terhadap nilai ukuran lainnya.

Unit relatif

Unit relatif biasanya digunakan untuk bekerja dengan teks, atau saat Anda perlu menghitung persentase hubungan antar elemen. Dalam tabel 1 mencantumkan unit relatif utama.

Nilai variabel yang bergantung pada ukuran font elemen saat ini (ditetapkan melalui properti gaya ukuran font). Setiap browser memiliki ukuran teks bawaan yang digunakan ketika ukuran ini tidak ditentukan secara eksplisit. Oleh karena itu, awalnya 1em sama dengan ukuran font default yang disetel di browser. Oleh karena itu, saat mengatur ukuran teks untuk seluruh halaman di em, kami bekerja dengan parameter ini. Ketika em digunakan untuk elemen tertentu, 1em adalah ukuran font induknya.

ex didefinisikan sebagai tinggi karakter huruf kecil "x". ex tunduk pada aturan yang sama seperti em , yaitu terikat pada ukuran font default browser atau ukuran font elemen induknya.

Piksel adalah titik dasar yang ditampilkan oleh monitor atau lainnya perangkat serupa, misalnya ponsel pintar. Ukuran piksel bergantung pada resolusi perangkat dan karakteristik teknisnya.

Contoh 1 menunjukkan penggunaan satuan-satuan ini.

Contoh 1: Menggunakan satuan relatif

Ukuran 2 em

Ukuran 2 mis

Ukuran 30 piksel

Ukuran 200%

Hasil contoh ini ditunjukkan di bawah ini (Gambar 1).

Beras. 1. Ukuran teks pada unit yang berbeda

Satuan mutlak

Unit absolut lebih jarang digunakan dibandingkan unit relatif dan, biasanya, saat bekerja dengan teks. Dalam tabel 2 mencantumkan unit-unit utama tersebut.

Mungkin satuan yang paling umum adalah titik, yang digunakan untuk menunjukkan ukuran font. Banyak orang yang terbiasa mengatur ukuran font di editor teks, misalnya 12. Namun mereka tidak mengerti apa arti angka tersebut. Jadi inilah poinnya, itu asli. Tentu saja, mereka bukan milik kita, kita terbiasa mengukur segala sesuatu dalam milimeter dan satuan serupa, tetapi intinya mungkin satu-satunya nilai dari sistem pengukuran non-metrik yang digunakan di mana pun di negara kita. Dan semuanya terima kasih editor teks Dan sistem penerbitan

. Contoh 2 menunjukkan penggunaan titik dan satuan lainnya. Contoh 2: Penggunaan

satuan absolut

Ukuran 0,5 inci

Ukuran 8 mm

Ukuran 24 poin

Hasil penggunaan satuan pengukuran absolut ditunjukkan di bawah ini (Gbr. 2).