Kenyamanan Membaca di Layar Monitor
Senin, 14 Maret 2005M
04 Safar 1426H
- International phone card
- Baufinanzierung
- Tracking System
- Valentines flowers delivered to your loved one door. Send fresh tulips, a dozen roses with chocolates, or any flower bouquet. Flower freshness & delivery guaranteed.
- Musical Instrument Allans Music Australia
- Download Free Movies
- Science of Identity Foundation - quotes and videos on happiness and well-being.
- Hewlett Packard Laptops Buy HP notebooks in Australia
Saya banyak duduk membaca di depan layar monitor, salah satu faktor penting adalah kenyamanan membaca. Dari berbagai situs yang saya baca masih banyak yang tidak acuh terhadap keragaman jenis komputer pengguna yang berkaitan dengan spesifikasi perangkat keras dan sistem operasinya. Satu yang penting adalah ukuran huruf sebuah situs web.
Penemu web, Tim Berners-Lee bersama W3C merancang standardisasi halaman web melalui bahasa markup untuk dibaca oleh berbagai jenis perangkat. Perangkat untuk membaca web kini semakin banyak, tidak hanya beragamnya jenis komputer personal tapi juga perangkat lain seperti televisi, telepon selular, PDA dan sebagainya. Dalam pencapaian tujuan standardisasi W3C, perancangan halaman web mengikuti konsep format dokumen, semantik dan presentasi. Format dokumen berkaitan dengan jenis dokumen (misalnya HTML, XHTML atau XML), semantik berkaitan dengan struktural penulisan (judul, heading, paragraf, quotation dsb) dan presentasi berkaitan dengan bagaimana tulisan ditampilkan di layar (warna, huruf, garis, layout dsb).
Tentang presentasi, W3C membuat standar Cascading Style Sheet (CSS) yang memisahkan unsur presentasi terhadap semantik tulisan. Sebagai gambaran sederhana secara semantik kita mendefinisikan sebuah paragraf tulisan dengan diapit tag <p>...</p>, maka tugas CSS-lah yang menampilkan layout paragraf tersebut harus seperti apa, misalnya warna latar dan tulisan, jarak spasi, ukuran huruf, jenis huruf dsb. Dengan metoda ini penulis isi dan perancang web tidak bercampur aduk, meskipun pada kenyataannya penulis dan perancang bisa saja satu orang yang sama, namun semantik dan presentasi tidak akan saling berinterferensi karena dikerjakan dalam konsep yang berbeda. Saat menulis isi web penulis cukup berkonsentrasi dengan semantik tulisannya, misalnya cukup dengan mengerti mana yang harus menjadi heading, mana yang harus menjadi paragraf, menentukan istilah yang harus di-emphasize, menentukan kata/kalimat yang dipertegas, memberi tanda sebuah kutipan dll. Jika penulis dan perancang web adalah seorang yang sama, maka di saat yang lain penulis tersebut menentukan heading, paragraf, emphasize, strong, blockquote harus ditampilkan secara visual seperti apa.
Kembali ke soal ukuran huruf, umumnya halaman web yang sulit dibaca disebabkan oleh perancang situs tak acuh terhadap keragaman pembaca atau hanya mengacu pada satu parameter tunggal. Contoh parameter tunggal sering kita temui kalimat-kalimat seperti “Best view with Internet Explorer” atau “Best view with 800×600 pixel”. Parameter tersebut menjadi tidak nyaman ketika pembaca menggunakan perangkat dengan spesifikasi yang berbeda.
Dalam soal ukuran huruf yang paling banyak menjadi masalah adalah presentasi menggunakan ukuran absolut. Anjuran W3C dalam menampilkan besar huruf adalah dengan ukuran relatif, dalam persen atau dalam satuan em (1em adalah sama dengan lebar/tinggi huruf M, sebuah proporsi relatif terhadap besar huruf terbesar dalam deretan alfabet).
Sebagai contoh berikut kondisi nyata saya sebagai pengakses web sekaligus perancang halaman situs ini. Blog ini saya definisikan ukuran huruf sebesar 100% pada tag body di CSS-nya, artinya ukuran huruf acuan adalah sebesar 100% terhadap setting browser di pengguna. Dalam hal ini saya mendefinisikan ukuran standar huruf browser Firefox saya adalah 14px. 14px adalah ukuran huruf yang masih nyaman saya baca menggunakan layar monitor 1280×960 pixel dengan resolusi 100dpi. Berikut contoh tangkapan layarnya.
Untuk para webmaster saya menyarankan dua hal berikut:
- Gunakan acuan besar font pada tag
bodydalam persen, supaya sesuai dengan konfigurasi browser pembaca yang jelas berbeda-beda. Pembaca dengan ukuran layar monitor 800×600 hingga 1024×768 (72/92dpi) mungkin cukup dengan ukuran default 10px, namun di atas resolusi tersebut (1152×864, 1280×960 100dpi hingga 1400×1050 atau 1600×1200) butuh 14px hingga 16px agar tetap nyaman dibaca. - Gunakan ukuran font lainnya dalam
em, sehingga ukuran menjadi relatif terhadap ukuran huruf padabody. Jadi ukuran font spesifik relatif terhadap acuan font body, dan font body relatif terhadap konfigurasi browser, yang artinya secara implisit webmaster peduli kepada mata pembaca yang berbeda-beda.
Intinya, jangan memaksakan semua selera anda kepada pembaca, tetap jagalah hal-hal estetika (seni karena fungsi). Mengenai jenis keluarga font lebih berkaitan dengan selera dan estetika. Teknologi CSS memungkinkan tampilan web dirender dengan alternatif font-family. Cukup banyak keluarga font yang legible dan elegan ditampilkan di layar monitor, dan pembuat sistem operasi pun sudah menyediakan default web font yang nyaman dibaca di layar.
Berikut optimasi yang dilakukan pada sistem operasi saya, untuk kenyamanan membaca beserta masalah yang timbul.
- Pertama adalah merekompilasi freetype (versi 2.1.9) dengan mengaktifkan TrueType Bytecode Interpreter. Hampir semua distribusi Linux tidak mengaktifkan metoda ini karena masalah paten, meskipun terdapat dalam source code freetype. Petunjuk rekompilasi mudah didapat dicari di Google dengan kata kunci metoda di atas.
- Kedua adalah tidak mengaktifkan antialias pada ukuran huruf tertentu. Atas dasar penglihatan mata sendiri saya men-disable antialias untuk ukuran di bawah 9pt dan 11px. Alasannya adalah jika antialias aktif di bawah ukuran huruf tersebut malah membuat huruf tampak buram.
- Ketiga, mendefinisikan ukuran default browser pada 14px. Memang hal ini tidak akan bekerja ketika membaca situs yang mendefinisikan ukuran font secara absolut.
- Keempat, mendefinisikan font-family yang sesuai dengan selera saya, saya gunakan keluarga Lucida dari plugin Java JRE (selain keluarga font ini memiliki glyph Arab juga).
Penghilangan antialias pada ukuran huruf yang kecil di atas ternyata membawa dampak masalah pada penggunaan font yang kurang legible ukuran kecil di bawah 9pt atau 11px. Berikut beberapa kondisi dan masalah yang terjadi:
1. Blog Avianto
Tampilan font Lucida Grande tanpa antialias karena lebih kecil dari 9pt/11px, saya harus menekan Ctrl+ untuk memperbesar huruf agar bisa dibaca.
Setelah dikoreksi sedikit oleh webmasternya, sekarang lebih readable.
2. Blog Direktif
Tampilan font Verdana 9pt blog ini masih bisa dibaca dengan antialias (font Verdana memang readable pada ukuran kecil), namun untuk kenyamanan sering saya menekan Ctrl+ ketika membaca situs ini.
3. Blog Benny Chandra
Tampilan font Verdana 11px blog ini masih bisa dibaca dengan antialias. Sama dengan blog Direktif, saya cenderung menekan Ctrl+ supaya lebih nyaman. Ben, line-height-nya kecilin dikit, biar gak terlihat jarang-jarang antar barisnya.
4. Situs Mandrake Linux
I hate Arial! Situs Mandrake Linux menggunakan font Arial dengan font-size="2", ukuran ini setara dengan 8/9 ukuran medium, dalam browser saya berarti 8/9 kali 14px, sama dengan 12, 46px. Jadi antialias masih bekerja dan font tampak buram.
5. Contoh situs dengan penggunaan ukuran font relatif terhadap pembaca.
Blog Priyadi
Situs WordPress
Situs Slashdot
Bahkan situs Slashdot tidak mendefiniskan keluarga generik serif atau sans-serif, jadi tampil dengan font serif default browser saya.
Konfigurasi Fontconfig
Engine rasterizer hurup di Linux untuk merender di tampilan ke layar monitor menggunakan freetype. Pengembang freetype membuat kode yang bebas paten terhadap paten Truetype Bytecode Interpreter, yaitu autohint. Autohint memiliki beberapa pilihan yang bisa dikonfigurasikan melalui file ~/.fonts.conf atau melalui gnome-font-properties. Berikut contoh perbandingan alias, antialias dan tipe autohint serta bytecode interpreter dalam kasus font Arial ukuran 9px hingga 16px.
- Tanpa antialias, tanpa hinting/autohint
- Tanpa antialias, dengan Autohint Full
- Antialias dengan Autohint Slight
- Antialias dengan Autohint Medium
- Antialias dengan Autohint Full
- Antialias dengan Truetype Bytecode Interpreter
Dengan kasus contoh tampilan layar di atas dan setelah mengaktifkan Truetype Bytecode Interpreter di freetype library saya mengkonfigurasikan fontconfig sebagai berikut di ~/.fonts.conf untuk memaksa font Arial di bawah 16px dirender dengan antialias dengan metoda autohint medium.
<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
<match target='font'>
<edit name='antialias' mode='assign'>
<bool>true</bool>
</edit>
<edit name='hinting' mode='assign'>
<bool>false</bool>
</edit>
<edit name='autohint' mode='assign'>
<bool>false</bool>
</edit>
</match>
<match target='font'>
<test name='family'>
<string>Arial</string>
</test>
<test name='pixelsize' compare='less'>
<double>16</double>
</test>
<edit name='autohint' mode='assign'>
<bool>true</bool>
</edit>
<edit name='hintstyle' mode='assign'>
<const>hintmedium</const>
</edit>
</match>
</fontconfig>
Popularity: 4% [?]
Senin, 14 Maret 2005 @ 15:13
Mozilla Firefox 1.0.1 Linux
Mozilla Firefox 1.0.1 Linux
koq situsku ndak di sebut yah di point 5? hahaha. *no hard feeling*
tapi memang sudah 0.8em koq huruf asal nya.
terus kenapa gak sekalian dibahas mayoritas orang yang masih suka dengan email dalam format html … masuk bagian kenyamanan membaca di depan monitor juga kan
mana font-size nya sering nemu yang fixed, dan masih ada yang _entah iseng atau kebiasaan_ bermain-main dengan warna yang genjreng, ampun!
padahal tetep aja aku gak bisa mbaca karena pakai mutt
Senin, 14 Maret 2005 @ 16:43
Opera 7.54 Linux
Opera 7.54 Linux
weleh, komentar dulu ya, baru nyebutin nama & email:- )
kalau mau bikin website yang enak dibaca dibrowser apapun,
test pake dillo , kalau enak dibaca, berarti enak pula dibaca di browser lain.
*pusing dapat kerjaan web programing*
Senin, 14 Maret 2005 @ 17:02
Mozilla Firefox 1.0.1 Windows XP
Mozilla Firefox 1.0.1 Windows XP
goblogmedia gimana jay?
Senin, 14 Maret 2005 @ 18:17
Mozilla Firefox 1.0.1 Linux
Mozilla Firefox 1.0.1 Linux
#1 cape kalo dicapture semuanyah. 0.8em kali 14px ya sekitar 11px, masih normal.
#2 dillo bisa juga dipakai buat validasi tag HTML, masih pake gtk1, susah di-apply antialias dan hanya mengambil font dari xfs
#3 blog enda pake 12px verdana, masih readable, apalagi kalo di monitor 1024×768 ke bawah
btw, semua penilaian pribadi saya saja, dibaca dalam jarak kurang lebih 50cm.
Senin, 14 Maret 2005 @ 18:57
Konqueror 3.3 Linux
Konqueror 3.3 Linux
nyobain pake font-size: 100% di body ah. ternyata ok, kecuali di opera, font-nya terlalu kecil, tapi masih kebaca lah.
verdana (and friends) jeleknya susah dicombine ama emoticon
. kalau ukuran font ditinggiin setinggi emoticon, hasilnya pasti hurufnya kegedean. kalau line-height digedein, jadinya kaya blog benny
. kalau dicuekin, nanti baris yang mengandung emoticon beda dengan baris yang gak mengandung emoticon.
Senin, 14 Maret 2005 @ 19:37
Mozilla Firefox 1.0.1 Linux
Mozilla Firefox 1.0.1 Linux
#5: Pri, di browser gua (jika dibuat 16px default font) menampilkan font body 100% kalo diukur huruf M akan tampil lebar/tinggi sekitar 14 pixel/dot, mungkin 1 pixel kiri-kanan-atas-bawah dikosongkan untuk keperluan antialias. CMIIW
Emoticon ukurannya 18 pixel, jadi kalo mau diitung-itung vertical alignment emoticon terhadap besar huruf (huruf M sebagai acuan) bisa:
1. terhadap font 10px: realnya mungkin 8 pixel, geser 5 pixel, 5/18*100=27%
2. terhadap font 12px: realnya mungkin 10 pixel, geser 4 pixel, 4/18*100=22%
3. terhadap font 14px: realnya mungkin 12 pixel, geser 3 pixel, 3/18*100=16%
sepertinya cocoknya digeser antara 20 hingga 25%, sepertinya layar monitor masih didominasi 1024×768
Senin, 14 Maret 2005 @ 19:59
Mozilla Firefox 1.0.1 Mac OS X
Mozilla Firefox 1.0.1 Mac OS X
Thanks Jay, kebiasaan baca di Mac yang selalu antialias nih hehe.
Udah dinaikin nih ukuran font-nya, tolong di cek lagi ya udah cukup ‘readable’ atau belum. Thanks!
Senin, 14 Maret 2005 @ 21:01
Mozilla Firefox 1.0.1 Linux
Mozilla Firefox 1.0.1 Linux
#7: sekarang 80%, jadi tampil 11px lebih di settingan 14px default browser, nggak separah sebelumnya, lebih enak sekarang. harusnya di layar 1024×768 atau lebih kecil sudah cukup (seinget gua ukuran font default Linux/Windows itu 10px/72dpi/1024×768, dan sudah readable). asumsi gua masih sedikit pengguna 1280×960 (100dpi di monitor 17″) atau yang lebih tinggi.
orang bule malah lebih aware, mereka lebih sering menggunakan font default 16px, terlihat dari berbagai contoh pen-disable-an antialias untuk font <14px.
font lucidagrande.ttf terinstall di gua didapat dari internet (lupa, kalo gak salah pernah ada themes ‘aqua like’ yang menyertakan ttf huruf tersebut), mungkin instruksi hintingnya tidak sebagus format dfont, juga teknologi rendering/rasterizer freetype tidak secanggih Mac punya.
screenshotnya gua tambahin.
Senin, 14 Maret 2005 @ 22:51
Mozilla Firefox 1.0.1 Windows XP
Mozilla Firefox 1.0.1 Windows XP
Setidaknya buat saya, ukuran font tidak terlalu bermasalah, browser rata-rata bisa meng-overide, memperbesar atau memperkecil. Lebih bermasalah buat saya adalah warna dan type font-nya itu sendiri. Kemudian masalah wrapping pada fluid design – terkadang jadi terlalu panjang kesamping untuk sebuah paragraf. Dan paragraf yang terlalu banyak kalimat atau tanpa paragraf sama sekali.
Kapan ya effect outline font, shadow, halo (buffer) bisa di html, jadi gak usah pake graphic untuk yang begini.
Senin, 14 Maret 2005 @ 23:07
Mozilla Firefox 1.0.1 Linux
Mozilla Firefox 1.0.1 Linux
#9: itu sulit, wrapping hanya bisa terjadi jika ada spasi
CSS3 (ongoing project) memperkenalkan
font-effect: none | emboss | engrave | outlinelihat saja di W3C CSS3 bagian font.
Selasa, 15 Maret 2005 @ 0:53
Mozilla Firefox 1.0.1 Windows XP
Mozilla Firefox 1.0.1 Windows XP
Kalo ngedesain web, saya biasanya cuma ngasih batasan resolusi maksimal dimana teks masih bisa dibaca dg nyaman di layar monitor. Yg jadi patokan biasanya resolusi 1024×768. Untuk resolusi diatasnya saya gak terlalu ngasih perhatian dg dua alasan (1) Resolusi segitu jarang yg pakai, dan (2) Kalaupun ada yg pakai resolusi diatas 1024×768, biasanya monitornya lebih gede (17 inch keatas) sehingga teks dipastikan masih bisa dibaca scr cukup jelas. Browser yg saya jadiin acuan cuma IE, Firefox (inc. Mozilla), dan Konqueror. Kalo Opera, gak janji deh
Selasa, 15 Maret 2005 @ 11:31
Konqueror 3.3 Linux
Konqueror 3.3 Linux
biasanya yang pakai resolusi di atas 1024×768 (dengan DPI tetap) gak pakai mode maximized. kalau pakai mode maximized biasanya gak enak bacanya. untuk situs web yang pakai layout fixed width akan meninggalkan ruang yang gak kepakai di sisi kiri dan/atau kanan. untuk situs web yang pakai layout fluid width, kalau di-maximize kesannya seperti baca koran tapi kalimatnya gak dibuat kolom
yang repot itu kalau pakai resolusi tinggi, tapi ukuran layar tetap, hasilnya DPI akan jadi tinggi (misalnya 1400×1050 at 14.1″, atau 1920×1600 di 17″). kalau o/s-nya otomatis mendeteksi DPI, nanti dia akan adjust otomatis ukuran font-nya sehingga ukuran fisiknya sama dengan monitor lain yang ukuran fisiknya sama. yang jadi masalah, font gampang diadjust, tapi komponen lainnya (ukuran gambar, lebar halaman, dsb) gak diadjust secara otomatis. jadi font-nya serasa jauh lebih besar.
untuk ini lebih enak kalau DPI-nya di-override sendiri supaya jadi standar 75DPI.
Selasa, 15 Maret 2005 @ 15:07
Mozilla Firefox 1.0.1 Linux
Mozilla Firefox 1.0.1 Linux
#12: kalau diadjust bukannya jadi ngaco Pri?
misalnya monitor gue 17″ 1280×960, report xdpyinfo adalah 101dpi, jadi di fontconfig gue sesuaikan ke 101dpi
kalau di-override jadi 72/75dpi font 10px di layar kecil banget, gak bisa dibaca
Selasa, 15 Maret 2005 @ 15:50
Mozilla Firefox 0.9.3 Ubuntu Linux
Mozilla Firefox 0.9.3 Ubuntu Linux
jay kalo blog gw gimana?
Selasa, 15 Maret 2005 @ 17:02
Konqueror 3.3 Linux
Konqueror 3.3 Linux
#13: iya ngaco, makanya mendingan disetting supaya gak otomatis diadjust. kalau di XFree86 4.3 kalo gak salah otomatis, harus edit /etc/X11/XF86config dulu biar dioverride. Kalau ngga, nanti font-nya besar2
. 75dpi itu cuma perkiraan gua, lupa lagi dpi yang normal itu berapa, mungkin 96 kali ya.
#14: homo!™
Rabu, 16 Maret 2005 @ 5:10
Mozilla Firefox 1.0.1 Mac OS X
Mozilla Firefox 1.0.1 Mac OS X
bener kata Pri #12. Gue pake resolusi 1600×1024 (widescreen) tapi kalau browsing selalu kalo gak di resize ke 800×600 atau 1024×768 (Tinggal bikin bookmarklets resize). Jarang banget browsing fullscreen, makanya gue suka ngambek kalo ada website yang seenakperutnya bikin browser gue jadi fullscreen.
Btw, gue old-school designer, jadi ada mekanisme otomatis di kepala gue yang selalu membuat width-max paragraf itu 15 – 25 kata (sekitar 400px – 500px, kira-kira).
Kamis, 17 Maret 2005 @ 3:20
Mozilla Firefox 1.0.1 Windows XP
Mozilla Firefox 1.0.1 Windows XP
eh blog aku gemana yah?
Kamis, 17 Maret 2005 @ 3:33
Mozilla Firefox 1.0.1 Debian GNU/Linux
Mozilla Firefox 1.0.1 Debian GNU/Linux
Terima kasih Jay, tentang ukuran fonta di #direktif. Aku sedang memikirkan mengubah menjadi prosentase, agar sesuai dengan selera pembaca.
Kamis, 17 Maret 2005 @ 16:15
Mozilla Firefox 1.0.1 Linux
Mozilla Firefox 1.0.1 Linux
#17: readable kok, masih dalam ukuran normal, apalagi di layar 1024×768 ke bawah
walah, kirain blogmu ganti font Cha, ternyata font Tahoma-ku kehapus, jadi tampil dengan font ‘New York’
font ‘New York’ adalah font default serif di MacOS 7, termasuk dalam sistem operasi ini adalah font sans-serif Geneva, fantasy Chicago dan monospace Monaco, nama kota semua
Kamis, 17 Maret 2005 @ 17:12
Mozilla Firefox 1.0.1 Windows XP
Mozilla Firefox 1.0.1 Windows XP
tadinya sih Verdana yg pertama trus ukuran font 11px tp krn pusing krn kecil jadi diganti tahoma pertama
[mata udah min soalnya ada cylinder lagi:S ]
Sabtu, 19 Maret 2005 @ 3:27
Mozilla Firefox 0.10.1 Linux
Mozilla Firefox 0.10.1 Linux
Kalo yang aku tahu, browser yang bagus buat liat tampilan itu bukannya Amaya? Konon bawaan dari W3C sendiri, jadi lebih “baik” utk nguji tampilan. Kalo Firefox juga bagus, walau kadang2 sering hancur di IE.
Dillo gak begitu bagus loh mas. But.. lumayanlah….
BTW: yang bikin rusak nih browsernya atau font yang dipake?
Sabtu, 26 Maret 2005 @ 18:47
Mozilla Firefox 1.0.2 Mac OS X
Mozilla Firefox 1.0.2 Mac OS X
Jay, tambahan nih. ternyata ada fitur di Firefox dimana kita bisa set MINIMUM size utk font. Jadi gak perlu repot2 membesarkan kalau seandainya kekecilan.
Preferences > General > Fonts & Color
Rabu, 10 Mei 2006 @ 10:22
Internet Explorer 6.0 Windows XP
Internet Explorer 6.0 Windows XP
aku minta tolong bagaimana cara memperbaiki tampilan layar monitor laptop yang kabur
Kamis, 4 Januari 2007 @ 20:22
Internet Explorer 6.0 Windows XP
Internet Explorer 6.0 Windows XP
saya dhani di pasar minggu, saya mau tanya nich, saya punya monitor 21 inch, resolusi yang tepat dan baik itu berapa ukurannya ya? dan saya menggunakan vga card 256 mb, terimakasih sebelumnya.
Regards,
Dhani
Kamis, 4 Januari 2007 @ 21:03
Epiphany 2.16 Gentoo Linux
Epiphany 2.16 Gentoo Linux
#24: CRT 21 inchi? Sebaiknya 1280×960 atau lebih (1400×1050 atau 1600×1200), tapi pastikan vertical refresh rate-nya lebih dari 60Hz (70,75 atau 80Hz).
Faktor kenyamanan lain adalah saat font ukuran 8px masih nyaman dibaca.
Sabtu, 31 Mei 2008 @ 15:58
Mozilla Firefox 2.0.0.14 Windows XP
Mozilla Firefox 2.0.0.14 Windows XP
bagus