The quick brown fox jumps over the lazy dog

Transkripsi

1 The quick brown fox jumps over the lazy dog

2

3

4

5 Teks & Typografi Komputer Multimedia 2009

6

7 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

8

9

10

11

12

13 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

14 istilah Font style : bold & italics Font attribute : underlining, outlining Type size : biasanya digunakan point 1 point = inch = 1/72 inch Size : jarak antara bagian atas dari huruf kapital sampai bagian bawah descender pada huruf g atau y.

15 Pengukuran Type

16 Karakteristik font Contoh : font Times New Roman Cap height X-height Ascender Font size Serif Descender

17 Karakteristik font Contoh : font Times New Roman UPPER CASE beak eye Lower case topline capline meanline descender stem Foot serif baseline beardline

18 Karakteristik font Contoh : font Times New Roman UPPER CASE shoulder beak arm Closed bowl Open counter hairline stem crossbar spur Closed counter posture tail

19 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

20 FONTS Glyph adalah representasi visual dari bentuk karakter q q q q q q qq Glyphs disusun ke dalam koleksi yang disebut fonts Diambil dari sistem Menyatu dalam file

21 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

22 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

23 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

24 ASCII Character

25 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 karakter dalam berbagai bahasa Chinese, Arabic, Greek, Thai, Cyrillic dll Unicode terbatas pada karakter yang digunakan dalam teks

26 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

27 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

28 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

29 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

30 Serif & sans serif

31 Klasifikasi Font

32 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

33 Permainan metric

34 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

35 Cap Dropcap Initial cap Intercap

36 Antialiasing

37 Jaggies dan Antialiasing

38 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

39 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

40 Font Bitmap dan Vektor (2)

41 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

42 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?

43 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)

44 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!!!

45 Memilih font teks Pemilih informasi menghendaki suatu materi yang disajikan secara singkat, padat, jelas. Mereka akan mencari/informasi yang hanya mereka butuhkan

46 Teks yang terlalu sedikit dalam layar mengakibatkan seringnya membalik halaman, klik mouse yang tidak perlu ++ waktu tunggu Terlalu banyak teks menyebabkan kekacauan dan ketidaknyamanan

47 Saran pemilihan font Untuk tipe kecil, gunakan font umum yang tersedia. Font Dekoratif yang tidak dapat dibaca adalah percuma!

48 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

49 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

50 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

51 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

52 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

53 Font manager : Software Adobe Type Manager Font Editor : Macromedia Fontografer

54 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

55

56 Jodohkan

57

58

59

60

61

62 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

63 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

64 Kalimat & Pesan gunakan Jelas dan sederhana Dapat digunakan langsung dan segera Kalimat yang menyakinkan Dalam bentuk aktif Sesuai urutan Topik utama di awal

65 Menampilkan Teks Fonts : Gunakan fonts yang sederhana (plain & simple) Pilih minimal 12 atau 14 poin Gunakan proportional font Lebar : Masukkan tidak lebih dari karakter pada tiap baris Untuk kolom ganda, gunakan karakter dipisahkan dengan 5 spasi Jangan gunakan rata kanan Jangan gunakan tanda kutip

66 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

67 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.

68

69

70 Seleksi Typeface

71 Ukuran Teks

72 Warna Foreground vs background

73 Teks dalam Background foto

77