Apa yang harus kita perhitungkan untuk penggunaan font dalam desain secara umum dan dalam desain web pada khususnya. Apa itu palet font dan font mana yang aman digunakan di web.

Dalam komposisi grafik atau halaman web apa pun, konten tekstual terutama bertanggung jawab untuk mengirimkan pesan ke pemirsa akhir. Itulah sebabnya kami akan membahas lebih dalam tentang font dalam Manual Desain Web . Pada kesempatan kali ini kita akan membahas tentang penggunaan font yang benar, tetapi tidak hanya tentang font yang bisa kita pilih, tetapi juga tentang karakteristik blok teks kita. Pada bagian kedua kami akan membahas masalah yang sama, tetapi di bawah prisma desain web.

Dalam lingkungan ini, tipografi adalah materi yang menjembatani antara penerima dan informasi. Karakter mengkualifikasi kata-kata dan memberikan atau memperkuat makna. Pemilihan yang salah dari bentuk-bentuk ini dapat mengganggu komunikasi secara negatif. Seiring dengan warna, tipografi dapat sepenuhnya mengubah makna yang kita kaitkan dengan sebuah desain. Teks dapat mengatakan satu hal; liriknya, lain lagi.

Untuk mencapai tipografi yang cocok untuk karya tersebut, perlu untuk mempertimbangkan berbagai aspeknya, di antaranya menonjol sebagai berikut:

Pilihan palet font

Setiap desainer harus memiliki kemampuan untuk menganalisis, mengeksplorasi, dan mengenali karakteristik konseptual, formal, historis, dan teknis dari tipografi yang berbeda. Setiap keluarga jenis huruf memiliki karakteristik dan kepribadiannya sendiri, yang memungkinkannya untuk mengekspresikan catatan visual yang berbeda, beberapa lebih kuat dan lainnya lebih halus, beberapa lebih halus dan lainnya lebih kasar, beberapa lebih geometris dan lainnya lebih organik, jadi pemilihan keluarga font untuk digunakan dalam komposisi harus dilakukan dengan rasa tanggung jawab yang luas.

Untuk mencapai komposisi tipografi yang memadai, diperlukan pemilihan keluarga font yang tepat untuk digunakan, dengan mempertimbangkan keterbacaannya, proporsinya, kontras antara guratan tebal dan tipis, keberadaan akhiran atau kekurangannya, kecenderungannya dan bentuknya. .

Memilih jenis yang paling tepat sangat bergantung pada jenis pesan yang menjadi fokus komposisi. Dalam beberapa kasus kita membutuhkan font yang halus, elegan atau halus, sementara di kasus lain kita membutuhkan huruf yang sederhana dan padat tanpa keributan.

Secara umum, keluarga asal Romawi, dengan serif berdiri, berfungsi paling baik sebagai jenis huruf di media cetak. Sebaliknya, mereka yang memiliki sans serif atau tanpa serif memberikan hasil yang lebih baik pada monitor dan layar, terutama jika kita berbicara tentang resolusi rendah.

Faktor yang paling menentukan dalam pemilihan font harus keterbacaannya, properti yang berasal dari desain font itu sendiri, terutama penting untuk teks panjang. Untuk blok teks yang lebih pendek, kami memiliki kebebasan memilih yang lebih besar, dan untuk judul kami dapat menggunakan font yang kami inginkan, tergantung pada semangat dokumen dan perasaan yang ingin kami buat.

Kita harus memilih font yang karakternya terbuka dan proporsional, dengan keteraturan jenis dan dengan lelang klasik. Karakter yang mengandung cacat gaya atau penyimpangan kurang terbaca, sehingga kurang direkomendasikan untuk digunakan dalam blok teks dan lebih cocok untuk teks pendek atau judul.

Untuk layar, beberapa font sans seperti Verdana atau Tahoma menawarkan keterbacaan yang optimal. Font hias atau kaligrafi tidak boleh digunakan melebihi beberapa baris, karena akan segera menyebabkan kelelahan mata.

Sebuah konsep yang terkait dengan keterbacaan, tetapi terlepas darinya, adalah pemahaman suatu konten tekstual, kemampuannya untuk ditafsirkan atau tidak. Misalnya, sebuah teks yang disusun dengan huruf besar semua, dapat dibaca tetapi memiliki pemahaman yang sangat sedikit (dalam bahasa Inggris digunakan istilah 'keterbacaan' dan 'keterbacaan').

Ada perbedaan penting antara keterbacaan dan pemahaman. Sementara keterbacaan mengacu pada kemudahan pembaca untuk memecahkan kode informasi dalam dokumen, pemahaman mengacu pada isi dokumen. Keduanya berpengaruh besar terhadap berhasil atau tidaknya pembacaan dokumen; pemahaman tidak dapat diperoleh tanpa keterbacaan.

Setelah jenis huruf yang akan kita gunakan untuk membuat karya dapat dibaca telah dipilih, kita harus mempertimbangkan aspek lain seperti ukuran yang akan kita gunakan untuk bekerja, panjang garis atau jarak. Ketika kita menyelaraskan ketiga elemen ini (tipografi dan ukurannya, panjang dan spasi baris) akan lebih mudah dibaca, perjalanan visual kita di atas teks akan lebih alami. Ketika kita memvariasikan salah satu aspek tipografi ini, kita harus menyesuaikan yang lain agar harmoni terus terjadi.

Faktor lain yang perlu dipertimbangkan adalah asosiasi temporal atau geografis dari sumber tertentu. Ada font yang terkait dengan waktu tertentu, yang lain dengan tempat tertentu, jadi memilih font yang sesuai dengan pesan yang akan disampaikan sangat penting untuk mencapai lingkungan komunikatif yang tepat. Label dan poster bir, misalnya, biasanya menggunakan font yang terinspirasi Gotik, karena produk ini diasosiasikan dengan biara biarawan yang memproduksinya saat itu.

Strategi kerja yang baik adalah menyiapkan palet font dengan huruf serif untuk teks, huruf sans untuk judul dan subjudul, dengan ukuran lebih besar, satu lagi untuk keterangan foto, ringkasan, kutipan dan catatan, lebih kecil, dan mungkin khusus surat untuk judul utama. Ini adalah formula yang sederhana dan efektif, menghindari pencampuran font sans-serif yang berbeda atau serif yang berbeda, kombinasi yang jarang berhasil.

Beberapa font memiliki versi sans dan versi serif dan biasanya membentuk kombinasi yang sempurna: misalnya, bentuk serif untuk teks dan sans untuk sisanya. Dengan sumber yang berbeda, ini adalah masalah pengujian.

Font yang dipilih untuk teks tentu saja dapat menyertakan varian tebal dan miring. Keduanya harus digunakan hanya untuk menekankan bagian dokumen, bukan fragmen panjang.

Lebih mudah untuk menghindari apa yang sudah sangat terlihat. Font yang digunakan semua orang membuat dokumen kita tidak dapat dibedakan, produk tiruan dari yang lain. Font seperti Arial (Helvetica), Courier, dan Times New Roman sangat lazim sehingga membuat dokumen hambar, tanpa dampak visual. Sebagai alternatif, ada sumber-sumber yang pada dasarnya sejenis, akan menghilangkan anonimitas dan kebosanan dari teks-teks yang kami siapkan.

Varian font

Umumnya, setiap keluarga tipografi memiliki serangkaian varian hurufnya, yang dapat digunakan untuk memberikan variasi pada teks dan untuk menentukan kata-kata tertentu di dalamnya.

Varian ini diperoleh dengan memodifikasi salah satu properti berikut:

·         Ketebalan goresan: Berat atau ringannya goresan yang membentuk jenis mempengaruhi keterbacaannya. Bergantung pada ketebalan garisnya, sebuah huruf dapat diklasifikasikan sebagai "sangat halus", "halus", "bulat", "hitam", dan "sangat hitam". Pada tipe yang terlalu berat, lubang kancingnya terisi dan menghilang, sedangkan tipe yang terlalu tipis mungkin tidak mudah dibedakan dari latar belakang. Oleh karena itu, perancang harus menggunakan ketebalan font yang memadai atau normal untuk teks yang panjang dan menggunakan ketebalan yang berbeda pada waktu tertentu. Misalnya, menggunakan bobot yang kontras digunakan untuk menyorot paragraf di dalam teks.

·         Proporsi antara sumbu vertikal dan horizontal: menurut nilai relatifnya, kami memperoleh varian bulat (bila sama), sempit (bila horizontal lebih kecil dari vertikal), dan diperluas (bila horizontal lebih besar). Jenis huruf sempit efektif bila ada banyak teks dan ruang harus dihemat. Tapi keterbacaan berkurang ketika huruf terlalu sempit (padat) atau terlalu lebar (melebar). Kondensasi cukup ketika kita harus menggunakan kolom sempit.

·         Kemiringan sumbu vertikal: memberi kita varian font miring atau miring. itu berfungsi untuk menyorot bagian dari teks, bukan untuk membentuk blok teks, dan harus digunakan dengan hati-hati, karena banyak karakter miring dalam teks membuat sulit untuk dibaca.

·         Ukuran kotak: meningkatkan ukuran sehubungan dengan kotak yang lebih rendah, kami memperoleh huruf kapital. Semua teks yang ditulis dengan huruf kapital tidak hanya menghabiskan lebih banyak ruang, tetapi juga memperlambat pembacaan. Huruf kecil atau huruf kecil mengisi teks dengan tanda-tanda yang dibuat oleh banyaknya bentuk huruf, naik dan turun dan bentuk tidak beraturan, namun teks yang sama dalam huruf besar kehilangan tanda-tanda ini, sangat berguna untuk memudahkan membaca.

Sebagai aturan umum, huruf bulat dan huruf kecil biasanya yang paling mudah dibaca dalam keluarga, lebih dari huruf miring, tebal, huruf besar, dan sempit.

Huruf tebal (tebal) dengan kuat menarik perhatian ke dalam teks dan bahkan mengalihkan perhatian secara serius, jadi Anda tidak boleh menyalahgunakannya atau menggunakannya dengan cara yang murni dekoratif. Mereka harus dicadangkan untuk menekankan beberapa kata, selalu dengan cara yang sangat terbatas, dan tidak pernah dalam kalimat lengkap. Jika digunakan dengan benar, mereka membantu untuk membaca teks dengan cepat dan memfasilitasi pemahaman informasi yang cepat.

Huruf kapital jauh lebih sulit dibaca daripada huruf kecil, sehingga tidak direkomendasikan untuk teks panjang tetapi untuk satu kata. Kemampuannya untuk menyorot dalam teks menjadikannya sumber daya yang sangat berharga untuk menarik perhatian pada item informasi.

Pilihan yang menarik untuk beriklan adalah kombinasi huruf besar dan kecil dalam kata yang sama. Kombinasi ini menghadirkan pembacaan yang sangat sulit, yang membutuhkan lebih banyak pemrosesan dan karenanya dapat menghasilkan memori yang lebih baik, meskipun hipotesis terakhir ini belum diverifikasi secara empiris.

Miring atau miring tidak terlalu terbaca dan tidak disarankan, sebaiknya hanya digunakan dengan font yang cukup besar.

Ukuran huruf

Ukuran font harus dipilih dengan mempertimbangkan sifat komposisi dan jarak dari yang akan dibaca.

Untuk format kecil seperti laporan, buku, brosur, manual atau halaman web, disarankan untuk menggunakan font antara 8 dan 12 poin untuk badan teks. Badan 11 titik rata-rata bekerja dengan baik dengan printer 300 dpi.

Elemen teks yang kurang penting dalam komposisi, seperti catatan kaki, dapat berukuran 7-8 poin, asalkan dapat dibaca dengan font yang dipilih.

Berkaitan dengan format besar, untuk papan reklame yang akan terlihat pada jarak 10 meter, tinggi huruf minimal harus 2,5 cm, sedangkan untuk papan reklame yang harus terbaca pada jarak 60 meter, tinggi huruf minimal harus 15 cm.

Penspasian karakter

Keterbacaan teks akan tergantung pada jarak yang benar antara huruf dan kata yang membentuknya. Aspek utama yang perlu dipertimbangkan adalah font yang digunakan (keluarga tipografi), badan (ukuran font) yang kita gunakan untuk bekerja, dan ketebalan huruf. Kombinasi yang memadai dari ketiga elemen (set) ini memberi kita tekstur teks yang homogen, yang akan meningkatkan keterbacaannya.

Dua konsep penting yang harus kita pelajari dan gunakan untuk memodifikasi spasi antar huruf adalah track dan kern.

Trek atau pelacakan menyesuaikan ruang antar karakter, membukanya saat menangani font kecil dan menutupnya saat menangani font besar, sehingga mengubah kerapatan visual teks. Lagu bertindak secara global pada semua teks dan bergantung pada ukuran karakter. Sebagai aturan umum, semakin besar bodinya, semakin ketat lintasannya.

Kern atau kerning digunakan untuk mengatur spasi antar huruf pada kata yang sama atau pada pasangan karakter tertentu yang menarik perhatian karena terlalu berdekatan atau terlalu berjauhan, biasanya dalam font yang besar. Kern sangat proporsional, karena ruang em (unit yang mendasarinya) memiliki ukuran titik yang sama dengan badan karakter, yaitu ruang em untuk teks 12 titik berukuran 12 titik.

Track dan kern diukur dalam satuan relatif terhadap ukuran titik karakter.

Setiap karakter dalam font tertentu dikelilingi oleh ruang samping dalam jumlah tertentu, yang diatur oleh perancangnya. Lebar karakter tidak hanya terdiri dari karakter itu sendiri, tetapi juga ruang samping ini. Kern dan track juga memodifikasi lebar karakter, dengan memodifikasi ruang lateralnya. Satu set yang tepat dari nilai-nilai ini memberikan warna teks yang konsisten, membuat huruf mengalir secara alami dan berirama dalam kata-kata, dan kata-kata dalam baris.

Nada kata-kata tampak lebih ringan jika huruf-hurufnya dijauhkan. Demikian pula, jika Anda menambah jarak antara kata dan baris, jenisnya akan tampak memiliki nilai yang lebih terang.

Spasi yang ditempatkan bilah spasi antara satu kata dan lainnya adalah bagian dari desain font, seperti satu karakter lagi. Garis yang terlalu longgar menghasilkan keterputusan dalam pembacaan, sedangkan garis yang terlalu rapat membuat sulit untuk membedakan satuan (kata) terkecil yang signifikan.

Sebagai aturan umum, pemisahan antara huruf dan kata harus dilakukan secara konsisten, sehingga mudah dibaca, terutama dengan memperhatikan huruf besar dan terutama dalam penulisan huruf. Huruf D dan O tidak boleh memiliki spasi yang sama dengan M, I, atau N pada kata seperti DOMINO.

Penyesuaian bervariasi sesuai dengan kombinasi huruf yang digabungkan, misalnya pada suku kata "To", "o" harus dimasukkan beberapa piksel di bawah "T".

Lebar garis

Faktor lain yang menentukan kemudahan membaca teks dan daya komunikatifnya adalah lebar garis.

Semua orang tahu bahwa semakin pendek garisnya, semakin tinggi kecepatan membaca, itulah sebabnya surat kabar memiliki kolom yang sangat sempit. Namun, baris yang terlalu pendek membuat pembacaan menjadi sulit karena ritme visual yang dipaksakan oleh perubahan baris yang konstan.

Panjang garis yang lebih panjang membutuhkan lompatan yang lebih panjang dari satu titik fiksasi mata (ujung kanan satu garis) ke titik berikutnya (ujung kiri dari garis berikutnya). Semakin panjang lompatan, semakin tidak akurat dalam fiksasi berikutnya dan, oleh karena itu, semakin besar kesulitan membaca.

Sebagai aturan, kita dapat mengambil lebih dari 40 karakter untuk satu baris dan kurang dari 70.

Dalam baris yang sangat pendek, distribusi unit makna yang benar adalah penting, selalu memastikan bahwa setiap baris menawarkan entitas signifikannya sendiri kepada pembaca, yang membuat teks lebih mudah dibaca dan lebih mudah dipahami.

Terkemuka

Ruang vertikal terdepan di antara baris teks, merupakan faktor penting bagi pembaca untuk dapat mengikuti bacaan dengan benar tanpa membuat kesalahan baris atau melelahkan mata, serta menjadi salah satu yang bertanggung jawab atas sensasi teks. warna yang dibutuhkan blok teks.

Sebagai aturan umum, akan lebih mudah untuk memberi jarak baris satu atau dua poin lebih dari nilai badan font, yaitu, jika kita memiliki teks dalam badan 10, jarak baris 12 memberikan ruang putih yang sesuai. dalam jarak baris. Jika Anda menggunakan nilai awalan yang lebih kecil dari teks isi, baris-baris tersebut mungkin akan memakan satu sama lain atau menjadi sulit dibaca.

Semakin banyak ruang antar baris, semakin mudah dibaca. Jarak garis yang optimal dengan lebar garis 1,5 disarankan.

Perataan

teks Teks dapat disejajarkan dalam lima cara berbeda: rata kiri, rata kanan, rata rata, tengah, atau asimetris.

Teks rata kiri adalah yang paling alami dan direkomendasikan untuk teks panjang. Ini menciptakan spasi huruf dan kata yang sangat seragam, dan karena baris berakhir pada titik yang berbeda, pembaca dapat dengan mudah menemukan setiap baris baru. Ini mungkin bentuk perataan teks yang paling mudah dibaca.

Dalam hal keterbacaan, penelitian pada kertas cetak tidak menemukan perbedaan antara teks rata kanan atau rata kiri, meskipun mereka telah menunjukkan bahwa pembaca "buruk" (yang mungkin termasuk beberapa jenis orang cacat) membaca teks yang lebih baik rata kiri. daripada yang dibenarkan.

Sebaliknya, perataan kanan merugikan pembaca, karena sulit menemukan baris baru. Metode ini mungkin cocok untuk teks yang tidak terlalu panjang, tetapi tidak untuk blok besar.

Teks yang dibenarkan (rata kiri dan kanan) dapat sangat terbaca jika perancang memastikan bahwa jarak antara huruf dan kata rata dan celah yang mengganggu antara kata, yang disebut "sungai", tidak mengganggu aliran teks. Jika tidak, teks menjadi kurang terbaca dan menyebabkan beberapa kata dengan lebih banyak ruang antar karakter ditekankan secara tidak sengaja. Sangat cocok untuk kolom sempit atau blok teks kecil, karena monoton dan melelahkan pembaca.

Perataan terpusat memberi teks tampilan yang sangat formal dan sesuai bila digunakan secara minimal. Tetapi Anda harus menghindari mengonfigurasi teks yang terlalu panjang dengan model ini.

Penjajaran asimetris digunakan saat desainer ingin memecah teks menjadi unit pemikiran logis, atau memberikan tampilan halaman yang lebih ekspresif. Jelas, mengonfigurasi teks dalam jumlah besar dengan cara ini akhirnya melelahkan pembaca.

Warna teks

Warna, yang diterapkan secara diam-diam ke beberapa bagian teks Anda, dapat sangat meningkatkan keterbacaannya, memberikan bobot visual yang lebih besar, dan bahkan menciptakan kesan variasi font yang lebih banyak. Sedikit sentuhan warna pada subjudul, atau menyorot kutipan, adalah perangkat yang sangat berguna dan elegan, tetapi untuk membuat kolase warna pada halaman teks yang dimaksudkan untuk menjadi serius atau informatif mengungkapkan rasa tidak enak dan sedikit akal sehat. .

Ketika kita harus menemukan warna untuk dikaitkan dengan suatu jenis, hal pertama yang harus kita periksa adalah tujuan dari pekerjaan yang harus kita lakukan dan publik yang menjadi sasarannya. Poster yang dimaksudkan untuk mengumumkan album terbaru suatu grup musik tidak sama dengan brosur rencana pensiun dari bank. Kedua tema tersebut sangat berbeda dan ditujukan untuk audiens dengan preferensi dan kebutuhan yang berbeda.

Salah satu faktor terpenting dari teks, yang sangat memengaruhi keterbacaannya, adalah kontras antara teks dan latar belakang penempatannya. Kontras yang memadai berarti teks terbaca dengan baik dan bacaannya tidak melelahkan pembaca, syarat yang sangat penting dalam karya dengan konten tekstual yang penting. Jika jenisnya berkurang ukurannya, kekuatan kontras warna harus ditingkatkan.

Kami terbiasa melihat tulisan hitam di atas kertas putih, dan secara tradisional kombinasi ini paling mudah dibaca. Selain itu, banyak font telah dirancang untuk dibaca sebagai huruf hitam dengan latar belakang putih dan menawarkan keterbacaan optimal saat dicetak dengan cara ini.

Saat warna ditambahkan ke jenis atau latar belakang, keterbacaan teks diubah. Akibatnya, tugas perancang adalah menggabungkan sifat-sifat jenis dan warna untuk melipatgandakan potensi komunikatifnya. Kedua elemen ini dapat menghidupkan sebuah teks yang jika tidak akan gagal dalam aspek komunikatifnya.

Untuk mencapai keterbacaan yang optimal saat mendesain dengan jenis dan warna, Anda harus menimbang dengan hati-hati tiga properti warna (rona, nilai, dan intensitas) dan menentukan kontras yang sesuai antara huruf dan latar belakangnya. Kita dapat menggunakan kontras nada (hangat dan dingin), kontras nilai (terang dan gelap), atau kontras saturasi (jelas dan mati).

Pelengkap, warna-warna tersaturasi penuh biru dan oranye menawarkan kontras tonal penuh, tetapi ketika diterapkan pada jenis dan latar belakang tepi huruf cenderung bergoyang, membuat teks sulit dibaca. Pasalnya, kedua warna tersebut memiliki kecerahan yang saling bersaing dan menuntut perhatian tersendiri. Solusinya adalah melembutkan atau memperdalam salah satu nada dengan membuat nilainya terang atau gelap.

Teks kuning pada latar belakang putih akan kehilangan arti pentingnya, karena tidak akan menonjol karena kedua warna tersebut terang, namun, jika warna latar belakang hitam, kuning akan mendapatkan kekuatan. Menurut beberapa penelitian, huruf yang paling terbaca berwarna hitam dengan latar belakang kuning.

Di sisi lain, jika dua warna analog terlalu dekat pada roda warna dan tidak memberikan kontras warna atau nilai yang cukup, keduanya harus disesuaikan kembali untuk mempertajam kontras tersebut. Awal yang baik adalah memilih warna yang tidak berseberangan langsung atau terlalu dekat dengan roda warna. Warna yang cocok harus dicari, tetapi juga warna yang nilai dan intensitasnya berbeda.

Kami juga harus mempertimbangkan kualitas dan karakteristik masing-masing jenis, karena jenis yang sangat halus atau sempit, atau huruf baris dapat terlihat sangat lemah atau tidak terbaca jika nadanya sangat mirip atau jika nilainya terlalu dekat. Oleh karena itu, harus ada kontras yang cukup untuk melindungi ketepatan huruf.

Jika kontras warna saja tidak cukup untuk menonjolkan jenis dari latar belakang, garis tepi dan bayangan dapat ditambahkan. Bagaimanapun, tidak disarankan untuk menggunakan efek ini di blok teks, karena dalam hal keterbacaan akan lebih berbahaya daripada menguntungkan. Hasil terbaik dicapai dengan orang besar atau di berita utama.

Solusi lain, ketika kontras warna rendah atau ketika fragmen tekstual besar harus dicetak berwarna, adalah mengkonfigurasi spasi dengan benar, karena mendukung keterbacaan.

Dengan menggunakan bingkai, kita dapat memperkaya variasi kromatik suatu teks tanpa harus menambahkan warna tambahan. Layar sangat berguna untuk pekerjaan cetak dengan satu atau dua warna.

Rekomendasi lainnya

Selain semua konsep di atas, ada aturan dasar komposisi lainnya yang selalu memberikan hasil yang baik:

·         Permulaan paragraf harus mudah dikenali, dapat digunakan untuk tujuan ini lekukan, gaya atau pemisahan paragraf dengan pengembalian (satu, tidak pernah dua).

·         Teks yang digarisbawahi harus dihindari sejauh mungkin, terutama judul dan subjudul, karena garis memisahkannya dari teks asalnya. Jika Anda perlu menekankan elemen-elemen ini, lebih baik menggunakan huruf miring daripada menggarisbawahi.

·         Ada baiknya untuk menyisakan lebih banyak ruang di atas judul dan subjudul daripada di bawah, dan untuk menghindari semua huruf besar.

·         Peluru dan indentasi adalah sumber daya yang berguna untuk menyusun informasi, memisahkan konsep, mensubordinasikan satu sama lain, membuat ketergantungan, dll.

·         Spasi putih membuat dokumen lebih mudah dibaca dan memberi Anda ruang yang lebih bersih.

Tipografi di web

Sekarang kami mendekati font dari prisma desain web, pengetahuan umum yang harus dimiliki setiap orang yang ingin membuat situs web. Di akhir teks ini kami juga akan menempatkan beberapa referensi penting untuk memperbarui konten yang terlihat di artikel ini.

Keluarga font yang tersedia di setiap sistem operasi berbeda. Meskipun versi Internet Explorer saat ini menginstal kumpulan font serupa di Windows dan Mac Os, perlu diingat bahwa ada browser dan sistem operasi lain di luar sana, jadi penting untuk memastikan bahwa konten tekstual akan terlihat sama (atau sama) . semirip mungkin) terlepas dari pasangan OS-browser dari setiap pengguna.

Karena 97% pengguna Internet menggunakan PC+Windows atau Mac+Mac Os, tampaknya logis untuk mendesain halaman web kami mencari kompatibilitas tipografi terbaik antara kedua sistem.

Font yang diinstal secara default di Windows dan Mac OS (font aman) adalah:

Sedangkan untuk Linux, jumlah font yang diinstal secara default bergantung pada versinya, meskipun biasanya sedikit.

Font default ini diperluas sesuai dengan aplikasi yang diinstal nanti. Aplikasi Office biasanya menginstal font mereka sendiri, serta browser web, terutama Internet Explorer.

Di sisi lain, Microsoft, Apple, dan berbagai perusahaan yang terlibat dalam Linux menawarkan paket font gratis kepada penggunanya, sehingga jumlah font yang ada di mesin dapat meningkat pesat. Contoh dari paket tersebut adalah Paket Font Windows, yang menyediakan font untuk lingkungan PC dan Mac.

Selalu mencari kompatibilitas maksimum antar platform, dalam desain halaman web kita harus menggunakan hanya font yang aman, terlepas dari font tambahan yang mungkin telah diinstal di komputer oleh aplikasi pelengkap atau oleh pengguna itu sendiri.

Persamaan antara font Windows dan Mac OS

Karena font yang diinstal secara default berbeda untuk PC Windows dan Mac, mungkin halaman web tidak ditampilkan dengan benar jika kami menggunakan font yang tidak kompatibel.

Font yang setara pada sistem PC dan Mac adalah sebagai berikut:

Untuk memastikan visualisasi yang benar di kedua sistem, selalu perlu menggunakan Cascading Style Sheets (CSS), menetapkan dua font yang setara ke elemen tekstual, satu untuk PC dan yang lainnya untuk Mac. visualisasi di sistem lain (Linux, misalnya), kami juga dapat menetapkan keluarga font umum, seperti serif, sans-serif, kursif, dll.).

Contoh:

<style type="text/css">

.headline{font-size:16px;font-family:Arial, Helvetica,sans-serif;}

</style>

...

<p class="headline">Ini adalah judul</p>

Pengguna Mac umumnya memiliki font yang termasuk dalam Windows Font Pack, karena diinstal secara otomatis karena Mac OS hadir secara default dengan Internet Explorer, tetapi kami tidak akan pernah memastikan versi mana yang dimiliki pengguna akhir, jadi aturan mendeklarasikan sumber alternatif melalui CSS kami harus selalu menerapkannya.

Ukuran font

Mac bekerja secara default pada resolusi 72 dpi (piksel per inci), jadi ada kesetaraan yang tepat antara titik dan piksel, sesuatu yang tidak terjadi pada PC Windows, yang resolusi kerjanya secara default adalah 96 dpi.

Mac: 12pt ---------- 12px

PC: 12pt ----------- 16px

Konsekuensinya, ukuran font yang disetel ke poin berbeda di kedua sistem, sehingga pengguna Mac akan melihat font lebih kecil daripada pengguna PC.

Gambar berikut menunjukkan kesetaraan antara titik dan piksel, serta visualisasi berbagai ukuran dalam font Verdana.

Seperti yang Anda lihat pada gambar, ukuran lebih kecil dari 9 piksel (7 poin) tidak ditampilkan dengan benar, karena huruf menjadi terlalu kecil pada ukuran tersebut. Sebaliknya, pada ukuran yang lebih besar dari 16 piksel (12 poin), huruf mulai berskala, menghasilkan efek gigi gergaji pada garis tepinya, terutama di area huruf yang miring dan melengkung.

Karena alasan ini, ukuran konten teks untuk web harus antara 9 dan 15 piksel (7 dan 11 poin), karena dengan nilai ini karakter dapat dibaca dan tanpa penskalaan.

Jika kita perlu memasukkan teks yang lebih besar atau lebih kecil pada halaman, alternatifnya adalah melakukannya sebagai file grafik, dalam format GIF atau PNG, dengan mempertimbangkan ketidakmungkinan memodifikasi teks tersebut "di udara", sehingga tidak dapat dijalankan. sistem ini untuk konten yang harus berubah dengan bahasa, misalnya (Anda harus membuat versi gambar untuk setiap opsi yang memungkinkan)

. resolusi layar mengurangi ukuran relatif font, yaitu ukuran tampilan akhirnya.

Ini memerlukan perhatian khusus saat menggunakan teks kecil dengan resolusi 800x600, karena bagi pengguna yang melihat halaman web pada 1024x768, teks tersebut mungkin tidak dapat dibaca.

Jika perlu menyertakan teks dalam kondisi ini, solusi yang baik adalah membuat dua file gaya CSS, satu untuk setiap resolusi, menetapkan satu file atau lainnya ke halaman menggunakan JavaScript bergantung pada resolusi yang digunakan oleh setiap pengguna.

Keuntungan dan kerugian menggunakan ukuran piksel

Spesifikasi ukuran font dalam piksel menawarkan keuntungan yang memungkinkan kita untuk mengontrol tampilan akhir konten teks setiap saat, karena ini memastikan kompatibilitas maksimum antara sistem operasi dan ketetapan ukuran teks terhadap kemungkinan konfigurasi khusus teks .browser web (View > Font Size > Large, misalnya).

Namun, penggunaannya dapat menyebabkan masalah aksesibilitas, karena mencegah penyesuaian oleh pengguna tunanetra dengan ukuran font yang lebih besar.

Sebagai aturan umum, dan jika spesifikasi proyek tidak menetapkan kondisi aksesibilitas khusus, kami akan selalu menggunakan piksel sebagai unit pengukuran dalam pekerjaan web.

Referensi: Tentang menetapkan ukuran teks dengan CSS, sebaiknya baca artikel Praktik terbaik saat menentukan ukuran teks .

Font untuk digunakan di halaman web

Saat memilih font yang akan kita gunakan di halaman, kita harus memperhitungkan bahwa ada beberapa font yang dirancang khusus untuk dilihat di layar monitor, jadi font tersebut biasanya yang paling sesuai untuk Web.

Font-font ini biasanya sans serif, menyoroti di antaranya Verdana, Arial dan Helvetica, dan jenis sans-serif umum juga dapat ditentukan, yang dengannya browser akan menggunakan font sans serif yang telah diinstal oleh mesin pengguna secara default.

Dalam hal menyediakan dokumen atau halaman kepada pengguna web untuk dicetak, akan lebih mudah untuk mengganti font sebelumnya dengan beberapa jenis serif (dengan pelelangan di ujungnya), karena lebih mudah dibaca dalam dokumen cetak dan tidak terlalu monoton.

Di antara mereka kita dapat menyoroti Times New Roman, Courier dan Courier New, juga dapat menentukan jenis serif generik, yang dengannya browser akan menggunakan font serif yang telah diinstal oleh mesin pengguna secara default.

Dimungkinkan untuk menetapkan ke halaman web menggunakan CSS dua set font yang berbeda, satu untuk ditampilkan di layar dan satu lagi untuk dicetak. Cukup mendeklarasikan dua blok gaya secara terpisah, menentukan dalam atribut media dari tag gaya jenis media yang masing-masing akan valid.

Contoh:

<style type="text/css" madia="screen">

.contents{font-size:12px;font-family:Verdana,Helvetica,sans-serif;}

</style>

<style type="text/ css" madia="print">

.contenidos{font-size:10px;font-family:Times New Roman,Times,serif;}

</style>

Kesimpulan

Ketika bekerja dengan teks pada halaman web kita, kita harus selalu menentukan ukuran font dan keluarga menggunakan gaya CSS.

Ukuran biasanya ditentukan dalam piksel, dengan mempertimbangkan nilai yang valid antara 9 dan 16 piksel.

Jika kita harus menggunakan ukuran 8 piksel dalam resolusi 800x600, visualisasinya yang benar dalam resolusi 1024x768 harus diperiksa, menerapkan file gaya untuk setiap resolusi jika perlu. Dalam hal apa pun ukuran yang lebih kecil dari 8 piksel tidak akan digunakan.

Jika kita harus menggunakan ukuran lebih besar dari 16 piksel, akan lebih mudah untuk mengganti teks yang terpengaruh dengan gambar yang muncul, sehingga menghindari penskalaan.

Font yang akan digunakan adalah font yang setara di PC dan Mac, yang menyatakan keduanya dalam gaya CSS.

Font Verdana, Helvetica dan Arial akan dipilih lebih disukai untuk presentasi teks di layar, juga menambahkan font sans-serif umum, demi visualisasi yang benar dalam semua kasus.

Jika kami menawarkan halaman alternatif untuk dicetak, mereka sebaiknya menggunakan font Times New Roman dan Times, menambahkan font serif umum.