TIPOGRAFI

A.    Tipografi Dasar

Konsep dasar tipografi yang bersangkutan dengan media adalah web, media cetak, atau papan reklame. Kita akan melihat konsep-konsep yang umum sebelum memeriksa bagaimana menerapkannya ke web.

B.     Pengertian Tipografi

Tipografi atau tatahuruf merupakan suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.

C.    Salinan Tubuh vs Jenis Tampilan

Salinan Tubuh atau teks tubuh mengacu pada isi komunikasi utama, yaitu, konten paragraf. jenis Tampilan, tampilan teks juga disebut judul atau teks, mengacu pada teks yang digunakan untuk dekorasi dan / atau struktur, seperti logo, judul, dan sub-judul. Fokus utama untuk body copy adalah keterbacaan-tidak ada yang ingin mencoba untuk menguraikan suatu Seluruh ayat jenis huruf sulit dibaca dekoratif, terutama pada ukuran kecil. Body copy harus ditetapkan dalam terbaca, sederhana, jenis huruf tidak terlalu kecil.

Fokus utama dari jenis tampilan adalah untuk memperindah atau menarik perhatian. Menampilkan elemen jenis seperti judul biasanya hanya terdiri dari frase pendek diatur dalam ukuran font yang lebih besar, dalam hal ini bahkan tipografi sangat dekoratif bisa terbaca. Dengan demikian, kita memiliki lebih banyak kebebasan untuk menggunakan tipografi agak kurang dibaca untuk jenis tampilan.

D.    Jenis Huruf dalam Tipografi

Jenis huruf mengacu pada desain untuk karakter tertentu, seperti sebagai Times New Roman, Arial, dan sebagainya.

E.     Format dan Kontras

Karakteristik dari gaya tipografi dapat menciptakan penekanan dan Sebaliknya, minsalnya:

·         Ukuran: besar versus kecil.

·         Berat: bold versus tidak bold.

·         Warna: kesesuain dengan ide apa yg ingin disampaikan.

·         Bentuk: italic, SEMUA CAPS, atau CAPS KECIL versus tidak miring (juga disebut roman), dan tidak caps (juga disebut huruf kecil).

·         Arah: apakah jenisnya adalah horizontal atau di beberapa sudut lain, seperti menjalankan vertikal, atau pada jalur melengkung.

·         Rhythm 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 1.1.

·         Tekstur: bagaimana blok menjadi sebuah bentuk, baik berat ( spasi teks berdekatan) atau ringan (teks banyak spasi).

Gambar 1.1

Meskipun demikian, kita tidak boleh begitu terpukau oleh kemungkinan tipografi yang dapat menjadikan halaman visual menjadi kacau. Namun kita dapat menggunakan semua atribut dengan hemat dan dengan makna yang melekat. Misalnya, gunakan huruf tebal, miring, atau warna yang kontras untuk menarik perhatian pada struktur atau memberikan penekanan pada unsur-unsur yang harus menonjol dalam hirarki visual, bukan hanya untuk hiasan acak.

F.     Jarak

Jarak mengacu pada ruang kosong yang memisahkan baris teks horisontal.  menunjukkan tiga nilai utama yang berbeda: pertama mengalami penurunan sebesar 20%, standar satu spasi , dan kedua meningkat sebesar 20% ahli Cetak sering merekomendasikan bagian yang ini, 10-20% tambahan ruang, karena itu membuat lebih mudah bagi mata pengunjung untuk melacak dari ujung satu baris ke awal dan kemudian berikutnya. Dan yang terakhir ini disukai untuk dibaca lebih lama baris teks.

Gambar 1.2

G.    Tipografi dan Desain Web

Tipografi dan format pada web. Sebagai contoh, kita bisa memanipulasi karakteristik ketikan dengan HTML dan CSS (ukuran, warna, tebal huruf, efek italic, dan sebagainya), tapi seperti bayangan bevel atau drop dapat diterapkan hanya dalam gambar grafis.

H.    Teks HTML

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

I.       Tipografi HTML  

Ini sangat penting untuk mengetahui bahwa jenis huruf cocok dengan pengunjung Browser hanya jika tampilan yang sudah diinstal pada sistem komputer pengunjung. Jika tidak, browser menggantikan spesifik jenis huruf dengan huruf  biasa yang memutuskan untuk menjadi pengganti yang wajar.

J.      HTML DAN CSS REVIEW: Menentukan tipografi

Berikut adalah bagaimana Anda dapat menghindari keputusan browser yang buruk dalam menententukan tipografi cadangan menggunakan CSS:

body {font-family: Georgia, Times, serif;}

Seperti disebutkan sebelumnya, "font" dalam tipografi tradisional mengacu pada variasi pada jenis huruf tertentu, termasuk karakteristik seperti bold dan italic. Dalam CSS, meskipun, "font" mengacu pada daftar tipografi cadangan. Ketika font-family ditentukan, browser bekerja menjelajahi daftar, dengan menggunakan jenis huruf pertama yang ditemukan pada sistem pengunjung. Dengan demikian, kita dapat merasa bebas untuk menentukan tipografi. Beberapa browser yang lebih baru mendukung tipografi download dengan halaman. Sayangnya, standar jenis huruf dekoratif mungkin 100K atau lebih, yang merupakan sebuah download tidak masuk akal. Akibatnya, ini bukan teknik yang kita akan mengeksplorasi lanjut. Alternatifnya, tentu saja, adalah dengan menggunakan jenis huruf khusus dengan menempatkan dalam gambar grafis, teknik kita akan melihat nanti dalam bab ini. HTML tag <font> adalah metode ditinggalkan Anda paling mungkin untuk menemukan di situs yang lebih tua, dan Anda tidak harus menggunakannya dalam pembangunan baru. Untuk situs baru, tetap dengan CSS setara. Tipografi Kebanyakan pada awalnya dirancang untuk media cetak dan karenanya tidak dioptimalkan untuk resolusi rendah dari layar komputer.

K.    Ukuran Font HTML  

HTML menggunakan skala 1 sampai 7 untuk ukuran font, dengan 1 menjadi terkecil, 3 menjadi standar, dan ukuran 7 menjadi yang terbesar. TABEL 7.1 menjelaskan perbedaan antara Windows dan Mac OS.

Table 7.1

L.     Ukuran Font Relatif dan Pewarisan

Bila menggunakan sifat ukuran font relatif dalam CSS, seperti teks-size: 110% atau text-size: 1.1em, teorinya adalah bahwa diferensial ukuran relatif harus diterapkan untuk apa pun karakteristik ukuran font telah ada sebelumnya. Misalnya: Jika font dasar halaman adalah ukuran 3, Dan font untuk tabel ditentukan sebagai 110%, Dan header (yang terkandung dalam tabel) ditetapkan sebagai 120%, Kemudian, dalam teori, header harus ditampilkan di dasar ukuran font x 110% x 120%.

M.   Memformat HTML

Tentu ada saja, perintah format umum yang dapat kita gunakan dalam HTML atau CSS, seperti yang terakhir dalam Tabel 7.2.

Table 7.2

N.    Warna

Didalam pemberian warna teks harus lah mempertimbangkan keterbacaan oleh pengunjung, minsalnya jika warna dari latar belakang putih maka akan jelas sekali terbaca jika warna teks hitam, yang perlu diwaspadai dalam pemilihan warna untuk teks adalah memilih warna yang terkesan menyatu dengan latar belakang sehingga ini dapat mengakibatkan ketidak terbacaan oleh pengunjung yang buta warna.

O.    Tekanan

Untuk menekankan kata-kata, pilihan kita mencakup semua opsi berbagai format . Pada Tabel 7.2. Setiap gaya memiliki tempatnya. Misalnya,  hindari penggunaan huruf dengan caps lock seerti berikut ini: HARI INI, KITA UMUMNYA HINDARI MENGGUNAKAN SEMUA CAPS DALAM TEKS TUBUH KARENA MEMBUAT KONTEN KERAS UNTUK MEMBACA. selain itu, semua caps memiliki negatif ​​konotasi berteriak di email dan instan messaging.

P.     Spasi Teks HTML

Mengubah garis default dan karakter spasi dapat meringankan "grayness" keseluruhan halaman hambar. Secara khusus, meningkatkan halaman dari jarak standar tunggal HTML dapat meningkatkan pelacakan mata dari satu baris ke depan, terutama pada baris  teks. Mengatur pengendalian dengan CSS:

largerLeading1 {line-height: 1.1em}.

largerLeading2 {line-height: 110%}.

Spasi ekstra antara huruf atau kata-kata yang dapat digunakan untuk penekanan, seperti untuk header. GAMBAR 7.7 menunjukkan bagaimana spasi / pelacakan dan kata spasi dapat dikontrol oleh CSS (di browser yang lebih baru), menggunakan absolut (piksel) atau relatif (ems dan persen) spasi teks.

Gambar 7.7

Q.    Karakter Khusus dan Tanda Baca HTML

Berikut akan diuraikan aturan untuk konten ini:

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

■ Gunakan strip en (tanda hubung lebar huruf N, seperti ini -) untuk memisahkan bergabung kata, dan benar em strip (lagi, lebar huruf M, seperti ini -) untuk terpisah kalimat klausa. Seringkali, kita palsu dasbor em dengan dua tanda hubung, tetapi benar lari em terlihat lebih profesional. en dasbor Contoh: "Batas garis panjang untuk 30-70 karakter."

Example: “Limit line length to 30–70 characters.”

HTML code: &ndash; or &#8211;

em dash

Example: “Email—like snail mail—gets the job done.”

HTML code: &mdash; or &#8212;

■ Gunakan tanda kutip "keriting": Contoh: "curly quotes" versus " kutipan lurus " HTML Kode:

Curly left double quote: &ldquo; or &#8220;

Curly right double quote: &rdquo; or &#8221;

Curly left single quote: &lsquo; or &#8216;

Curly right single quote: &rsquo; or &#8217;

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

Example: “em dash, en dash, curly quotes…”

HTML code: &ellip; or &#8230;

■ Gunakan kode HTML untuk karakter khusus lainnya yang sesuai. Misalnya, Anda mungkin ingin menanamkan ampersand, "&" (&), ruang (), atau hak cipta simbol "©" (©).

R.    Huruf Besar dan Huruf Kecil Angka, UNTUK JENIS-terobsesi

Beberapa tipografi datang dengan angka huruf besar (semua sama Ukuran, juga disebut nomor lining), sementara yang lain datang dengan angka huruf kecil

■ Verdana meliputi angka huruf besar: 123456789

■ Georgia meliputi angka huruf kecil: 123456789 Angka huruf besar tampak terlalu tinggi dan kuning bila dicampur dengan huruf kecil surat, sementara angka kecil menggantung tidak tepat di bawah garis sebaliknya blocky huruf besar huruf. contoh:

■ Tidak dapat diterima: huruf dan nomor yang berbeda

■ huruf besar huruf kecil dengan angka 123456789

■ huruf kecil huruf disertai dengan huruf besar dengan nomor 123456789

■ diterima: huruf dan angka yang sama

■ huruf besar dengan angka besar 123456789

■ Turunkan-huruf disertai dengan huruf kecil 123456789 nomor Karena tipografi kebanyakan hanya mencakup angka kecil huruf besar atau hanya, biasanya kita perlu mengubah tipografi untuk memperbaiki ketidakcocokan.

Ringkasan
Tipografi biasanya transparan yaitu, jika itu adalah jenis huruf terbaca di ukuran yang tepat dan warna untuk latar belakang di mana itu terletak, pembaca bahkan tidak menyadarinya. Meskipun demikian, pengaruh tipografi mengarahkan pengujung membaca konten, serta memiliki efek halus pada bagaimana mereka memandang situs Anda. Memilih tipografi yang tepat dan mengendalikan presentasi mereka sangat penting untuk menyampaikan pesan Anda.