TYPOGRAPHY
Diajukan untuk memenuhi salah satu tugas mata kuliah pembelajaran
berbasis web
Dosen
pembimbing :
Dr.
Darmansyah, M.Pd
Dibuat Oleh:
DEWI PERMATA
SARI
NIM: 1303908
PROGRAM STUDI TEKNOLOGI PENDIDIKAN (S2)
PASCA SARJANA UNIVERSITAS NEGERI PADANG
PADANG
BAB
I
PENDAHULUAN
Konsep dasar tipografi dasar yang bersangkutan
apakah medium adalah web, materi cetak, atau billboard di samping sebuah
superhighway. Kita akan melihat orang-orang yang universal konsep-konsep
sebelum memeriksa bagaimana menerapkannya ke web.
Body copy atau teks tubuh mengacu pada isi utama komunikasi, yaitu, para konten grafik. Jenis tampilan, juga disebut menampilkan teks atau teks judul, mengacu pada teks digunakan untuk dekorasi dan / atau struktur, seperti logo, judul, dan sub-judul.
Fokus utama untuk body copy adalah mudah dibaca-tidak ada yang ingin mencoba untuk menguraikan seluruh ayat dari jenis huruf dekoratif sulit dibaca, terutama pada ukuran kecil. Body copy harus ditetapkan secara sederhana, mudah dibaca, jenis huruf yang tidak terlalu kecil. Fokus utama dari jenis layar adalah untuk memperindah atau menarik perhatian. Display type elemen seperti judul biasanya hanya terdiri dari frasa singkat 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.
Body copy atau teks tubuh mengacu pada isi utama komunikasi, yaitu, para konten grafik. Jenis tampilan, juga disebut menampilkan teks atau teks judul, mengacu pada teks digunakan untuk dekorasi dan / atau struktur, seperti logo, judul, dan sub-judul.
Fokus utama untuk body copy adalah mudah dibaca-tidak ada yang ingin mencoba untuk menguraikan seluruh ayat dari jenis huruf dekoratif sulit dibaca, terutama pada ukuran kecil. Body copy harus ditetapkan secara sederhana, mudah dibaca, jenis huruf yang tidak terlalu kecil. Fokus utama dari jenis layar adalah untuk memperindah atau menarik perhatian. Display type elemen seperti judul biasanya hanya terdiri dari frasa singkat 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.
Dikenal
pula seni tipografi, yaitu karya atau desain yang menggunakan pengaturan huruf sebagai elemen utama.
Dalam seni tipografi, pengertian huruf sebagai lambang bunyi
bisa diabaikan. Di dunia huruf terdapat dua kategori besar pilihan, yakni serif
/ huruf berkait dan sans-serif / rupa huruf tanpa kait. Serif adalah penamaan untuk kaki dekoratif
kecil yang ada di bagian ujung huruf. Jenis huruf serif memiliki basis dasar
yang lebih kuat dengan "kaki" yang dimilikinya. Bentuk ini membantu
mata pembaca dalam melakukan penelusuran secara horizontal di sepanjang garis
tulisan. Sans serif seringkali lebih mudah dibaca secara online (tampilan di
layar komputer), meskipun hal ini masih tergantung pada ukuran, gaya dan
pilihan warna huruf.
Tak
dapat disangkal font sangat berperan besar dalam penyampaian komunikasi visual
dalam benuk grafis. Penggunaan font yang tepat akan sangat berpengaruh dalam
efektifitas dan efisiensi penyampaian pesan yag ada . banyak desainer yang
kurang memahami akan komponen yang berpengaruh dalam efektifitas font dalam
penyampaian pesan visual.
Puncak
perkembangan tipografi, terjadi kurang lebih pada abad 8 SM di Roma saat orang
Romawi mulai membentuk kekuasaannya. Karena bangsa Romawi tidak memiliki sistem
tulisan sendiri, mereka mempelajari sistem tulisan Etruska yang merupakan
penduduk asli Italia serta menyempurnakannya sehingga terbentuk huruf-huruf
Romawi. Saat ini tipografi mengalami perkembangan dari fase penciptaan dengan
tangan hingga mengalami komputerisasi. Fase komputerisasi membuat penggunaan
tipografi menjadi lebih mudah dan dalam waktu yang lebih cepat dengan jenis
pilihan huruf yang ratusan jumlahnya. Oleh karena itu, penulis menemukan
beberapa masalah yang perlu dijelaskan nanti saat pembahasan.
BAB
II
PEMBAHASAN
Pengertian
Typography
Tyfography
atau tata huruf 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.
Typeface ( atau hanya menghadapi untuk
pendek ) Mengacu pada desain khusus untuk karakter , : seperti Courier , Times
New Roman , Ariel , Universitas , Curly , dan sebagainya . Sebuah font adalah
wajah tertentu dalam ukuran tertentu dan gaya tertentu ( bold, italic , dll ) The Times New
Roman jenis huruf pada 12 piksel adalah satu dalam huruf tebal , sementara
Times New Roman pada 14 piksel , berani , secara teknis font yang berbeda .
Namun demikian , desakan komputer dunia panggilan -tipografi dengan istilah
" Font " Itu berarti makan Kebanyakan dari kita harus menggunakan
istilah secara bergantian , meskipun pada kenyataannya Mereka adalah dua aspek
yang agak berbeda dari tipografi .
Kebanyakan tipografi modern dan proporsinya. Artinya, karakter tunggal bervariasi dalam jumlah ruang horizontal Mereka menggunakan , Jadi BAHWA "i " mengkonsumsi ruang kurang dari satu " M. " Sebaliknya , tipografi monospace , : seperti Courier New ,menetapkan jumlah yang sama ruang untuk masing-masing karakter . Sebagai contoh , ini " i" dalam huruf Courier New adalah lebar yang sama seperti huruf " N " dan " W " dalam huruf yang sama . Tipografi monospace berguna Ketika kolom karakter harus menyelaraskan secara vertikal atau Ketika kita membutuhkan nuansa , muka berbasis mesin tik kuno .
Sebuah keluarga font, dalam hal tipografi tradisional , termasuk semua variasi pada jenis huruf khusus mereka ¬ par , Jadi BAHWA keluarga font Times New Roman mencakup versi berani , versi miring , dan sebagainya . Seperti yang akan kita lihat nanti , " keluarga font " berarti sesuatu yang sangat berbeda dalam cascading style sheets ( CSS ) .Tipografi secara longgar dikelompokkan baik sebagai serif atau sans serif.
Kebanyakan tipografi modern dan proporsinya. Artinya, karakter tunggal bervariasi dalam jumlah ruang horizontal Mereka menggunakan , Jadi BAHWA "i " mengkonsumsi ruang kurang dari satu " M. " Sebaliknya , tipografi monospace , : seperti Courier New ,menetapkan jumlah yang sama ruang untuk masing-masing karakter . Sebagai contoh , ini " i" dalam huruf Courier New adalah lebar yang sama seperti huruf " N " dan " W " dalam huruf yang sama . Tipografi monospace berguna Ketika kolom karakter harus menyelaraskan secara vertikal atau Ketika kita membutuhkan nuansa , muka berbasis mesin tik kuno .
Sebuah keluarga font, dalam hal tipografi tradisional , termasuk semua variasi pada jenis huruf khusus mereka ¬ par , Jadi BAHWA keluarga font Times New Roman mencakup versi berani , versi miring , dan sebagainya . Seperti yang akan kita lihat nanti , " keluarga font " berarti sesuatu yang sangat berbeda dalam cascading style sheets ( CSS ) .Tipografi secara longgar dikelompokkan baik sebagai serif atau sans serif.
Format dan Kontras
Karakteristik
dari sekedar desain tipografi dapat membuat penekanan dan kontras ketik:
■ Ukuran: besar
vs kecil.
■ Berat: bold
vs tidak berani.
■ Warna: mendapatkan
ide.
■ Bentuk:
italic atau CAPS KECIL dibandingkan tidak miring (juga disebut roman) dan tidak
topi (juga disebut huruf kecil).
■ Arah: apakah
jenisnya adalah horizontal atau di beberapa sudut lain, seperti berjalan secara
vertikal, atau pada jalur melengkung.
■ Rhythm dan
spacing: karakter yang berbeda spasi, atau
bahkan ...terisolasi. (Kita akan membahas jarak secara lebih mendalam, pada bagian berikutnya.)
bahkan ...terisolasi. (Kita akan membahas jarak secara lebih mendalam, pada bagian berikutnya.)
■ Hiasan: pola,
bayangan, dan cahaya.
■ Tekstur:
bagaimana blok tipe mengatur dirinya menjadi bentuk, baik berat (berjarak dekat
teks) atau ringan (teks banyak spasi).
Typography dan Web Design
Selain pedoman tipografi standar format untuk berurusan dengan di web . Sebagai contoh, kita dapat memanipulasi karakteristik ketik dengan HTML dan CSS ( ukuran, warna , wajah tebal, miring , dan sebagainya ) , tetapi efek lain seperti bevel atau drop shadow dapat diterapkan hanya dalam gambar grafis . Mari kita lihat teks HTML dan teks grafis secara lebih mendalam .
Selain pedoman tipografi standar format untuk berurusan dengan di web . Sebagai contoh, kita dapat memanipulasi karakteristik ketik dengan HTML dan CSS ( ukuran, warna , wajah tebal, miring , dan sebagainya ) , tetapi efek lain seperti bevel atau drop shadow dapat diterapkan hanya dalam gambar grafis . Mari kita lihat teks HTML dan teks grafis secara lebih mendalam .
HTML Teks
Teks HTML adalah teks yang tertanam dalam tag HTML dan yang menerima format ¬ ting instruksi dari HTML dan / atau CSS .
Teks HTML adalah teks yang tertanam dalam tag HTML dan yang menerima format ¬ ting instruksi dari HTML dan / atau CSS .
HTML tipografi
Ini sangat penting untuk mengetahui bahwa menampilkan jenis huruf yang ditentukan dalam browser pemirsa hanya jika wajah yang sudah diinstal pada sistem komputer pemirsa . Jika tidak , browser menggantikan jenis huruf ditentukan dengan jenis huruf penduduk yang ia sanggup menjadi pengganti yang wajar . Karena browser sering membuat keputusan yang sangat miskin dalam hal ini , kita dapat mengambil tanggung jawab yang jauh dari browser , seperti yang ditunjukkan di sidebar.
Ini sangat penting untuk mengetahui bahwa menampilkan jenis huruf yang ditentukan dalam browser pemirsa hanya jika wajah yang sudah diinstal pada sistem komputer pemirsa . Jika tidak , browser menggantikan jenis huruf ditentukan dengan jenis huruf penduduk yang ia sanggup menjadi pengganti yang wajar . Karena browser sering membuat keputusan yang sangat miskin dalam hal ini , kita dapat mengambil tanggung jawab yang jauh dari browser , seperti yang ditunjukkan di sidebar.
HTML DAN CSS REVIEW : Menentukan tipografi
Berikut adalah bagaimana kita dapat menghindari keputusan browser yang buruk dan menentukan wajah backup jenis ¬ menggunakan CSS :
body { font-family : Georgia , Times, serif ; }
Seperti disebutkan sebelumnya , " keluarga font " dalam tipografi tradisional mengacu pada variasi jenis huruf tertentu , termasuk karakteristik seperti tebal dan miring . Dalam CSS , meskipun, " font-family " mengacu pada daftar tipografi cadangan . Ketika font-family yang ditentukan, browser bekerja jalan bawah daftar , dengan menggunakan jenis huruf pertama yang ditemukan pada sistem pengunjung . Dengan demikian , kita dapat merasa bebas untuk menentukan jenis jarang ¬ wajah selama kita daftar tipografi cadangan umum tersedia juga.
Beberapa browser yang lebih baru mendukung download tipografi dengan halaman. Sayangnya, sebuah stan ¬ dard jenis huruf dekoratif mungkin 100K atau lebih , yang merupakan biaya beban tidak masuk akal bawah ¬ untuk body copy rutin . Akibatnya , ini bukan teknik yang akan kita telusuri lebih jauh . Alternatifnya , tentu saja , adalah dengan menggunakan jenis huruf khusus hemat dengan put ¬ ting dalam gambar grafis , teknik kita akan melihat nanti dalam bab ini .
Tag <font> HTML adalah metode usang Anda paling mungkin untuk menemukan di situs yang lebih tua , dan Anda tidak harus menggunakannya dalam perkembangan baru . Untuk situs baru , tetap dengan setara CSS .
Berikut adalah bagaimana kita dapat menghindari keputusan browser yang buruk dan menentukan wajah backup jenis ¬ menggunakan CSS :
body { font-family : Georgia , Times, serif ; }
Seperti disebutkan sebelumnya , " keluarga font " dalam tipografi tradisional mengacu pada variasi jenis huruf tertentu , termasuk karakteristik seperti tebal dan miring . Dalam CSS , meskipun, " font-family " mengacu pada daftar tipografi cadangan . Ketika font-family yang ditentukan, browser bekerja jalan bawah daftar , dengan menggunakan jenis huruf pertama yang ditemukan pada sistem pengunjung . Dengan demikian , kita dapat merasa bebas untuk menentukan jenis jarang ¬ wajah selama kita daftar tipografi cadangan umum tersedia juga.
Beberapa browser yang lebih baru mendukung download tipografi dengan halaman. Sayangnya, sebuah stan ¬ dard jenis huruf dekoratif mungkin 100K atau lebih , yang merupakan biaya beban tidak masuk akal bawah ¬ untuk body copy rutin . Akibatnya , ini bukan teknik yang akan kita telusuri lebih jauh . Alternatifnya , tentu saja , adalah dengan menggunakan jenis huruf khusus hemat dengan put ¬ ting dalam gambar grafis , teknik kita akan melihat nanti dalam bab ini .
Tag <font> HTML adalah metode usang Anda paling mungkin untuk menemukan di situs yang lebih tua , dan Anda tidak harus menggunakannya dalam perkembangan baru . Untuk situs baru , tetap dengan setara CSS .
Sebagian besar tipografi pada ag <awalnya dirancang untuk media cetak dan karenanya tidak dioptimalkan untuk resolusi rendah dari layar komputer. Untuk
memperbaiki hal ini, Microsoft menyewa
jenis desainer terkenal
Matthew Carter untuk
membuat wajah Georgia (serif)
dan Verdana (sans
serif) khusus untuk tampilan layar yang optimal. Proses ini mengambil Carter
dua tahun tapi juga sepadan dengan
usaha . Karakter dari font ini telah lebih baik mengisyaratkan ; yaitu, jarak
antar - karakter yang lebih besar dan lebih seragam , yang memang meningkatkan
keterbacaan pada layar . Kami akan disarankan untuk menggunakan salah satu dari
dua tipografi pada sebagian body copy .
Typographers telah lama berpendapat bahwa dicetak copy tubuh lebih mudah dibaca dalam huruf serif , karena serif memberikan isyarat dengan cepat dirasakan surat bentuk. Dalam con ¬ Contrast , sans serif mungkin lebih mudah dibaca pada monitor , karena tion resolu ¬ monitor sangat rendah sehingga serif tidak dapat ditampilkan dengan jelas - mereka cenderung berdarah bersama-sama . Tapi, tentu saja , kata kunci di sini berpendapat - perdebatan ini kemungkinan akan berlanjut tanpa batas , dan setidaknya satu studi telah menunjukkan bahwa sans serif signifikan ¬ signifikan meningkatkan pembacaan layar hanya dalam ukuran lebih kecil dari tipe 12 -point .
Typographers telah lama berpendapat bahwa dicetak copy tubuh lebih mudah dibaca dalam huruf serif , karena serif memberikan isyarat dengan cepat dirasakan surat bentuk. Dalam con ¬ Contrast , sans serif mungkin lebih mudah dibaca pada monitor , karena tion resolu ¬ monitor sangat rendah sehingga serif tidak dapat ditampilkan dengan jelas - mereka cenderung berdarah bersama-sama . Tapi, tentu saja , kata kunci di sini berpendapat - perdebatan ini kemungkinan akan berlanjut tanpa batas , dan setidaknya satu studi telah menunjukkan bahwa sans serif signifikan ¬ signifikan meningkatkan pembacaan layar hanya dalam ukuran lebih kecil dari tipe 12 -point .
HTML Font
Ukuran
HTML menggunakan skala 1 sampai 7 untuk ukuran font, dengan 1 adalah yang terkecil , 3 menjadi ukuran standar , dan 7 menjadi yang terbesar . Meskipun apa yang muncul untuk menjadi ukuran umum designators , sistem operasi yang berbeda-ferent mungkin menggunakan nomor yang berbeda dari piksel untuk membangun font pada setiap ukuran
HTML menggunakan skala 1 sampai 7 untuk ukuran font, dengan 1 adalah yang terkecil , 3 menjadi ukuran standar , dan 7 menjadi yang terbesar . Meskipun apa yang muncul untuk menjadi ukuran umum designators , sistem operasi yang berbeda-ferent mungkin menggunakan nomor yang berbeda dari piksel untuk membangun font pada setiap ukuran
|
Bila menggunakan relatif sifat ukuran font dalam CSS , seperti teks - size : 110 % atau teks - size : 1.1em , teori adalah bahwa ukuran relatif diferensial harus diterapkan untuk ukuran apa pun karakteristik font telah diwariskan . Sebagai contoh :
Jika dasar font halaman adalah ukuran 3 ,
Dan font untuk tabel ditentukan sebagai 110 % ,
Dan header ( yang terkandung dalam sebuah tabel ) ditentukan sebagai 120 % ,
Kemudian , dalam teori , header harus ditampilkan di dasar ukuran font x 110 % x 120 % .
Sayangnya , tidak semua browser menerapkan ukuran font warisan dengan cara yang sama ; beberapa browser memiliki cara unik mereka sendiri menafsirkan warisan . Seperti biasa , pastikan untuk menguji semua target browser Anda .
Absolute vs Relative Text Sizing
Ada dua alasan utama untuk memilih
ukuran teks relatif :
■ Seperti yang telah kita lihat , ukuran teks mutlak dapat menimpa ukuran font set ¬ tings pengunjung , aksesibilitas sehingga merendahkan untuk tunanetra .
■ Seperti yang kita lihat pada Tabel 7.1 , resolusi teks berubah ketika kami menyeberangi Windows PC vs Mac membagi . Jika ukuran mutlak digunakan , menentukan ukuran teks dari 24 hasil piksel dalam 1/3 " (24 /72) pada Mac tetapi 1/4 " ( 24/96 ) pada PC , perbedaan yang substansial . Di sisi lain , karena ukuran font dasar mereka kira-kira sama , rela ¬ ukuran teks tive diterapkan di atas font dasar yang sama harus menghasilkan teks yang kira-kira ukuran yang sama .
■ Seperti yang telah kita lihat , ukuran teks mutlak dapat menimpa ukuran font set ¬ tings pengunjung , aksesibilitas sehingga merendahkan untuk tunanetra .
■ Seperti yang kita lihat pada Tabel 7.1 , resolusi teks berubah ketika kami menyeberangi Windows PC vs Mac membagi . Jika ukuran mutlak digunakan , menentukan ukuran teks dari 24 hasil piksel dalam 1/3 " (24 /72) pada Mac tetapi 1/4 " ( 24/96 ) pada PC , perbedaan yang substansial . Di sisi lain , karena ukuran font dasar mereka kira-kira sama , rela ¬ ukuran teks tive diterapkan di atas font dasar yang sama harus menghasilkan teks yang kira-kira ukuran yang sama .
HTML Memformat
Ada , tentu saja , format umum perintah yang dapat kita gunakan dalam HTML atau
CSS , seperti diulas dalam Tabel 7.2 . Apa yang kita benar-benar perlu untuk memeriksa sekarang , meskipun, adalah ketika itu dan tidak tepat untuk menggunakan format tersebut .
Ada , tentu saja , format umum perintah yang dapat kita gunakan dalam HTML atau
CSS , seperti diulas dalam Tabel 7.2 . Apa yang kita benar-benar perlu untuk memeriksa sekarang , meskipun, adalah ketika itu dan tidak tepat untuk menggunakan format tersebut .
WARNA
Warna teks yang berkaitan dengan warna latar belakang mungkin adalah yang paling penting Format ¬ ting keputusan . Jelas, pucat teks kuning di latar belakang putih akan terbaca karena ada begitu sedikit nilai ( tingkat terang atau gelap ) kontras antara latar depan dan latar belakang .
Tapi sementara kontras adalah sangat penting , itu tidak membatasi kedengarannya . Meskipun teks hitam pada latar belakang putih memberikan nilai kontras yang paling akrab dan mudah dibaca , kontras kurang ekstrim masih bisa terbaca sambil memberikan suasana hati yang lebih tenang ke situs. Misalnya, kuning krem di atas mid - nilai tan mungkin cukup terbaca . Meskipun demikian , kita harus lebih berhati-hati untuk menguji situs tersebut dalam mode grayscale untuk memastikan itu dapat diakses oleh pengunjung buta warna .
Teks cahaya pada latar belakang gelap kadang-kadang bisa kurang terbaca daripada lebih famil ¬ iar skema 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 lebih tebal .
tekanan
Untuk menekankan kata-kata , pilihan kita mencakup semua dari berbagai pilihan format pada Tabel 7.2 . Setiap gaya memiliki tempat . Misalnya, huruf tebal dan miring digunakan dalam dunia cetak untuk menunjukkan kosa kata ( seperti dalam buku ini ) atau diucapkan penekanan . Banyak ahli menyatakan bahwa tebal membuat lebih jelas pada layar daripada huruf miring , tetapi sering tergantung pada jenis huruf .
Mengatur teks dalam huruf besar semua adalah sebuah kemunduran untuk hari-hari mesin tik , ketika huruf besar adalah salah satu dari beberapa metode yang tersedia untuk menekankan jenis . HARI INI , KITA UMUMNYA HINDARI MENGGUNAKAN SEMUA CAPS DALAM TUBUH TEKS KARENA MEMBUAT KONTEN SULIT MEMBACA , ANDA BISA MELIHAT . SELAIN ITU , SEMUA CAPS MEMILIKI
Konotasi negatif OF BERTERIAK DI EMAIL DAN INSTANT MESSAGING . Secara umum, huruf kapital lebih sedikit , teks mudah adalah dengan membaca , karena ascenders dan descenders dari alfabet huruf kecil mampu bentuk kata yang lebih jelas , sehingga meningkatkan keterbacaan . Semua topi dapat diterima , meskipun, dalam pos singkat .
Warna teks yang berkaitan dengan warna latar belakang mungkin adalah yang paling penting Format ¬ ting keputusan . Jelas, pucat teks kuning di latar belakang putih akan terbaca karena ada begitu sedikit nilai ( tingkat terang atau gelap ) kontras antara latar depan dan latar belakang .
Tapi sementara kontras adalah sangat penting , itu tidak membatasi kedengarannya . Meskipun teks hitam pada latar belakang putih memberikan nilai kontras yang paling akrab dan mudah dibaca , kontras kurang ekstrim masih bisa terbaca sambil memberikan suasana hati yang lebih tenang ke situs. Misalnya, kuning krem di atas mid - nilai tan mungkin cukup terbaca . Meskipun demikian , kita harus lebih berhati-hati untuk menguji situs tersebut dalam mode grayscale untuk memastikan itu dapat diakses oleh pengunjung buta warna .
Teks cahaya pada latar belakang gelap kadang-kadang bisa kurang terbaca daripada lebih famil ¬ iar skema 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 lebih tebal .
tekanan
Untuk menekankan kata-kata , pilihan kita mencakup semua dari berbagai pilihan format pada Tabel 7.2 . Setiap gaya memiliki tempat . Misalnya, huruf tebal dan miring digunakan dalam dunia cetak untuk menunjukkan kosa kata ( seperti dalam buku ini ) atau diucapkan penekanan . Banyak ahli menyatakan bahwa tebal membuat lebih jelas pada layar daripada huruf miring , tetapi sering tergantung pada jenis huruf .
Mengatur teks dalam huruf besar semua adalah sebuah kemunduran untuk hari-hari mesin tik , ketika huruf besar adalah salah satu dari beberapa metode yang tersedia untuk menekankan jenis . HARI INI , KITA UMUMNYA HINDARI MENGGUNAKAN SEMUA CAPS DALAM TUBUH TEKS KARENA MEMBUAT KONTEN SULIT MEMBACA , ANDA BISA MELIHAT . SELAIN ITU , SEMUA CAPS MEMILIKI
Konotasi negatif OF BERTERIAK DI EMAIL DAN INSTANT MESSAGING . Secara umum, huruf kapital lebih sedikit , teks mudah adalah dengan membaca , karena ascenders dan descenders dari alfabet huruf kecil mampu bentuk kata yang lebih jelas , sehingga meningkatkan keterbacaan . Semua topi dapat diterima , meskipun, dalam pos singkat .
DEKORASI
Menggunakan menggarisbawahi
untuk penekanan adalah kemunduran lain untuk hari-hari kuno jenis penulis ¬ .
Hari ini , seorang pengunjung yang menemukan teks yang digarisbawahi di web
adalah bingung dan kesal jika teks yang tidak dapat diklik . Strikethrough juga
dilihat sebagai format trik usang dan berpotensi membingungkan ; tidak
menggunakannya kecuali Anda sedang berusaha untuk menampilkan versi diedit
dokumen seperti kontrak hukum .
Seperti terlihat pada Tabel 7.2 , sekarang kita punya CSS untuk membantu kami menambahkan efek dekoratif . Misalnya , baris pertama dalam huruf besar :
Seperti terlihat pada Tabel 7.2 , sekarang kita punya CSS untuk membantu kami menambahkan efek dekoratif . Misalnya , baris pertama dalam huruf besar :
EMPAT SCORE DAN TUJUH TAHUN YANG LALU AYAH KAMI MEMBAWA KELUAR
di benua ini , sebuah negara baru , dikandung di Liberty , dan didedikasikan untuk proposisi bahwa semua manusia diciptakan sama .
... atau huruf pertama dari sebuah paragraf yang lebih besar :
Empat skor dan tujuh tahun yang lalu nenek moyang kita melahirkan pada nent ini conti ¬ , sebuah negara baru , dikandung di Liberty , dan didedikasikan untuk proposisi bahwa semua manusia diciptakan sama .
Sekali lagi , HTML dan CSS untuk format teks tersebut diringkas dalam Tabel 7.2 .
di benua ini , sebuah negara baru , dikandung di Liberty , dan didedikasikan untuk proposisi bahwa semua manusia diciptakan sama .
... atau huruf pertama dari sebuah paragraf yang lebih besar :
Empat skor dan tujuh tahun yang lalu nenek moyang kita melahirkan pada nent ini conti ¬ , sebuah negara baru , dikandung di Liberty , dan didedikasikan untuk proposisi bahwa semua manusia diciptakan sama .
Sekali lagi , HTML dan CSS untuk format teks tersebut diringkas dalam Tabel 7.2 .
HTML Teks Spasi
Mengubah garis default dan karakter spasi dapat meringankan keseluruhan " grayness " dari halaman hambar . Secara khusus, meningkatkan terkemuka dari HTML default tunggal spac ¬ ing dapat meningkatkan mata pelacakan dari satu baris ke yang berikutnya , terutama pada baris lagi teks .
Mengubah garis default dan karakter spasi dapat meringankan keseluruhan " grayness " dari halaman hambar . Secara khusus, meningkatkan terkemuka dari HTML default tunggal spac ¬ ing dapat meningkatkan mata pelacakan dari satu baris ke yang berikutnya , terutama pada baris lagi teks .
Industri cetak memiliki standar jarak lain yang harus kita ikuti di web ,
juga:
■ Gunakan hanya satu ruang , bukan dua , di akhir kalimat . Untungnya , ini adalah default di HTML , karena tidak mengenali beberapa ruang yang berdekatan .
■ Gunakan baik indent pada awal paragraf , atau spasi ganda antara paragraf ( ini adalah pilihan yang lebih mudah otomatis di HTML ) , tetapi tentu saja tidak baik .
■ Idealnya , memungkinkan baris kosong otomatis sebelum tag header, tetapi menggunakan CSS styling marjin untuk menghilangkan baris kosong otomatis setelah tag .
■ Gunakan hanya satu ruang , bukan dua , di akhir kalimat . Untungnya , ini adalah default di HTML , karena tidak mengenali beberapa ruang yang berdekatan .
■ Gunakan baik indent pada awal paragraf , atau spasi ganda antara paragraf ( ini adalah pilihan yang lebih mudah otomatis di HTML ) , tetapi tentu saja tidak baik .
■ Idealnya , memungkinkan baris kosong otomatis sebelum tag header, tetapi menggunakan CSS styling marjin untuk menghilangkan baris kosong otomatis setelah tag .
HTML Teks Justifikasi
Kiri , kanan, dan tengah pembenaran yang cukup mudah untuk dilakukan di HTML dan CSS , baik menggunakan HTML menyelaraskan ditinggalkan = " ... " atribut atau properti text-align dalam CSS . Namun, pembenaran penuh ( teks sejajar pada kedua sisi kiri dan kanan ) hampir tidak mungkin untuk menarik off pada antarmuka komputer ; yang 72-100 ppi dari layar komputer tidak dapat memungkinkan untuk penyesuaian halus . Pada resolusi rendah seperti , hasilnya bisa jadi huruf atau kata-kata spasi begitu jauh bahwa mereka sulit untuk dibaca . Untuk alasan itu, kita tidak harus menggunakan pembenaran penuh sama sekali .
Tata Letak HTML Teks
Kami memeriksa pedoman tata letak umum sebelumnya dalam Bab 4 , tapi pedoman tata letak khusus untuk teks HTML harus dipertimbangkan juga .
Pembaca web skim konten , daripada membaca dengan hati-hati . Oleh karena itu, sangat penting untuk potongan konten itu; yaitu, konten grup menjadi kecil , bagian yang dapat diidentifikasi menggunakan tag HTML seperti table , div , <fieldset> , <ol> , dan <ul> . Untuk daftar bullet , kita dapat menggunakan peluru default yang disediakan secara otomatis oleh browser (tidak ada CSS styling peluru ) , memilih peluru browser dipasok tertentu, atau menyediakan gambar kita sendiri :
. listlteml { list-style - type: persegi }
. listItem2 { list-style - image : url ( myBullet.gif ) }
Kita dapat memecah teks dengan cara lain juga. Sidebars ( seperti yang ada di buku ini ) berfungsi sebagai catatan kaki macam , untuk menampilkan konten kurung . Indent an para ¬ grafik seluruh teks dapat melayani fungsi yang sama , menggunakan properti text- indent CSS itu .
Tarik tanda kutip ( tanda kutip ditarik ke samping atau dimasukkan di tengah body copy , seperti yang ditunjukkan di sebelah kanan ) dapat memberikan pengunjung sampel sangat menarik konten, sebagai bentuk godaan . Untuk lebih menekankan kutipan menarik , bervariasi jenis huruf , ukurannya , atau terdepan . Ini lebih typographically benar jika tanda kutip awal kutipan menarik
Kami memeriksa pedoman tata letak umum sebelumnya dalam Bab 4 , tapi pedoman tata letak khusus untuk teks HTML harus dipertimbangkan juga .
Pembaca web skim konten , daripada membaca dengan hati-hati . Oleh karena itu, sangat penting untuk potongan konten itu; yaitu, konten grup menjadi kecil , bagian yang dapat diidentifikasi menggunakan tag HTML seperti table , div , <fieldset> , <ol> , dan <ul> . Untuk daftar bullet , kita dapat menggunakan peluru default yang disediakan secara otomatis oleh browser (tidak ada CSS styling peluru ) , memilih peluru browser dipasok tertentu, atau menyediakan gambar kita sendiri :
. listlteml { list-style - type: persegi }
. listItem2 { list-style - image : url ( myBullet.gif ) }
Kita dapat memecah teks dengan cara lain juga. Sidebars ( seperti yang ada di buku ini ) berfungsi sebagai catatan kaki macam , untuk menampilkan konten kurung . Indent an para ¬ grafik seluruh teks dapat melayani fungsi yang sama , menggunakan properti text- indent CSS itu .
Tarik tanda kutip ( tanda kutip ditarik ke samping atau dimasukkan di tengah body copy , seperti yang ditunjukkan di sebelah kanan ) dapat memberikan pengunjung sampel sangat menarik konten, sebagai bentuk godaan . Untuk lebih menekankan kutipan menarik , bervariasi jenis huruf , ukurannya , atau terdepan . Ini lebih typographically benar jika tanda kutip awal kutipan menarik
dapat diatur di
luar garis framing teks , seperti yang ditunjukkan .
HTML Karakter
Khusus dan Tanda Baca Marks
Aturan tipografi untuk mencetak konten baru saja sebanyak bantalan bila konten yang
muncul di web . Ringkasan dari aturan yang lebih berharga berikut .
■ Jangan menggunakan tanda seru yang berlebihan dalam teks ! ( Lihat saja betapa menyebalkan ini ! ) Menggunakan banyak tanda seru mencairkan kekuasaan mereka ke titik bahwa mereka semua menjadi tidak berarti !
■ Gunakan en strip ( tanda hubung lebar huruf N , seperti ini - ) untuk memisahkan kata-kata bergabung , dan garis em benar ( panjang, lebar huruf M , seperti ini - ) untuk memisahkan klausa kalimat . Seringkali , kita palsu dasbor em dengan dua tanda hubung , tapi dash benar terlihat lebih profesional .
en dasbor
Contoh: " Batas panjang line untuk 30-70 karakter . "
Kode HTML : - atau - dash
Contoh: " Email - email seperti siput - mendapatkan pekerjaan . "
Kode HTML : - atau -
■ Gunakan proper " keriting " tanda kutip :
Contoh: " tanda kutip keriting " versus " kutipan langsung "
Kode HTML :
Curly meninggalkan kutip ganda : " atau "
Curly kanan ganda quote : " atau "
Curly meninggalkan kutip tunggal : ' atau '
Curly kanan tunggal quote : ' atau '
■ Gunakan elips benar ( ... ) , yang merupakan simbol tunggal , sebagai lawan tiga periode terpisah ( ... ) .
Contoh: " em dash, en dash, kutipan keriting . "
Kode HTML : &ellip; atau ...
■ Kode HTML untuk Gunakan karakter khusus lainnya yang sesuai . Sebagai contoh, Anda mungkin ingin menanamkan ampersand , " & " ( & ) , spasi ( ) , atau salinan ¬ simbol yang tepat " © " ( © ) . Lihat situs web buku untuk daftar kode lainnya.
H huruf besar dan angka kecil, UNTUK TYPE - terobsesi
Ya , percaya atau tidak , beberapa tipografi datang dengan angka huruf besar ( semua ukuran yang sama , juga disebut nomor lapisan ) , sementara yang lain datang dengan angka huruf kecil ( dengan ascenders dan descenders , juga disebut menggantung nomor atau angka oldstyle ) :
■ Verdana termasuk angka huruf besar : 123456789
■ Georgia termasuk angka huruf kecil : 123456789
Angka huruf besar tampak terlalu tinggi dan kuning bila dicampur dengan huruf kecil , sedangkan angka huruf kecil menggantung tidak tepat di bawah garis huruf besar jika tidak kuning . contoh :
■ Tidak dapat diterima : huruf yang berbeda dan nomor
■ UPPERCASE SURAT DENGAN ANGKA huruf kecil 123456789
■ huruf huruf kecil disertai dengan huruf 123456789 nomor
■ diterima : huruf yang sama dan nomor
■ UPPERCASE SURAT DENGAN ANGKA UPPERCASE 123456789
■ huruf rendah - kasus disertai dengan huruf kecil 123456789 nomor
Karena sebagian besar tipografi hanya mencakup angka huruf kecil huruf besar atau hanya , kita biasanya perlu mengubah tipografi untuk memperbaiki mismatch .
Aturan tipografi untuk mencetak konten baru saja sebanyak bantalan bila konten yang
muncul di web . Ringkasan dari aturan yang lebih berharga berikut .
■ Jangan menggunakan tanda seru yang berlebihan dalam teks ! ( Lihat saja betapa menyebalkan ini ! ) Menggunakan banyak tanda seru mencairkan kekuasaan mereka ke titik bahwa mereka semua menjadi tidak berarti !
■ Gunakan en strip ( tanda hubung lebar huruf N , seperti ini - ) untuk memisahkan kata-kata bergabung , dan garis em benar ( panjang, lebar huruf M , seperti ini - ) untuk memisahkan klausa kalimat . Seringkali , kita palsu dasbor em dengan dua tanda hubung , tapi dash benar terlihat lebih profesional .
en dasbor
Contoh: " Batas panjang line untuk 30-70 karakter . "
Kode HTML : - atau - dash
Contoh: " Email - email seperti siput - mendapatkan pekerjaan . "
Kode HTML : - atau -
■ Gunakan proper " keriting " tanda kutip :
Contoh: " tanda kutip keriting " versus " kutipan langsung "
Kode HTML :
Curly meninggalkan kutip ganda : " atau "
Curly kanan ganda quote : " atau "
Curly meninggalkan kutip tunggal : ' atau '
Curly kanan tunggal quote : ' atau '
■ Gunakan elips benar ( ... ) , yang merupakan simbol tunggal , sebagai lawan tiga periode terpisah ( ... ) .
Contoh: " em dash, en dash, kutipan keriting . "
Kode HTML : &ellip; atau ...
■ Kode HTML untuk Gunakan karakter khusus lainnya yang sesuai . Sebagai contoh, Anda mungkin ingin menanamkan ampersand , " & " ( & ) , spasi ( ) , atau salinan ¬ simbol yang tepat " © " ( © ) . Lihat situs web buku untuk daftar kode lainnya.
H huruf besar dan angka kecil, UNTUK TYPE - terobsesi
Ya , percaya atau tidak , beberapa tipografi datang dengan angka huruf besar ( semua ukuran yang sama , juga disebut nomor lapisan ) , sementara yang lain datang dengan angka huruf kecil ( dengan ascenders dan descenders , juga disebut menggantung nomor atau angka oldstyle ) :
■ Verdana termasuk angka huruf besar : 123456789
■ Georgia termasuk angka huruf kecil : 123456789
Angka huruf besar tampak terlalu tinggi dan kuning bila dicampur dengan huruf kecil , sedangkan angka huruf kecil menggantung tidak tepat di bawah garis huruf besar jika tidak kuning . contoh :
■ Tidak dapat diterima : huruf yang berbeda dan nomor
■ UPPERCASE SURAT DENGAN ANGKA huruf kecil 123456789
■ huruf huruf kecil disertai dengan huruf 123456789 nomor
■ diterima : huruf yang sama dan nomor
■ UPPERCASE SURAT DENGAN ANGKA UPPERCASE 123456789
■ huruf rendah - kasus disertai dengan huruf kecil 123456789 nomor
Karena sebagian besar tipografi hanya mencakup angka huruf kecil huruf besar atau hanya , kita biasanya perlu mengubah tipografi untuk memperbaiki mismatch .
Graphic Text
Teks grafis adalah teks yang dibuat dalam program editing gambar seperti Photoshop atau Fireworks , disimpan sebagai gambar dan kemudian tertanam dalam HTML menggunakan tag.
Teks grafis adalah teks yang dibuat dalam program editing gambar seperti Photoshop atau Fireworks , disimpan sebagai gambar dan kemudian tertanam dalam HTML menggunakan tag.
PENGATURAN H Anti-Aliasing DI
FIREWORKS DAN PHOTOSHOP
Pengaturan yang tercantum dalam urutan dari yang paling anti - aliasing untuk kuat .
Fireworks Photoshop
■ Tidak ■ Tidak ada
■ ■ Crisp Tajam
■ ■ Kuat Crisp
■ ■ Halus Kuat
■ halus
Teks grafis juga memungkinkan kita untuk mengubah kerning dan off untuk bagian tertentu dari teks serta menerapkan kerning secara manual jika kita tidak puas dengan hasil otomatis . Semakin besar jenis, yang lebih penting adalah bahwa kerning yang tepat .
Pengaturan yang tercantum dalam urutan dari yang paling anti - aliasing untuk kuat .
Fireworks Photoshop
■ Tidak ■ Tidak ada
■ ■ Crisp Tajam
■ ■ Kuat Crisp
■ ■ Halus Kuat
■ halus
Teks grafis juga memungkinkan kita untuk mengubah kerning dan off untuk bagian tertentu dari teks serta menerapkan kerning secara manual jika kita tidak puas dengan hasil otomatis . Semakin besar jenis, yang lebih penting adalah bahwa kerning yang tepat .
MENEKANKAN TYPE DI GAMBAR
Bila menggunakan jenis huruf dengan stroke sangat tipis , membuat teks tebal sering tidak memberikan cukup penekanan untuk itu untuk menampilkan baik terhadap latar belakang . Satu rem ¬ edy adalah untuk membuat salinan persis dari teks asli anti -alias dan posisi itu di ¬ rectly di atas aslinya. Dengan menggandakan efek dari anti - aliasing , jenis muncul bahkan lebih kuat dari yang berani saja . Anda mungkin harus menentukan surat jarak yang lebih lebar dari biasanya , meskipun, untuk mencegah karakter dari berjalan bersama-sama .
Cara lain untuk menekankan jenis, terutama ketika jenis mengapung di atas latar belakang warna-warni , adalah dengan menggunakan tidak hanya mengisi warna , tetapi juga stroke outline . GAMBAR 7.10 , berulang-ulang dari Bab 6 , menunjukkan contoh kontras tinggi .
Teks dan Aksesibilitas
Aksesibilitas telah dibahas selama bab ini , sehingga hanya rekap harus dibutuhkan di sini :
■ Gunakan ukuran teks relatif pada body copy ( ems dan persen ) , agar tidak menimpa pengaturan ukuran teks yang telah ditentukan pengunjung pada browser mereka . ( Perhatikan bahwa browser yang lebih baru memungkinkan pengunjung untuk menimpa pengaturan font-size situs web , termasuk ukuran mutlak . )
■ Pastikan bahwa teks latar depan kontras nilai ( tingkat terang atau gelap warna ) dengan latar belakang sehingga teks dapat dibaca bahkan untuk orang-orang yang buta warna .
■ Mempekerjakan tag HTML header ( h1 , h2 , dll ) untuk memberikan tunanetra dengan garis besar struktur hirarkis halaman .
■ Sertakan atribut alt pada semua gambar , termasuk gambar teks grafis. Ini adalah cara yang paling penting untuk membuat konten gambar dapat diakses oleh tunanetra . Jika gambar dekoratif saja , tanpa makna yang melekat , gunakan kosong tag alt ( alt = " " ) untuk menghindari keterlambatan pembaca layar berbicara deskripsi ingless ¬ rata-rata .
Bila menggunakan jenis huruf dengan stroke sangat tipis , membuat teks tebal sering tidak memberikan cukup penekanan untuk itu untuk menampilkan baik terhadap latar belakang . Satu rem ¬ edy adalah untuk membuat salinan persis dari teks asli anti -alias dan posisi itu di ¬ rectly di atas aslinya. Dengan menggandakan efek dari anti - aliasing , jenis muncul bahkan lebih kuat dari yang berani saja . Anda mungkin harus menentukan surat jarak yang lebih lebar dari biasanya , meskipun, untuk mencegah karakter dari berjalan bersama-sama .
Cara lain untuk menekankan jenis, terutama ketika jenis mengapung di atas latar belakang warna-warni , adalah dengan menggunakan tidak hanya mengisi warna , tetapi juga stroke outline . GAMBAR 7.10 , berulang-ulang dari Bab 6 , menunjukkan contoh kontras tinggi .
Teks dan Aksesibilitas
Aksesibilitas telah dibahas selama bab ini , sehingga hanya rekap harus dibutuhkan di sini :
■ Gunakan ukuran teks relatif pada body copy ( ems dan persen ) , agar tidak menimpa pengaturan ukuran teks yang telah ditentukan pengunjung pada browser mereka . ( Perhatikan bahwa browser yang lebih baru memungkinkan pengunjung untuk menimpa pengaturan font-size situs web , termasuk ukuran mutlak . )
■ Pastikan bahwa teks latar depan kontras nilai ( tingkat terang atau gelap warna ) dengan latar belakang sehingga teks dapat dibaca bahkan untuk orang-orang yang buta warna .
■ Mempekerjakan tag HTML header ( h1 , h2 , dll ) untuk memberikan tunanetra dengan garis besar struktur hirarkis halaman .
■ Sertakan atribut alt pada semua gambar , termasuk gambar teks grafis. Ini adalah cara yang paling penting untuk membuat konten gambar dapat diakses oleh tunanetra . Jika gambar dekoratif saja , tanpa makna yang melekat , gunakan kosong tag alt ( alt = " " ) untuk menghindari keterlambatan pembaca layar berbicara deskripsi ingless ¬ rata-rata .
BAB
III
PENUTUP
A. Kesimpulan
Tyfography atau tata huruf
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.
Penggunaan
desain tipografi dalam sebuah karya desain komunikasi visual dapat memperkuat
keberhasilan karya tersebut dalam berkomunikasi, namun dapat
juga menjatuhkan
kualitas desain apabila tidak dipergunakan dengan tepat. Ini dikarenakan huruf
memiliki psikologi tersendiri bagi pembacanya. Dalam tiap jenis huruf terdapat
struktural tersendiri yang sangat berpengaruh dalam kenyamanan membaca
Dengan begbitu besarnya pengaruh tipografi dalam keberhasilan sebuah karya desain. Maka sangat penting bagi desainer untuk mengenal lebih baik akan tipografi sehingga dapat mendukung hasil karya desain yang dimilikinya.
Dengan begbitu besarnya pengaruh tipografi dalam keberhasilan sebuah karya desain. Maka sangat penting bagi desainer untuk mengenal lebih baik akan tipografi sehingga dapat mendukung hasil karya desain yang dimilikinya.
B. Saran
Seorang
desainer harus mampu dan mempunyai kesensitifan dalam mengintegrasi elemen lain
sebagainya dengan desain tipografi. Dengan integrasi yang harmonis antar elemen
desain yang ditampilkan akan lebih menarik dan memikat orang yang melihatnya.
DAFTAR
PUSTAKA
McIntire,penny.
2008. Visual Design for The Modern Web.
Amerika Serikat:Printed and Bound in the United
States of America.
Tidak ada komentar:
Posting Komentar