Apakah perdebatan tentang em VS px VS% dalam tipografi masih valid

8

Saya telah membaca beberapa artikel tentang mengapa mereka lebih baik daripada px dalam tipografi. Dan basisnya harus dalam%, bahkan yang terbaik pun harus ada body{ font-size:62.5%; }.

Salah satu artikel terbaik yang bisa saya temukan ada di sini: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Pada dasarnya dikatakan bahwa px tidak skala baik pada situs web dan perangkat. Saya selalu melakukan tipografi di px, dan tidak pernah menemukan masalah. Saya juga telah bekerja dengan beberapa kerangka kerja CSS dan beberapa tema wordpress, dan saya selalu melihat bahwa hanya px normal yang digunakan.

Sekarang saya melihat bahwa sebagian besar artikel ditulis mereka sebagian besar dari beberapa tahun yang lalu, sekitar, saya ingin tahu apakah masih benar bahwa px tidak skala dengan baik, atau apakah ini bukan poin lagi untuk browser dan perangkat modern .

Di samping catatan. Saya bahkan telah membaca dan melihat di beberapa situs yang orang bahkan melangkah sejauh ini untuk melakukan semua styling mereka di mereka. Misalnya padding dan margin dilakukan di em's.

Apakah ini perlu jika Anda ingin memiliki situs web penskalaan yang bagus.

website-design typography Saif Bechan
sumber
2
Untuk membuat segalanya lebih membingungkan, sebagian besar browser modern mendukung ems atau rem relatif snook.ca/archives/html_and_css/font-size-with-rem .
paulmorriss
Ada jawaban yang lebih baru dan lebih baik tentang StackOverflow: stackoverflow.com/questions/11799236/…
Denis de Bernardy

Jawaban:

3

Jawaban saya, untuk teks itu sendiri adalah pasti "tidak". Peramban yang baik curang (sebagaimana mestinya) ketika menyangkut penskalaan font yang ditentukan dalam satuan piksel. Pengembang web harus dianggap agnostik terhadap setiap perbedaan dalam perangkat yang dijadikan konten.

Coba ini di editor Tryit w3Schools :

<html>
<body>
<p style="font-size:1em">This is a paragraph.</p>
<p style="font-size:12pt">This is a paragraph.</p>
<p style="font-size:16px">This is a paragraph.</p>
<p style="font-size:100%">This is a paragraph.</p>
</body>
</html>

Kemudian tahan Ctrl ke bawah dan gulir dengan roda mouse Anda, atau tekan Ctrl-Numeric +. Mereka semua harus skala secara merata di browser yang baik.

Tidak dijamin bahwa pikselnya setinggi setinggi, niter bahwa resolusinya selalu 96DPI, dan preferensi pengguna mungkin berlaku untuk menaikkan atau menurunkan semua konten. Mengingat hal itu, sebagian besar browser mempertimbangkan perbedaan resolusi ini dan mengukur skala output sesuai dengan perangkat keras / preferensi tertentu. Jika suatu peramban akan secara ketat menerapkan satuan piksel aktual, peramban (atau perangkat peranti keras yang digunakannya) akan ditakdirkan untuk dianggap sebagai kegagalan oleh pengguna akhir.

Karena itu, ingatlah bahwa HTML tidak dioptimalkan untuk penskalaan, tetapi untuk teks ulang mengalir ke rentang terluas rasio aspek resolusi yang mungkin (lebar dibagi dengan tinggi). Browser memiliki perbedaan dalam bantalan penskalaan dan margin ketika ditentukan dalam unit yang berbeda. Untuk desain yang benar-benar scalable (misalnya, di mana posisi pada latar belakang penting) orang harus mempertimbangkan menggunakan format scalable, tidak mengalir seperti SVG . Melakukan padding dan margin dalam persentase selalu berisiko!

Jika Anda menggunakan latar belakang gambar atau semacamnya, dan Anda ingin bantalan atau margin menjadi jumlah piksel tertentu ke dalam, saran saya adalah pastikan untuk menentukan margin dan bantalan dalam satuan piksel!

Louis Somers
sumber
1
Hanya sebuah catatan - fitur "Ukuran Teks" di IE tidak akan skala font yang secara eksplisit diperbaiki menggunakan ptatau px.
Zhaph - Ben Duguid