The quick brown fox jumps over the lazy dog
Teks & Typografi
Kekuatan Kekuatan Kekuatan
Kekuatan MaknaMaknaMaknaMakna
₪ 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
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
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.
Karakteristik font Descender Cap height Font size Ascender Serif X-height
Contoh : font Times New Roman
Karakteristik font
Contoh : font Times New Roman
Contoh : font Times New Roman
UPPER CASE beak
stem Foot serif descender eye topline capline meanline baseline beardline Lower case
Karakteristik font
Contoh : font Times New Roman
Contoh : font Times New Roman
UPPER CASE
stem
spur
beak Closed bowl
hairline
crossbar
shoulder
arm
Closed counter tail Open counter
istilah
₪
Font dalam komputer secara
otomatis menambahkan jarak di
bawah descender (dan terkadang di
atas) untuk menyajikan spasi baris
yang nyata
leading (baca:
ledding)
FONTS
₪ Glyph adalah representasi visual dari
bentuk karakter
q q q q q
q
q q
₪ 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
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
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
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)
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
₪
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
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)
Cap
₪ Dropcap
₪ Initial cap
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
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
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
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?
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
Tip
Tip
Tip
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
Memilih font teks
₪
Pemilih informasi menghendaki
suatu materi yang disajikan
secara singkat, padat, jelas.
₪
Mereka akan mencari/informasi
₪
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
Software
₪ Font manager :
ه Adobe Type Manager
₪ Font Editor :
Buku referensi
₪ Tipografi komputer untuk desainer
grafis – Adi Kusrianto
₪ Tipografi dalam desain grafis –
Danton Sihombing
₪ Stop Stealing Sheep, How Type
Works
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
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
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)
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
