TIPOGRAFI WEB

TIPOGRAFI WEB

A.    PENDAHULUAN

Tipe huruf sangat menarik perhatian, menetapkan gaya dan nada dokumen, serta warna bagaimana pembaca menafsirkan kata-kata, dan mendefinisikan halaman biasanya pembaca mengakui tanpa ada jenis huruf tertentu.

Tipe huruf biasanya transparan, Sebuah pilihan yang tepat jika pembaca tidak menyadarinya. Dengan demikian fungsi utama dari tipe menjadi utilitarian. Kata-kata harus diatur dalam bacaan huruf, ukuran dan warna yang tepat untuk latar belakang yang di atasnya sisa kata-kata.

Meski begitu jenis huruf memiliki efek subliminal. Sebuah jenis huruf mungkin dianggap konyol, serius, berangin, eksotis, feminim, atau formal. misalnya Jenis huruf A harus visual secara konsisten dengan suasana dan kepekaan dari situs tersebut. Sebuah jenis huruf sangat dekoratif menghiasi, akan tetapi ada sebagian yang tidak patut di gunakan pada situs, bentuk permukaan masuk akal  dan berada di situs game online.

Tipe huruf  merupakan Konsep dasar tipografi yang bersangkutan apakah media web, bahan cetak, atau billboard di samping sebuah super high way. Kita akan melihat orang-orang yang universal konsep-konsep sebelum memeriksa bagaimana menerapkannya ke web.

B.     PEMBAHASAN

1.      Tipe Huruf

Tipe huruf mengacu pada desain tertentu untuk karakter seperti Courier, Times New Roman, Ariel, Universitas, Curly, dan sebagainya. Font adalah Sebuah tampilan huruf dengan ukuran tertentu dan gaya tertentu seperti (bold, italic, dll). Times New Roman jenis huruf pada 12 piksel dalam huruf tebal adalah satu font, sementara Times New Roman pada 14 piksel, berani, secara teknis font yang berbeda.

Tipografi yang paling modern menggunakan spasi. Artinya karakter huruf bervariasi dalam jumlah ruang horizontal yang digunakan, sehingga bahwa "i" mengkonsumsi ruang kurang dari satu "M." Sebaliknya, tipografi monospace, seperti Courier New, menetapkan jumlah yang sama ruang untuk masing-masing karakter . Misalnya, ini "i" pada jenis huruf Courier New adalah lebar sama dengan huruf "N" dan "W" dalam huruf yang sama. Tipografi monospace berguna ketika kolom karakter harus menyelaraskan vertikal atau ketika kita membutuhkan nuansa tampilan kuno dan tampilan terbaru.

Font berhubungan dalam hal tipografi tradisional, mencakup semua variasi jenis huruf tertentu, sehingga Times New Roman mencakup bagian versi bold, versi italic, dan sebagainya. Seperti yang kita lihat font berarti sesuatu yang sangat berbeda dalam cascading style sheet (CSS).

Tipografi yang ringan dikelompokkan sebagai serif atau serif sans. tampilan serif memiliki stroke didefinisikan kecil atau hiasan di kedua ujung stroke surat utama, seperti yang ditunjukkan pada GAMBAR 7.1

Bentuk Sans serif yang ditunjukkan pada Gambar 7.1, tidak memiliki hiasan pada stroke utama, dan sering dipandang sebagai efek yang lebih modern. Pada kenyataannya, mereka tampaknya menjadi pilihan yang lebih umum di dunia usaha saat ini.

Ada beberapa ukuran huruf yang tinggi dan kurus, ada yang pendek dan gemuk. Kita dapat menggunakan rasio Lebar – Ke - Tinggi untuk keuntungan kita menyesuaikan pilihan jenis huruf pada web untuk mengakomodasi ruangan  terbatas.

Sebagai aturan umum untuk menggunakan satu jenis huruf yang sederhana untuk body copy, dan satu atau dua tampilan dekoratif dalam dan logo / atau header. Tipografi mungkin kontras dalam struktur, mungkin body copy adalah font serif sederhana sedangkan logo menggunakan versi yang lebih besar dan lebih berani dari font yang sama serta lain jenis huruf yang sangat dekoratif. Seringkali, yang terbaik untuk memilih dua font yang sangat berbeda yang kontras tajam, bukan dua atau lebih font yang sangat mirip.

Format dan Kontras

Karakteristik lain dari bagian desain tipografi dapat menciptakan penekanan dan kontras ketik:

■ Ukuran: besar versus kecil

■ Berat: bold versus tidak bold

■ Warna: Mendapatkan ide

■ Bentuk: italic, SEMUA CAPS, atau KECIL CAPS versus tidak miring (juga disebut roman), dan bukan topi (juga disebut huruf kecil)

■ Arah: apakah jenisnya adalah horizontal atau di beberapa sudut lainnya, seperti berlari vertikal, atau pada jalur melengkung.

■ Rhythme dan jarak: karakter yang berbeda spasi, atau
bahkan terisolasi. (Kita akan membahas spasi secara lebih mendalam, di bagian berikutnya.)

■  perhiasan: pola, bevels, bayangan, dan cahaya, seperti yang ditunjukkan pada GAMBAR 7.3.

      ■ Tekstur: bagaimana blok tipe mengaturnya menjadi bentuk, baik berat (teks tanpa spasi) atau ringan (teks banyak spasi)

Salah satu cara untuk mengidentifikasi ketikan terlalu banyak adalah untuk berdiri kembali dari layar komputer dan melirik halaman web. Unsur-unsur teks yang paling tegas akan berdiri keluar dari blur, Jika ada daerah yang terlalu banyak penekanan mungkin perlu beberapa pelunakkan.

Jarak

Mengacu pada ruang kosong yang memisahkan baris teks horisontal. GAMBAR 7.4  menunjukkan tiga nilai utama yang berbeda:

1.      terkemuka mengalami penurunan sebesar 20%, standar satu spasi terkemuka (dalam hal ini, sama dengan tinggi teks)

2.      terkemuka meningkat sebesar 20%. Cetak ahli sering merekomendasikan looser terkemuka, 10-20 % tambahan ruang, karena itu memudahkan bagi mata pemirsa untuk melacak dari ujung satu baris ke-ning mulai dari berikutnya.

Looser terkemuka terutama disukai untuk dibaca pada baris teks lagi. Ketat terkemuka lebih disukai pada ukuran font yang lebih besar, seperti judul. keragaman terkemuka dapat bervariasi, warna dari halaman. Artinya, hal itu dapat membuat halaman terlihat lebih gelap dan lebih padat, atau lebih ringan dan kurang padat, sebagai contoh dalam Gambar 7.4

Pada jumlah ruang antara baris teks, huruf spasi mengacu pada jumlah ruang antara individu char-acters dalam paragraf atau potongan lain yang dipilih dari teks. Meskipun luas spasi dapat digunakan untuk penekanan dalam pos dan elemen dekoratif lainnya, jika penentuan jarak terlalu lebar, pembaca mengalami kesulitan dalam mengelompokkan huruf menjadi kata-kata yang berbeda.

Pembenaran

GAMBAR 7.6 menggambarkan beberapa jenis pembenaran teks (perataan teks):

■ copy Tubuh Kiri dibenarkan harus selalu dibenarkan kiri, kanan compang-camping (yaitu, ujung-ujung garis tidak sejajar) di web

■ Pusat dan kanan dibenarkan Meskipun sesuai untuk header dan elemen disorot lainnya, tidak satu pun harus digunakan untuk body copy. Mereka juga tidak pantas untuk daftar bullet atau nomor, karena nomor tidak berbaris.

■ pembenaran Kendali Penuh dibenarkan (ketika kedua margin kanan dan kiri yang selaras pada semua tapi baris terakhir dari sebuah paragraf) yang baik hanya jika media tersebut memungkinkan untuk mikro-penyesuaian jarak dan baris teks yang cukup lama untuk menyebarkan mereka menyesuaikan- KASIH keluar. Jika tidak, jarak jelas tidak merata dapat mengakibatkan, seperti dalam contoh terakhir dari Gambar 7.6

2.      Tipe Huruf dalam Desain Web

Selain pedoman tipe huruf standar kami sudah diperiksa, ada masalah pada tipe huruf  dan format tambahan untuk menggunakanya pada web. Sebagai contoh, kita dapat memanipulasi beberapa karakteristik ketik dengan HTML dan CSS (ukuran, warna, wajah tebal, miring, dan sebagainya), namun efek lain seperti bevel atau drop shadow dapat diterapkan hanya dalam gambar grafis. Mari kita lihat kedua teks HTML dan teks grafis secara lebih mendalam.

Teks HTML

Teks HTML adalah teks yang tertanam dalam tag HTML dan yang menerima format instruksi dari HTML dan/atau CSS

Tipe Huruf HTML

Ini sangat penting untuk mengetahui bahwa jenis huruf sangat ditentukan dalam menampilkan pada pencarian,  jika tampilan yang sudah diinstal pada sistem komputer pemirsa  Jika tidak, browser menggantikan jenis huruf tertentu dengan jenis huruf pengganti yang wajar. Karena browser sering membuat keputusan cukup minim dalam hal ini, kita dapat mengambil tanggung jawab yang jauh dari browser.

Menentukan Tipe Huruf  HTML DAN CSS REVIEW:

Berikut adalah bagaimana Anda dapat menghindari keputusan browser yang buruk dan menentukan cadangan tipografi menggunakan CSS:
body {font-family: Georgia, Times, serif;}

Seperti disebutkan sebelumnya, "fon" dalam tipografi tradisional mengacu pada variasi jenis huruf tertentu, termasuk karakteristik seperti bold dan italic. Dalam CSS, meskipun, "keluarga font" mengacu pada daftar tipografi cadangan.

Tipe huruf Kebanyakan pada awalnya dirancang untuk media cetak dan karenanya tidak dioptimalkan untuk resolusi rendah dari layar komputer. Untuk memperbaiki hal ini, Microsoft mempekerjakan jenis desainer terkenal Matthew Carter untuk menciptakan tampilan Georgia (serif) dan Verdana (sans serif) khusus untuk tampilan layar yang optimal. Proses mengambil Carter dua tahun tapi layak usaha.

Karakter font ini telah mengisyaratkan baik, lebih besar dan lebih seragam dalam bentuk spasi. yang meningkatkan bacaan pada layar. disarankan untuk menggunakan salah satu dari dua tipografi pada copy tubuh yang paling.

Ahli Tipografi berpendapat bahwa body copy cetak lebih mudah dibaca dalam huruf serif, karena serif memberikan isyarat dengan cepat dianggap bentuk surat.

Font Ukuran HTML

HTML menggunakan skala 1 sampai 7 untuk ukuran font, dengan 1 menjadi, terkecil 3 menjadi ukuran standar, dan 7 menjadi yang terbesar. Meskipun apa yang tampaknya designators ukuran umum, sistem operasi yang berbeda juga dapat menggunakan nomor yang berbeda dari piksel untuk membangun font pada ukuran masing-masing. TABEL 7.1 menjelaskan perbedaan dalam hal ini

     Ukuran font ditentukan dalam HTML dengan tag size="n"> <font. Karena tag <font> sudah ditinggalkan, kita hanya akan menggunakan font yang ukuran CSS dalam diskusi ini. Dengan CSS, kita dapat menggunakan baik teks absolut atau relatif ukuran.

Ukuran Teks Absolut

Kami menggunakan teks mutlak sizing menetapkan ketinggian pixel khusus untuk teks, benar-benar mengabaikan teks ukuran saat ini ditetapkan dalam browser pengunjung. Sebagai contoh:

largeText {ukuran font: 18px;}

Pada browser lama, mutlak sizing menimpa pengaturan font pengunjung mungkin telah ditentukan, yang dapat menyebabkan masalah bagi mereka dengan gangguan penglihatan. (Browser yang lebih baru memungkinkan pengunjung untuk mengesampingkan pengaturan font pada situs web.) Absolute ukuran paling bermasalah bila digunakan untuk mengurangi (bukan memperbesar) ukuran teks.

Ukuran Tesk Relatif

Dengan ukuran teks relatif, ukuran font saat ini berlaku ditambah atau dikurangi oleh proporsi tertentu:

LargeText {font-size: 110%;}

LargeText {font-size: 1.1em;}

Ukuran teks Absolut dan Relatif

Ada dua alasan utama untuk memilih ukuran teks relatif:

■ Seperti yang telah kita lihat, ukuran teks mutlak dapat menimpa ukuran font pengunjung 'set-tings, aksesibilitas sehingga merendahkan untuk tunanetra.

■ Seperti yang kita lihat pada Tabel 7.1, resolusi teks berubah ketika kita melintasi PC Windows vs Mac membagi. Jika ukuran mutlak digunakan, menentukan ukuran teks dari 24 hasil piksel dalam 1/3 "(24/72) pada Mac tapi 1/4" (24/96) pada PC, perbedaan yang substansial. Di sisi lain, karena basis mereka ukuran font yang kurang lebih sama, relativitas-tive teks sizing diterapkan di atas dasar yang sama font tersebut harus menghasilkan teks yang kira-kira ukuran yang sama.

Format HTML

Perintah format umum yang dapat kita gunakan dalam HTML atau CSS, seperti yang terakhir dalam Tabel 7.2. Apa yang kita benar-benar perlu untuk memeriksa sekarang, meskipun, adalah ketika itu tidak tepat untuk menggunakan format tersebut.

Warna

Warna teks yang berkaitan dengan warna latar belakang mungkin adalah keputusan Format yang paling penting. Jelas teks kuning pucat pada latar belakang putih akan terbaca karena ada nilai begitu sedikit (tingkat terang atau gelap) kontras antara latar depan dan latar belakang.

Tapi kontras adalah sangat penting tidak membatasi kedengarannya. Meskipun teks hitam pada latar belakang putih memberikan kontras nilai yang paling akrab dan mudah dibaca, kontras kurang ekstrim masih bisa terbaca sambil memberikan suasana hati yang lebih tenang ke situs. Misalnya, kuning krim di atas cokelat nilai pertengahan mungkin cukup terbaca. Meskipun demikian, kita harus lebih berhati-hati untuk menguji suatu situs di grayscale mode untuk memastikan itu dapat diakses oleh pengunjung buta warna.

Teks cahaya pada latar belakang gelap kadang-kadang bisa terbaca kurang dari skema familiar yang lebih gelap-on-ringan. Kita sering dapat mengatasi masalah ini dengan membuat teks lebih besar atau lebih berani atau dengan memilih jenis huruf dengan stroke inheren tebal.

Tekanan

Untuk menekankan kata-kata, pilihan kami meliputi semua pilihan format berbagai Tabel 7.2. Setiap gaya memiliki tempatnya. Misalnya, huruf tebal dan miring digunakan dalam dunia cetak untuk menunjukkan kosa kata (seperti dalam buku ini) atau penekanan lisan. Banyak ahli menyatakan tebal yang membuat lebih jelas pada layar daripada miring, tetapi sering tergantung pada jenis huruf.

Dekorasi

Menggunakan garis bawah untuk penekanan lain throwback untuk zaman dahulu bagi penulis. sekarang seorang pengunjung yang menemukan teks digaris bawahi pada web bingung dan kesal jika teks yang tidak dapat diklik. coretan juga dilihat sebagai trik format lama dan berpotensi membingungkan, kecuali tidak menggunakannya.

Spasi Teks HTML

Mengubah garis default dan karakter spasi dapat meringankan keseluruhan halaman keabu-abuan.  Secara khusus, meningkatkan dari standar tunggal HTML. spasi dapat meningkatkan pelacakan dari satu baris ke depan, terutama pada baris teks yang dikendalikan dengan CSS

Larger Leading1 {line-height: 1.1em}

Larger Leading2 {line-height: 110%}

Spasi ekstra antara huruf atau kata-kata yang dapat digunakan untuk penekanan, seperti untuk kepala. GAMBAR 7,7 menunjukkan bagaimana spasi / pelacakan dan jarak kata dapat dikendalikan oleh CSS (di browser yang lebih baru), menggunakan absolut (piksel) atau spasi teks relatif.

Industri cetak memiliki standar spasi lain bahwa kita harus mengikuti di web juga sebagai berikut:

■  Gunakan hanya satu ruang, bukan dua, di akhir kalimat. Untungnya, ini adalah default di HTML, karena tidak mengakui ruang yang berdekatan ganda.

■ Gunakan baik sebagai indent pada awal paragraf, atau spasi ganda antara paragraf (ini adalah pilihan otomatis lebih mudah dalam HTML), tetapi tentu tidak keduanya.

■ Idealnya, memungkinkan baris kosong otomatis sebelum tag header, tetapi menggunakan styling marjin CSS untuk menghilangkan baris kosong otomatis setelah tag. Dengan cara itu, header adalah lebih dekat dan lebih visual terhubung ke konten yang memperkenalkan:

h1 {margin-bottom: 0EM;}

Sayangnya, setiap tag <p> segera setelah tag header akan menambahkan spasi ekstra kembali, sebagai tag <p> yang wont dapat dilakukan. Oleh karena itu, kita juga harus menghapus spasi tambahan dari tag tersebut <p>:
p.firstParagraph {margin-top: 0EM;}

Pembenaran Teks HTML

Kiri, kanan, dan pembenaran pusat teks cukup mudah untuk dilakukan di HTML dan CSS, baik menggunakan HTML yang ditinggalkan align = "..." atribut atau properti text-align dalam CSS. Namun, pembenaran penuh (teks sejajar pada kedua kiri dan kanan) hampir tidak mungkin untuk menarik off pada antarmuka komputer, sedangkan 72-100 ppi dari layar komputer tidak dapat memungkinkan untuk penyesuaian halus.

Tata Letak Teks HTML

Pedoman tata letak di Bab sebelumnya, tapi tata letak pedoman khusus untuk teks HTML harus dipertimbangkan juga. Pembaca web skim konten, daripada membaca dengan hati-hati. Oleh karena itu, penting untuk potongan bahwa konten, yaitu, kelompok konten ke kecil, bagian yang dapat diidentifikasi dengan menggunakan tag HTML seperti table, <div>, <fieldset>, <ol>, dan <ul>. Untuk daftar bullet, kita dapat menggunakan peluru default disediakan secara otomatis oleh browser (tidak ada peluru styling CSS).

Marks Tanda Baca dan Karakter khusus HTML

Aturan tipe huruf  untuk konten cetak sebanyak konten yang muncul di web. Ringkasan aturan lebih berharga berikut.

■ Jangan gunakan tanda seru yang berlebihan dalam teks! (Lihat saja betapa menjengkelkan ini!) Menggunakan tanda seru banyak mencairkan kekuasaan mereka ke titik bahwa mereka semua menjadi tidak berarti

■  Gunakan strip en (tanda hubung lebar huruf N, seperti ini) untuk memisahkan kata-kata bergabung, dan benar em strip (lagi, lebar huruf M, seperti ini) untuk klausa kalimat terpisah. Seringkali, kita palsu dasbor em dengan dua tanda hubung, tapi dash em benar terlihat lebih profesional em dasbor

Contoh: "Batas garis panjang untuk 30-70 karakter.

" HTML code: - atau-em dasbor

Contoh: "Email-email seperti siput-mendapatkan pekerjaan.

" HTML code: - atau –

■ Gunakan benar "keriting" tanda kutip:

Contoh: "curly quotes" versus "tanda kutip lurus"

HTML Kode:Curly meninggalkan kutip ganda: "atau" kutipan ganda Curly kanan: "atau" Curly meninggalkan kutip tunggal: 'atau' kutip tunggal Curly benar: 'atau'

■ Gunakan elips yang benar (...), yang merupakan simbol tunggal, sebagai lawan tiga periode terpisah (...).

Contoh: "em dash, en dash, keriting kutipan ..."

HTML code: &ellip; atau ...

■ Gunakan kode HTML untuk karakter khusus lainnya yang sesuai.

Contoh, Anda mungkin ingin menanamkan ampersand, "&" (&), ruang (), atau simbol copy-benar "©" (©). Lihat situs web buku untuk daftar kode lainnya.

Grafis Teks

Teks grafis teks dibuat dalam program editing gambar seperti Photoshop atau Fireworks, disimpan sebagai gambar dan kemudian tertanam dalam HTML menggunakan tag <img />. GAMBAR 7,9. menunjukkan hanya beberapa efek dan filter yang dapat diterapkan untuk teks grafis.

Meskipun teks yang disimpan sebagai gambar, cocok untuk elemen dekoratif seperti logo, tombol navigasi, dan mungkin header. teks yang disimpan sebagai grafik tidak boleh digunakan untuk body copy. seorang desainer web baru yang berpengalaman tahu bahwa halaman salinan dekoratif tidak pernah bernilai download.

Banyak dari konsep-konsep tipografi umum disajikan sebelumnya untuk teks HTML, termasuk perbedaan dalam tipografi, ukuran, dan format, masih berlaku untuk teks disimpan sebagai gambar. Perbedaan utama adalah bahwa kita memiliki lebih banyak kebebasan dalam teks grafis untuk menggunakan efek, filter, dan apa pun bentuk huruf yang kita harap, karena kita tidak perlu khawatir tentang apakah atau tidak pengunjung memiliki tipografi.

Terminologi untuk teks anti-aliasing bervariasi agak antara program editing gambar. Terminologi untuk anti aliasing di Fireworks dan Photoshop tercantum dalam sidebar di bawah ini.

Teks dan Aksesibilitas

Aksesibilitas telah dibahas di seluruh bab ini, sehingga hanya rekap yang  dibutuhkan di sini:

■ Gunakan teks ukuran relatif pada body copy (em dan persen), agar tidak menimpa pengaturan ukuran teks yang pengunjung telah ditentukan dalam browser mereka. (Perhatikan bahwa browser yang lebih baru memungkinkan pengunjung untuk mengesampingkan setiap web pengaturan situs ukuran font, termasuk ukuran mutlak.)

■  Pastikan bahwa teks latar depan bernilai kontras (tingkat terang atau gelap dari warna) dengan latar belakang sehingga teks terbaca bahkan untuk orang-orang yang buta warna.

■ Mempekerjakan sundulan HTML tag (<h1>, <h2>, dll) untuk memberikan tunanetra dengan garis besar struktur hirarkis halaman.

■ Sertakan atribut  pada semua gambar, termasuk gambar teks grafis. Ini adalah cara yang paling penting untuk membuat konten gambar diakses oleh tunanetra. Jika gambar dekoratif saja, tanpa makna terpasang, menggunakan tag alt kosong (alt = "") untuk menghindari keterlambatan pembaca layar berbicara deskripsi ingless berarti.