The quick brown fox jumps over the lazy dog
Teks & Typografi Komputer Multimedia – 2009
Kekuatan Makna ₪
Sangat penting memberikan dan merancang label untuk judul layar, menu, tombol atau “tab” menggunakan kata-kata yang paling tepat dan bermakna untuk mengekspresikan sesuatu yang disampaikan هBACK daripada PREVIOUS هKELUAR daripada TUTUP هHEBAT!! Daripada JAWABAN ANDA BENAR
Istilah dalam Text Typeface : sekumpulan karakter grafik yang termasuk di dalamnya berbagai tipe dan style (Halvetica, Times, Courier) ₪ Font : koleksi karakter dalam sebuah ukuran style yang termasuk dalam suatu kelompok typeface (Times 12 point italic) ₪ Dalam istilah komputer typeface lebih sering langsung disebut dengan font ₪
istilah Font style : bold & italics ₪ Font attribute : underlining, outlining ₪ Type size : biasanya digunakan point ₪ 1 point = 0.0138 inch = 1/72 inch ₪ Size : jarak antara bagian atas dari huruf kapital sampai bagian bawah descender pada huruf g atau y. ₪
Pengukuran Type
Karakteristik font Contoh : font Times New Roman
Cap height
Font size
X-height
Serif
Ascender
Descender
Karakteristik font Contoh : font Times New Roman topline UPPER CASE
beak
eye
Lower case
meanline capline
descender
stem
Foot serif
baseline beardline
Karakteristik font Contoh : font Times New Roman arm UPPER CASE
hairline stem crossbar
shoulder
spur
beak
Open counter
Closed bowl
Closed counter
posture
tail
istilah ₪ Font
dalam komputer secara otomatis menambahkan jarak di bawah descender (dan terkadang di atas) untuk menyajikan spasi baris yang nyata leading (baca: ledding) ₪ Biasa muncul dalam opsi Paragraf
FONTS ₪
Glyph adalah representasi visual dari bentuk karakter
qqqqqqqq ₪
Glyphs disusun ke dalam koleksi yang disebut fonts هDiambil dari sistem هMenyatu dalam file
Karakter ₪
Kealamiahan teks: هRepresentasi visual suatu bahasa هElemen grafis
₪ ₪
Typography: seni dalam teks Teks dapat diklasifikasikan berdasarkan: هIsi هVisualisasi • Jakarta, kota terbesar di Indonesia
• Jakarta , kota terbesar di Indonesia
Karakter (2) ₪
Se-set karakter biasanya mendifinisikan karakter untuk ه ه ه ه
₪
Karakter alfanumerik [a-z, A-Z, 0-9] Simbol pembacaan [*&^%$£”!,./\~#@’:;] Simbol matematis Huruf yunani
Untuk menampilkan teks secara dijital, terdapat pemetaan karakter ke dalam nilai yang disimpan oleh komputer
Standards ₪
ASCII هAmerican Standard Code for Information Interchange ه7-bit coded character set = 128 characters هDigunakan sebagai set US code dasar untuk komputer personal dan workstation هCocok untuk pertukaran dokumen yang menggunakan bahasa inggris
ASCII Character
Standards (2) ₪
EBCDIC هExtended Binary Coded Decimal Interchange Code هAn 8-bit encoding system (256 characters) هSet karakter nasional untuk pertukaran dokumen antara mainframe IBM
₪
UNICODE هSe-set karakter 16-bit character yang memiliki 65536 karakter dalam berbagai bahasa • Chinese, Arabic, Greek, Thai, Cyrillic dll • Unicode terbatas pada karakter yang digunakan dalam teks
Tipe Teks Digital ₪
Plain text هTeks dalam format elektronik yang dapat dibaca dan dimengerti oleh manusia
₪
Rich text هSerupa namun memasukkan special control character ke dalam teks untuk memberikan fitur tambahan
₪
Hypertext هMode ahli dari rich teks yang mengijinkan pembaca melompat ke bagian yg berbeda dalam atau luar dokumen
Klasifikasi Font ₪
Klasifikasi didasarkan pada besarnya jarak antar tiap karakter هMonospaced (fixed-width) fonts • Setiap karakter memiliki besar yang sama secara horisontal, tanpa memperdulikan bentuknya • Font dalam mesin ketik • Digunakan untuk heading dan listing program komputer
هProportional fonts • Spasi antar tiap huruf tergantung dari lebar bentuk huruf • Secara umum, mudah dibaca • Contoh : buku tradisional
Klasifikasi Font (2) ₪
Contoh Monospaced (fixed-width) fonts: هTeman sejati selalu datang ketika seluruh dunia pergi (Lucida Sans Typewriter) هCourier
₪
contoh Proportional fonts: هTeman sejati selalu datang ketika seluruh dunia pergi (Lucida Bright) هTimes, Helvetica, Baskerville
Klasifikasi Font (3) ₪
Klasifikasi didasarkan pada stroke yang ditambahkan pada akhir karakter هSerif • Memiliki tambahan stroke pada ujung karakter • Agak susah dibaca pada layar komputer • contoh: Roman Font
هSanserif • Tidak memiliki stroke pada ujung karakter • Terlihat lebih datar • contoh: Arial, Hevetica
Serif & sans serif
Klasifikasi Font
₪ Character
metrics : pengukuran umum yang diterapkan dalam tiap individu karakter ₪ Kerning : jarak antara sepasang karakter ₪ Hal ini berlaku untuk PostScript, TrueType, dan Master tapi tidak untuk bitmapped fonts
Permainan metric
Case ₪ Untuk
sebuah type font, saat type diset dengan tangan, type untuk sebuah font disimpan dalam 2 wadah atau cases ₪ Wadah yang atas menyimpan huruf kapital (uppercase) ₪ Wadah bawah menyimpan huruf kecil (lowercase) ₪ Case sensitive & case insensitive
Cap ₪ Dropcap
₪ Initial
cap
₪ Intercap
Antialiasing
Jaggies dan Antialiasing
Font Bitmap هKeuntungan : Glypsh dapat dirender dalam layar dengan cepat dan mudah, tidak membutuhkan algoritma yang kompleks هDigunakan untuk alat-alat yang beresolusi/ berkemampuan terbatas هKerugian: tidak dapat diskala dengan baik هcontoh: AgfaMonotype
Font Vector/Outline هKeuntungan : dapat diskala dengan mudah, digunakan dalam tampilan resolusi rendah percetakan beresolusi tinggi. Lebih banyak digunakan هKerugian : fungsi matematis dibutuhkan untuk membuat karakter هContoh : TrueType dan Postscript
Font Bitmap dan Vektor (2)
Readability Bogor Bukan lagi kota yang sejuk dan nyaman ₪ Bogor bukan lagi kota yang sejuk dan nyaman ₪ Bogor bukan lagi kota yang sejuk dan nyaman ₪ Bogor bukan lagi kota yang sejuk dan nyaman ₪ Bogor bukan lagi kota yang sejuk dan nyaman ₪ Bogor bukan lagi kota yang sejuk dan nyaman ₪
Readability ₪ ₪
₪
₪
₪ ₪
₪
Apakah sistem pembayaran SPP yang baru akan dapat diterima semua pihak? Apakah sistem pembayaran SPP yang baru akan dapat diterima semua pihak? Apakah sistem pembayaran SPP yang baru akan dapat diterima semua pihak? Apakah sistem pembayaran SPP yang baru akan dapat diterima semua pihak? Apakah sistem pembayaran SPP yang baru akan dapat diterima semua pihak? Apakah sistem pembayaran SPP yang baru akan dapat diterima semua pihak? Apakah sistem pembayaran SPP yang baru akan dapat diterima semua pihak?
Teks dalam Multimedia ₪ Gunakan
teks untuk judul dan headline (tentang apa semua ini) ₪ Untuk menu (ke mana harus pergi?) ₪ Untuk navigasi (bagaimana cara ke sana?) ₪ Dan untuk isi (apa yang akan dilihat saat di sana)
Tip ₪ untuk
sistem navigasi, bawalah pengguna menuju tujuannya dengan memberikan sesedikit mungkin aksi dan sependek mungkin waktu tunggu. ₪ Jika pengguna tidak pernah membutuhkan tombol HELP untuk ke sana dan tidak pernah mengklik BACK saat berada pada dead end selamat !!! ☺
Memilih font teks ₪ Pemilih
informasi menghendaki suatu materi yang disajikan secara singkat, padat, jelas. ₪ Mereka akan mencari/informasi yang hanya mereka butuhkan
₪ Teks
yang terlalu sedikit dalam layar mengakibatkan seringnya membalik halaman, klik mouse yang tidak perlu ++ waktu tunggu ₪ Terlalu banyak teks menyebabkan kekacauan dan ketidaknyamanan
Saran pemilihan font ₪ Untuk
tipe kecil, gunakan font umum yang tersedia. Font Dekoratif yang tidak dapat dibaca adalah percuma!
₪ Gunakan
sesedikit mungkin typeface yang berbeda dalam sebuah pekerjaan. ₪ Namun gunakan saja ragam bobot dan ukuran dari typeface yang digunakan mis: italic atau bold ₪ Ransom-note typographi : penggunaan terlalu banyak font dalam sebuah halaman
Dalam text block, atur leading sampai posisi baris yang nyaman. Baris yang terlalu rapat menyebabkan kesulitan pembacaan ₪ Ragamkan ukuran font bergantung dari pentingnya pesan yang ingin disampaikan ₪ Dalam headline berukuran besar, atur jarak antar huruf (kerning) sehingga spasi di antaranya terlihat nyaman. Jangan terlalu renggang ₪
₪ Coba
memberikan warna yang berbeda dan background yang berbeda pula ₪ Gunakan teks antialiased ₪ Cobalah Drop Cap ₪ Jika menggunakan rata tengah, gunakan sesedikit mungkin banyaknya baris
₪ Untuk
menarik perhatian, jika hanya terdapat sebuah kata, ubah jadi image dan berikan filter yang menarik ₪ Cobalah memberi drop shadow ₪ Pilih font yang menurut anda baik dan cross check dengan yang lain. Cobalah menerima kritik ☺
₪ Gunakan
kata yang bermakna dan singkat untuk menu dan links ₪ Gunakan warna atau garis bawah untuk links ₪ Konsistensi penggunaan warna link dalam seluruh produk ₪ Tebalkan teks yang diperlukan tetapi jangan mirip dengan link atau tombol ₪ Tempatkan teks utama dalam layar utama
Software ₪ Font
manager : هAdobe Type Manager
₪ Font
Editor : هMacromedia Fontografer
Buku referensi ₪ Tipografi
komputer untuk desainer grafis – Adi Kusrianto ₪ Tipografi dalam desain grafis – Danton Sihombing ₪ Stop Stealing Sheep, How Type Works ₪ Digital Type and Color
Jodohkan ☺
KATA jangan gunakan هJargon, kata atau istilah: • Unik hanya pada bidang komputer • Memiliki perbedaan makna antara di luar dengan di dalam bidang komputer • Dibuat (buat) untuk menggambarkan fungsi/kondisi tertentu
karena harus dipelajari dan kemungkinan salah diinterpretasikan هSingkatan atau akronim • Kecuali singkatan tersebut sudah dikenali sebagai satu kata/frase penuh
هKontraksi kata, akhiran, awalan • Mis ass, smg, yg
KATA Gunakan Pendek, sudah diketahui umum (familiar) ₪ Menggunakan karakter alfabet standar ₪ Satu kata lengkap ₪ Bermakna positif ₪ Kata aktif/perintah ₪ “more” ketika terdapat pembandingan ₪ Kata yang konsisten ₪
Kalimat & Pesan gunakan Jelas dan sederhana ₪ Dapat digunakan langsung dan segera ₪ Kalimat yang menyakinkan ₪ Dalam bentuk aktif ₪ Sesuai urutan ₪ Topik utama di awal ₪
Menampilkan Teks ₪
Fonts : هGunakan fonts yang sederhana (plain & simple) هPilih minimal 12 atau 14 poin هGunakan proportional font
₪
Lebar : هMasukkan tidak lebih dari 40-60 karakter pada tiap baris • Untuk kolom ganda, gunakan 30-50 karakter dipisahkan dengan 5 spasi
هJangan gunakan rata kanan هJangan gunakan tanda kutip
Isi ₪ ₪
₪ ₪ ₪
Gunakan heading untuk mengenalkan topik baru Pisahkan paragraf dengan sekurang-kurangnya satu baris kosong Mulai topik baru pada halaman baru Gunakan daftar/list untuk menyajikan fakta Tekankan hal penting melalui هPosisi, kotak, cetak tebal, margin masuk
₪ ₪
Gunakan halaman (bukan scroll) Desain halaman yang konsisten
Menulis teks ₪
Kalimat & paragraf هGunakan kalimat pendek yang familiar • Potong kalimat yang berlebih • Pertahankan bahwa sebuah kalimat tidak lebih dari 20 kata
هPotong sejumlah kalimat yang tidak perlu هGunakan kalimat berbeda untuk maksud berbeda هBatasi satu paragraf untuk satu ide.
Seleksi Typeface
Ukuran Teks
Warna Foreground vs background
Teks dalam Background foto
Teks dalam Background foto
Teks dalam Background foto
Teks dalam Background foto
