Mengapa Helvetica [Neue] terlihat sangat mengerikan di Illustrator?

15

Helvetica selalu tampak mengerikan di Illustrator CS4 + di Mac saya, termasuk semua versi OS, terlepas dari ukuran atau unitnya. Di bawah ini adalah screenshot dari Helvetica pada 12px, 24px, dan 36px.

Helvetica pada 12px Helvetica pada 24px Helvetica di 36px

Apakah ada cara untuk mengatasi ini? Font lain terlihat bagus, tetapi Helvetica (Neue atau lainnya) selalu terlihat mengerikan, seolah-olah rendering subpiksel mati.

Andrew
sumber
2
Ini mungkin tidak membawa jawaban yang kuat, tapi saya yakin pertanyaan Anda sedang dibahas di forum Adobe. Di sini: forums.adobe.com/message/2443391
Henrik
1
Terima kasih untuk tautannya! Diskusi itu sudah sangat tua. Saya merasa sulit untuk percaya bahwa font saya telah rusak pada banyak komputer, melalui beberapa OS, melalui beberapa versi CS. Apakah saya benar-benar satu-satunya yang mempengaruhi hal ini?
Andrew
FWIW Saya membuat tes perbandingan pada rendering png internal vs yang diekspor untuk melihat bagaimana font merender pada sistem saya (mengkonfirmasikan tidak terlalu baik). Orang akan berharap bahwa render "tipe dioptimalkan" akan terlihat lebih baik, tetapi anehnya render "seni dioptimalkan" yang lebih mendekati memuaskan. i.imgur.com/izTuj.png
Henrik
1
@hced, render Anda sangat akurat menggambarkan apa yang saya lihat. Huruf kecil itu konyol!
Andrew

Jawaban:

10

Pertama, dua penyebab umum dari teks miring, tidak sejajar, terputus-putus di mana karakter tidak sejajar atau ukuran relatif dengan satu sama lain yang bukan penyebab dalam kasus khusus ini :

  • Mis-alignment ke pixel grid. Versi Illustrator yang lebih baru memiliki opsi 'Align to pixel grid', tetapi itu mempengaruhi segalanya dan memiliki konsekuensi seperti mencegah lebar goresan kurang dari 1pt. Anda dapat menyelaraskan piksel masing-masing objek tanpa konsekuensi lain dengan skrip Pixel Align (unduh) dari Wundes .
  • Periksa kembali apakah teksnya tidak terlalu sedikit diputar, karena ini akan membuat petunjuk menjadi gila.

Namun, kasus khusus ini merupakan kombinasi dari tipe anti-aliasing dan hinting tertentu. Di Illustrator CS5 + ada opsi untuk bagaimana jenis anti-alias mirip dengan yang ada di Photoshop, jadi kita dapat membandingkan kombinasi (baris atas adalah 10 Helvetica Neue Light, baris bawah 14pt), di mana CS4 tampaknya hanya menggunakan 'Tajam':


Dengan petunjuk (mis. Pratinjau pada layar, atau, dalam CS5 +, simpan untuk web dengan "Jenis Dioptimalkan" dipilih)

masukkan deskripsi gambar di sini


Tanpa petunjuk (mis .'Art dioptimalkan 'simpan untuk web, atau kurang dari CS4 simpan untuk web):

masukkan deskripsi gambar di sini


Anda dapat melihat distorsi jelek, menurunkan huruf-huruf datar dan menaikkan huruf-huruf bulat, muncul ketika isyarat menyala dan ketika anti-aliasing 'Tajam' , terlepas dari apakah objek itu sendiri sejajar dengan piksel grid - karena petunjuk itu (menyesuaikan detail agar sesuai dengan kotak piksel) terjadi pada level setiap detail setiap karakter, bukan objek teks itu sendiri.

(Saya tidak dapat menemukan apa pun yang mengeja persis apa yang dilakukan masing-masing metode anti-aliasing - sepertinya 'Renyah' dan 'Kuat' mungkin sebenarnya mematikan petunjuk Illustrator, atau setidaknya, menguranginya)

Perhatikan juga bagaimana menyelaraskan objek teks ke kisi - kisi pixel membuat perbedaan kecil ketika mengisyaratkan mati (misalnya "il" dalam Evil dalam kasus Sharp). Tapi ada sejumlah keacakan ini. Kadang-kadang itu akan menjadi perbaikan, kadang-kadang mungkin membuat rendering teks lebih buruk, kadang-kadang tidak ada bedanya.

Di CS6, Anda memiliki kendali atas hal-hal ini. Pada CS4 untuk teks dalam-gambar untuk output web, solusi yang saya sarankan adalah menyalin screenshot dari pratinjau layar pada 100% ke Photoshop ketika Anda ingin mengisyaratkan, dan menggunakan Save For Web plus skrip Pixel Align ketika Anda tidak ingin mengisyaratkan, dan jika perlu menggabungkan kedua gambar di Photoshop, overlay mereka dan menghapus area satu di mana Anda ingin rendering yang lain. Atau, terapkan teks dalam Photoshop dan gunakan kontrol anti-aliasing-nya.

Teks petunjuk biasanya lebih baik untuk dibaca, tetapi dalam beberapa kasus seperti ini, itu salah besar ...

user56reinstatemonica8
sumber
Wow, jawaban yang sangat bagus! Maaf saya tidak menandainya sebelumnya! Eksperimen Anda sangat membantu dalam mencapai bagian bawahnya, dan saya senang mendengar bahwa di CS6 kami benar-benar memiliki kendali.
Andrew
6

Adobe Illustrator dan Adobe Photoshop tidak menggunakan antialiasing subpixel. Ini adalah salah satu alasan mengapa mereka berdua cenderung membuat jenis lebih buruk daripada teks antarmuka pengguna di OS X. Halaman web di Safari, Chrome dan Firefox juga membuat subpixel antialiasing dalam banyak kasus juga (itu tergantung pada halaman web, teknik dan CSS sekalipun).

Faktanya, OS X tidak menggunakan antialiasing subpixel setiap saat, hanya ketika rendering pada latar belakang buram:

Teks hanya dapat digambar menggunakan antialiasing sub-piksel saat teks tersebut dikomposisikan ke dalam latar belakang buram yang ada pada saat yang sama ketika itu diraster.

- Referensi Kelas CATextLayer Apple

Juga, Adobe menggunakan mesin rendering teks yang berbeda untuk OS X dan Windows, mungkin sehingga mereka dapat memiliki hasil lintas platform yang konsisten.

Saya tidak yakin mengapa Helvetica Neue sangat buruk atau berbeda. Ini mungkin hanya gejala perbedaan yang lebih luas.

Marc Edwards
sumber
2

Saran saya adalah membuka file di Apple Preview sesekali. Ini memiliki rendering teks yang jauh lebih baik. Ini memungkinkan Anda untuk setidaknya menyelesaikan masalah sampai Anda memutuskan untuk mengekspor.

Tamu
sumber
2

Teks yang ditampilkan di layar biasanya memiliki beberapa tingkat petunjuk dan anti-aliasing diterapkan. Keduanya dimaksudkan untuk membuat teks lebih mudah dibaca di layar.

Illustrator di sini menerapkan level petunjuk yang berbeda atau anti-aliasing pada apa yang biasanya Anda lihat di sistem operasi Anda, sehingga terlihat berbeda (dan bagi Anda, terlihat salah, karena ada banyak penelitian tentang topik orang yang terbiasa dengan cara tersebut. OS yang mereka pilih merender teks, dan segala sesuatu tampak salah)

The Kabar baiknya adalah bahwa hal itu biasanya tidak peduli dengan hasil akhir; ketika di Illustrator Anda lebih peduli tentang output vektor yang dihasilkannya, bukan bagaimana tampilannya di Illustrator diraster untuk layar Anda. Jika Illustrator menjadikannya "lebih bagus" bagi Anda, itu masih tidak akan memberikan pratinjau yang sangat baik tentang apa yang akan menjadi output, karena tampilan rasterised layar sangat banyak faktor pembatas; untuk mendapatkan pratinjau bentuk huruf yang baik, Anda perlu memperbesar sangat dekat, dan untuk mendapatkan pratinjau yang baik tentang bagaimana bentuknya dicetak - Anda harus mencetaknya.

The anti-aliasing dari teks pada layar membantu mencegah bentuk surat jelek sebagai akibat dari perasteran tetapi ada beberapa jenis anti-aliasing. Sebagian besar OS saat ini menggunakan antialiasing sub-pixel yang merupakan tipe paling "tajam" karena tiga kali lipat resolusi horizontal, sedangkan sampel Anda tidak menunjukkan anti-aliasing sub-pixel anti. Akibatnya, "batang" vertikal tidak terlihat sangat tajam pada ukuran kecil.

The mengisyaratkan dari teks pada layar membantu membuat batang dan bar dari teks lebih jelas dan tajam, dengan menggeser mereka untuk menyelaraskan dengan grid pixel. Sistem Operasi sangat bervariasi dalam tingkat mengisyaratkan Windows melakukannya dengan sangat kuat, dan Mac OS X hampir tidak melakukan hal itu sama sekali. Sebagai konsekuensinya, segala sesuatu yang berbeda dari apa yang Anda gunakan mungkin terlihat salah (seperti halnya petunjuk yang buruk juga terlihat salah). Sampel yang Anda berikan menunjukkan teks yang sangat mengisyaratkan, dan kesalahan di atas huruf kecil "x" membuat saya percaya bahwa Illustrator mengisyaratkan secara otomatis. Petunjuk otomatis dapat membuat beberapa font terlihat OK, dan yang lain terlihat sangat buruk. Terutama jika Anda biasanya menggunakan Mac OS X, ini akan terlihat sangat salah bagi Anda.

Bagaimanapun, seperti yang dikatakan, itu tidak mempengaruhi hasil akhir.

thomasrutter
sumber
Saya sering menggunakan Illustrator dengan tujuan eksplisit mengekspor ke format digital, dan jarang menggunakannya untuk barang cetakan. Jadi sementara saya mengerti bahwa itu akan terlihat baik ketika dicetak, dengan Retina-esque display ini seharusnya tidak menjadi masalah lagi. Saya hampir lebih suka Illustrator hanya menggunakan rendering font sistem asli untuk tampilan. Meskipun akan berbeda lintas-platform, setidaknya akan konsisten per-platform.
Andrew
Masalahnya adalah Anda membuat gambar raster, di mana sub-piksel tidak ada. Rendering sub-pixel adalah kemampuan perangkat keras.
horatio
@horatio ini tidak sepenuhnya benar, Anda dapat membuat rendering subpixel jika Anda mengetahui urutan dan konfigurasi piksel layar sebelumnya.
joojaa
Dimungkinkan untuk menjadi pintar dan membuat gambar subpixel yang dioptimalkan dari Illustrator: ekspor 3 kali lipat dari hasil akhir yang diinginkan, kemudian di Photoshop dll. Menggeser saluran merah ke kanan satu piksel dan saluran biru meninggalkan satu piksel tanpa mengubah ukuran kanvas, mengubah ukuran kembali ke ukuran output yang diinginkan dan voila. Itu tidak akan memiliki penyaringan atau mengisyaratkan bahwa penyaji teks di layar memiliki, jadi, masih tidak akan terlihat sama.
thomasrutter
-1

Ini terlihat cukup bagus di komputer saya:

masukkan deskripsi gambar di sini

Mengingat keterbatasan teks raster, ini hampir sama baiknya dengan yang didapat. Tipografi yang berbeda lebih cocok untuk ukuran font yang kecil, dan kecuali Anda memiliki rendering subpixel, yang hanya tersedia untuk rendering khusus perangkat (mis. Halaman web dan teks UI), maka Anda harus hidup dengan fakta bahwa AA biasa mengalami kesulitan dengan teks kontras tinggi (dan hitam putih hampir sama tingginya dengan kontras) pada resolusi rendah, seperti tampilan desktop / laptop 72ppi pada umumnya.

Jika Anda menggunakan Helvetica untuk resolusi cetak 300dpi +, atau Anda merender pada LCD resolusi tinggi (atau hanya LCD 72 PPI biasa yang dirancang untuk dilihat dari kejauhan), maka itu tidak masalah.

Lèse majesté
sumber
hitam pada kuning lebih kontras daripada hitam putih
Ryan
3
@Ryan: Tidak juga. Hitam putih (atau sebaliknya) dianggap kontras 100% (untuk sistem pencitraan digital dan tes ketajaman visual). Mengganti putih dengan kuning menurunkan perbedaan luminance. Kuning, seperti merah, bagus untuk mendapatkan perhatian seseorang, itulah sebabnya kuning dan hitam adalah warna peringatan standar. Tetapi untuk AA hitam pada kuning dalam tampilan RGB 8-bit yang khas memerlukan melangkah melalui 255 level di saluran hijau dan biru sedangkan pada putih membutuhkan melakukan ini untuk semua 3 saluran.
Lèse majesté