it-swarm.asia

Apakah ada ukuran font yang optimal?

Untuk sebagian besar proyek situs web yang pernah saya ikuti, ukuran font untuk teks massal biasanya 12px - 13px, tapi saya ingin tahu apakah ini ukuran yang bagus. Saya ingat pernah membaca sebuah artikel yang mengatakan bahwa ukuran font pada situs web harus jauh lebih besar, sekitar 17px untuk teks massal agar sesuai dengan ukuran font yang dicetak.

Apakah ada ukuran font yang optimal. Kapan sesuatu terlalu besar/kecil untuk pengguna rata-rata?

Apakah ada pro/kontra untuk ukuran font kecil/sedang/besar?

Perbarui:
Saya ingin mendapatkan pengalaman Anda dengan reaksi pengguna yang sebenarnya, tes, dll. Mudah untuk ini, ini dan itu terlalu besar atau kecil, tetapi saya telah belajar bahwa pengguna terkadang terkejut dan bereaksi secara berbeda dari pendapat ahli .

Juga kemampuan untuk mengubah ukuran font adalah diskusi yang bagus, tetapi bukan itu yang diminta di sini. Yang saya tertarik ketahui lebih lanjut, adalah bagaimana pengguna bereaksi terhadap ukuran font yang berbeda, bukan bagaimana mereka seharusnya dapat mengubahnya.

56
googletorp

Ini adalah topik yang banyak diperdebatkan. Salah satu cara terbaik yang pernah saya lihat menjelaskan ini adalah dari presentasi Desain untuk pengembang: membuat frontends Anda kurang oleh Idan Gazit.

Ini memiliki slide berikut: alt text Ini adalah teks 16px pada layar normal dan teks 12pt dalam sebuah buku. Pesannya adalah bahwa 12pt sangat baik untuk buku, tetapi juga biasanya dipegang lebih dekat dengan pembaca daripada layar. Memperhatikan jarak, 16px pada layar dan 12pt dalam buku tampak berukuran sama. 12pt di atas kertas = 16px di layar

Ada segala macam pengecualian, di mana teks yang lebih kecil lebih disukai. Tetapi untuk keterbacaan optimal dari teks yang lebih panjang, saya setuju dengan 16px.

Disarankan untuk mengubah unit yang dapat diukur seperti em atau % daripada unit ukuran tetap seperti pt atau px. Baca selengkapnya: kuran Huruf CSS: em vs px vs pt vs persen

34
user745

Tidak ada yang namanya ukuran font yang optimal. Mencari satu berarti Anda melupakan sesuatu yang penting: keterbacaan teks bukan hanya produk ukuran.

Saya telah membangun sekitar selusin situs web sebagai perancang UI dalam lima tahun terakhir, dan mereka semua memiliki audiens yang berbeda. Salah satu hal yang saya temukan adalah ukuran bukan faktor terbesar. Ini kombinasi dari berbagai aspek terkait dengan menampilkan teks:

  • kontras
  • keluarga font
  • tinggi garis
  • posisi pada halaman

Menggabungkan arahan ini ke metrik kasar untuk keterbacaan keseluruhan dan saya telah menemukan bahwa menjadi target desain terpenting untuk teks.

Sebagai anekdot dari pengujian (karena Anda bertanya): Saya bekerja di situs komunitas dengan 700 ribu kunjungan bulanan di mana audiens utamanya adalah pengguna yang tidak mengerti komputer. Kami menggunakan 12px Verdana untuk tipe tubuh dan 14px-16px Arial untuk judul. Kadang-kadang kita akan turun ke 11px Verdana berwarna abu-abu untuk teks yang kurang penting. Saat melakukan pengujian kegunaan di situs, kami menerima umpan balik bukan tentang ukuran teks, tetapi tentang bagaimana warna di sekeliling desain membuatnya terasa seperti Anda menatap lampu. Kami menafsirkan ini sebagai situs yang terlalu cerah dan menyesuaikan kontras seluruh desain menjadi kurang cerah. Sebagian karena perubahan ini dan sebagian karena perubahan dalam struktur navigasi, kami melihat peningkatan tayangan laman per bulan yang signifikan per pengunjung.

Satu hal yang perlu diingat tentang ukuran font kecil adalah bahwa mereka memiliki tujuan: ketika Anda membutuhkan sesuatu yang lebih kecil daripada yang lain (ya!). Tetapi sebagai perancang UI, penting untuk diingat bahwa tugas Anda adalah menciptakan kejelasan dan kegunaan (antara lain) di antarmuka, dan bahwa dengan tidak menekankan beberapa elemen UI Anda dapat meningkatkan kegunaannya. Terserah Anda untuk memutuskan elemen mana yang harus diperkecil, dan aspek teks mana yang harus dimodifikasi (dari daftar saya di atas).

20
Rahul

12px tampaknya berfungsi baik untuk kebanyakan orang. Memiliki sesuatu di 17px membuatnya lebih sulit untuk dibaca, dan juga memiliki di bawah 10px. Saya pikir 12-13px adalah pedoman yang bagus.

Tapi sungguh, Anda harus mengatur ukuran teks Anda menjadi sesuatu seperti 1em. Ini karena beberapa browser tidak akan memungkinkan pengguna untuk mengubah ukuran teks jika diatur dalam piksel. Apa pun ukuran teks yang Anda miliki, orang-orang dengan mata yang tajam akan membuatnya lebih kecil sehingga mereka dapat membaca lebih banyak, dan orang-orang dengan penglihatan yang buruk akan membuat teks lebih besar.

Atur saja semuanya pada 1em, dan biarkan orang dan browser mereka menyelesaikan sisanya.

Baik untuk menguji halaman Anda dengan ukuran font yang berbeda, untuk melihat apakah tata letak tetap dapat dikelola.

9
Vincent McNabb

Menurut bukti ilmiah terbaru:

  • Poin 18 dan 22 akan menghasilkan keterbacaan objektif yang meningkat secara signifikan (diukur dengan pelacak mata)
  • 10 dan 12 poin akan menyebabkan gangguan pemahaman yang signifikan (diukur dengan pertanyaan pemahaman)
  • semakin besar semakin baik, karena keterbacaan objektif terus meningkat dengan meningkatnya ukuran font.

Jangan mengambil kata-kata saya untuk itu. Baca detailnya di makalah ilmiah .

7
Martin

Ukuran font optimal adalah individual dan diatur oleh OS/browser pengguna. Jadi jangan ubah.

Jika Anda perlu memperbesar font (mis. Judul), lakukan dengan relatif (mis. 200% atau 2em).

Jangan pernah mengecilkan ukuran font dan selalu menjaga kontras yang baik untuk menjaga keterbacaan.

5
George Pavelka

Tidak.
... tidak dalam px.

Unit yang tepat untuk mengekspresikan ukuran optimal, jika ada, adalah sudut yang diungkit pada retina.

Jika Anda melihat px, Anda hanya melihat satu dari tiga faktor yang diperlukan untuk menentukan keterbacaan1:

Dot pitch, atau definisi "resolusi" (piksel/jarak) yang tepat, adalah cara Anda mengonversi dari px ke jarak yang sebenarnya.

Jarak baca yang Anda butuhkan, tentu saja, karena karakter dengan dimensi yang sama tidak dapat dibaca di mana-mana.

... dan tentu saja keterbacaan meningkat dengan:

  • px lebih tinggi
  • dot pitch lebih tinggi (atau resolusi lebih rendah)
  • jarak baca yang lebih rendah

1Ada juga warna teks, warna latar belakang, font, dll. (Teks tebal yang hitam putih membutuhkan ukuran yang lebih kecil daripada teks yang dicetak miring yang berwarna kuning pada oranye), tetapi px, dot pitch, dan jarak baca mencakup apa Anda memerlukan keputusan hanya berdasarkan dimensi.

3
A.M.

Anda sebaiknya tidak mencoba mengatur ukuran font. Anda dapat menggunakan + N untuk menunjukkan "buat ini lebih besar dari garis dasar" (atau -N untuk membuatnya lebih kecil). Ukuran apa pun yang Anda tentukan akan salah dalam beberapa keadaan; satu-satunya opsi yang bisa diterapkan yang tidak mengharuskan pengguna untuk mengambil tindakan korektif di situs Anda adalah membiarkan browser memutuskan.

2
Monica Cellio

Anda harus tidak pernah menggunakan piksel untuk ukuran font. Mencoba membaca font 14px pada layar 12 "yang mendukung resolusi Full HD akan memberi Anda teks dalam karakter setinggi 1-2 mm (dan sakit kepala dalam waktu kurang dari satu jam).

2
JanC

12px baik-baik saja, tetapi yang juga penting adalah bahwa pengguna memiliki kemampuan untuk meningkatkan ukuran font sendiri dan bahwa situs Anda tidak rusak ketika ini terjadi.

2
Ryan Shripat

Ada beberapa posting aneh dan kesalahpahaman di utas ini. Tampaknya banyak orang ingin mengabaikan ilmu pengetahuan dan aspek-aspek yang diteliti dari cara kita membaca dan memahami teks. Seperti yang terjadi, saya sedang dalam proses meneliti standar baru tentang hal ini, jadi inilah sedikit keadaan terkini:

Ilmu Seni

Penelitian yang ada telah menetapkan bahwa kecepatan membaca optimal untuk individu yang terlihat secara normal, dengan font pada kontras maksimum, adalah tinggi x antara 0,2 ° dan 2 ° sudut visual. Tinggi-X adalah ukuran vertikal aktual dari huruf kecil x font. Jelas ukuran font yang sebenarnya akan bervariasi berdasarkan jarak menonton, tetapi untungnya piksel referensi CSS - px - didasarkan pada sudut visual. Sudut visual 0,2 ° dikenal sebagai ukuran cetak kritis, karena itulah titik di mana kecepatan membaca maksimum dicapai. (Di atas 2 °, turun kembali.)

Satu px adalah 0,0213 derajat atau busur 1,278 menit. Ini didasarkan pada perangkat dengan kerapatan piksel 96dpi @ jarak 28 inci. Produsen perangkat dapat menggunakan px referensi untuk mengatur ukuran berdasarkan jarak visual yang diinginkan/diharapkan. Ini dibahas pada standar CSS W3C. Pabrikan perangkat menggunakan px referensi untuk mengatur ukuran rasterisasi aktual berdasarkan jarak pandang yang diinginkan. 16px tidak harus 16 piksel perangkat. Pada iPhone dengan rasio 2: 1 piksel, misalnya 32 perangkat.

Dengan demikian, ukuran cetak kritis untuk web adalah x-tinggi 9,4px. Bergantung pada desain font spesifik, ini berkaitan dengan font antara 17px hingga 20px. Ini menghasilkan standar aksesibilitas yang menunjukkan bahwa 18px adalah ukuran font minimum yang diinginkan.

Tapi Tunggu, Masih Ada Lagi

Ada juga level kritis kontras. Ukuran font yang disebutkan di atas berhubungan dengan kontras maksimum. Tapi bagaimana dengan kontras yang lebih rendah? Banyak desainer yang secara serius memengaruhi keterbacaan situs mereka dengan menggunakan warna kontras yang lebih rendah. Bagian dari ini adalah karena kegagalan WCAG 2.0 dalam menentukan kontras yang benar relatif terhadap frekuensi spasial. 4.5: 1 lebih dari yang dibutuhkan untuk tajuk besar yang gemuk, tetapi 4.5: 1 tidak cukup untuk teks tubuh kurus kecil.

Untuk penglihatan normal, kontras kritis bisa serendah 10% untuk tajuk besar lemak di puncak fungsi sensitivitas kontras. Tetapi pada frekuensi spasial yang sangat tinggi dari font tipis kecil, kontras harus 20+ kali lebih tinggi. Lihat diagram berikut, di mana semua teks berada dalam warna CSS yang sama (dan ini bahkan tidak membahas cara antialiasing teks mangles kontras di luar semua pengakuan).

contrast sensitivity curve sowing relation to text size

Dengan demikian, ukuran font serta kontras dan sejumlah fitur desain lainnya bekerja bersama menyediakan teks "yang paling mudah dibaca". Apapun, ukuran font 12px yang direkomendasikan oleh banyak poster di utas ini terlalu kecil, dan di mana mereka menemukan angka itu adalah dugaan siapa pun. Anda dapat menggunakan sesuatu seperti 12px untuk pemberitahuan hak cipta atau sesuatu yang Anda tidak ingin orang lain baca, tetapi 12px sama sekali bukan ukuran yang sesuai untuk teks konten.

Mesin Terbang Memilikinya

Rekomendasi resmi adalah ukuran minimum 18px, namun beberapa font seperti Verdana (font yang dirancang untuk penggunaan web) dapat bekerja hingga 16px. Tetapi Times New Roman tidak boleh ditetapkan kurang dari 18px karena memiliki tinggi x yang sangat kecil, dan keterbacaan yang umumnya buruk (terima kasih Microsoft, ugh). Untuk font lain yang rusak oleh Microsoft, mari kita coba untuk tidak pernah menggunakan "Courier New", di mana Microsoft mengambil apa yang merupakan font monospace yang umumnya dapat dibaca dan kemudian membuatnya terlalu tipis dan ringan. Seperti, apa yang mereka pikirkan?

Untuk beberapa pertimbangan umum tentang pilihan font untuk aksesibilitas dan keterbacaan, saya memiliki pendahuluan PDF pada akun gerbang penelitian saya yang dapat Anda unduh secara gratis: https: //www.researchgate. net/publikasi/336679010_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability

Komentar Penutup Paling Penting

Lebih penting daripada apa yang Anda tetapkan sebagai ukuran font, adalah bahwa Anda mengizinkan pengguna untuk ZOOM teks ke ukuran apa pun yang mereka inginkan tanpa merusak konten. Standar saat ini menentukan zoom 200% tanpa putus, tetapi itu tidak cukup. 500% jauh lebih masuk akal dari perspektif pengguna.

MEMPERTIMBANGKAN:

20/20 adalah visi rata-rata. Ukuran font yang saya sebutkan di atas (18px) didasarkan pada rata-rata pengguna 20/20 ini. 20/40 membutuhkan DUA KALI yang berukuran untuk persepsi yang sama. 20/200 pengguna membutuhkan SEPULUH KALI yang ukurannya (mis. Mereka mungkin ingin memperbesar 1000%). Saya menyebutkan 500% sebagai minimum karena mempertimbangkan implikasi dari fakta bahwa halaman tersebut memiliki font yang lebih besar serta ukuran fisik perangkat.

Sebuah teknologi yang hilang yang sedang dalam penelitian saat ini adalah memperbesar font yang paling kecil tetapi memperbesar font yang lebih besar lebih sedikit, sehingga tajuk berita besar tidak menjadi terlalu besar untuk dibaca.

Sementara itu, pertimbangkan saja bahwa sebagian besar orang yang membaca situs Anda tidak memiliki monitor sebagus monitor Anda, dan tidak memiliki penglihatan sebagus milik Anda. Jika Anda ingin dan mengetahui bagaimana situs Anda dapat dilihat oleh beberapa orang yang kurang beruntung, dapatkan monitor murah, bermutu rendah, kecil, res rendah (Anda mungkin memilikinya dalam penyimpanan), dan atur 3 sampai 4 kaki jauhnya (yaitu lebih dari satu meter jauhnya). Bisakah Anda membaca situs Anda? Sekarang perbesar teks — apakah situs Anda pecah karena batas-batas monitor kecil?

Ini adalah jenis masalah yang dimiliki banyak pengguna dengan banyak situs. Hanya karena Anda memiliki penglihatan 20/15 dan tampilan retina 32 "yang indah tidak berarti pengguna Anda memiliki tingkat akomodasi visual yang hampir sama.

-Andy

0
Myndex

Saya setuju dengan Erik, 16pt tampaknya menjadi standar terbaik sejauh keterbacaan berjalan . Baca lebih lanjut di sini: http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/

0
Matt Rockwell