typography design - sebuah diskusi & review
DESCRIPTION
Material Diskusi Typography suWec (Surabaya Web Community) Friday, December 17 · 6:30pm - 9:30pmTRANSCRIPT
![Page 1: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/1.jpg)
TYPOGRAPHY DESIGNA DISCUSSION & REVIEW
![Page 2: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/2.jpg)
Definisi Typography
Teknik atau seni mengatur, mengubah atau mendesign suatu huruf atau kelompok huruf baik secara fisik atau digital. Profesi yang sangat mengandalkan prinsip-prinsip Typography: typographer, graphic designer, art directors, comic book artist, graffiti, web designers, logo designer, dll. Typography untuk design grafis berbeda tujuan dengan typography yang di design untuk tujuan seni (art). Dalam design grafis, typography harus mampu mengomunikasikan pesan sedangkan typography untuk tujuan pure art, tidak harus bisa dipahami dalam arti sebenarnya.
![Page 3: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/3.jpg)
![Page 4: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/4.jpg)
Type Anatomy
![Page 5: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/5.jpg)
Type Anatomy
![Page 6: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/6.jpg)
Jenis - jenis Font
SerifSans SerifSlab SerifBlackletter (Gothic Script) Display ScriptHandwriting DecorativeCalligraphy Comic, dll.
![Page 7: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/7.jpg)
Serif FontMemiliki detail struktur di bagian akhir atau ujung huruf (strokes)Memiliki kesan dinamis sekaligus elegant Dikenal juga dengan sebutan 'Roman' font.Sering digunakan sebagai body text untuk media print
![Page 8: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/8.jpg)
![Page 9: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/9.jpg)
![Page 10: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/10.jpg)
Sans Serif FontTidak memiliki detail struktur di bagian akhir atau ujung huruf (strokes). Sederhana dalam tampilan bentuk (statis) Berasal dari bahasa French 'sans', artinya “tanpa”. Sering digunakan sebagai headline untuk media print dan body text untuk web.
![Page 11: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/11.jpg)
![Page 12: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/12.jpg)
![Page 13: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/13.jpg)
Slab Serif Font
Karakter font memiliki ketebalan huruf dan serif yang berbentuk block. Terminal serif umumnya berbentuk sudut persegi atau angular (roundy)
![Page 14: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/14.jpg)
![Page 15: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/15.jpg)
![Page 16: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/16.jpg)
Gothic FontPertama kali digunakan di Eropa Barat Sering digunakan sebagai konsep design grunge fontSering digunakan sebagai logotype pada banyak surat kabar
![Page 17: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/17.jpg)
Script Font
Handwriting Font
![Page 18: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/18.jpg)
Pemilihan Font
Penggunaan font dapat menimbulkan mood atau kesan tertentu pada design. Juga berfungsi untuk menyampaikan pesan pada suatu branding identity. Pemilihan & penggunaan font umumnya didasarkan pada faktor-faktor:1. Readibility2. Audience3. Visual Identity
![Page 19: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/19.jpg)
Readability Factor
Tracking (Kerning) Leading Vertical RhythmPairingText AlignmentSizeColor and Contrast
![Page 20: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/20.jpg)
Readibility - Tracking (Kerning)Jarak diantara dua karakter huruf di dalam text. Dalam web design, web standard font sudah di design sesempurna mungkin, misalnya memiliki auto kerning yang bagus. Namun untuk beberapa font berukuran besar pada headings, mungkin perlu sedikit penyesuaian. Jarak yang terlalu lebar pastinya menjadi tidak nyaman untuk dibaca. Properti CSS untuk ini adalah: letter-spacing: 2px
![Page 21: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/21.jpg)
Readibility - Tracking
![Page 22: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/22.jpg)
Readibility - Tracking
![Page 23: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/23.jpg)
Readibility - LeadingJarak spasi antar baris di dalam suatu body paragraph. Di dalam CSS kita mengenalnya dengan properti “line-height”. Contoh: line-height: 1.5em.
![Page 24: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/24.jpg)
Readibility - Leading
![Page 25: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/25.jpg)
Readibility - Vertical Rythm
Pengaturan irama pada jarak spasi sehingga ideal untuk dilihat atau diikuti oleh mata.Pergunakan baseline grid untuk acuanVertical rhythm yang paling bagus adalah yang mendekati 1.5em ~ 24px line-height (berdasarkan ukuran font 11px).
![Page 26: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/26.jpg)
Readibility - Vertical RythmContoh dalam CSSbody { font-size: 11px; line-height: 1.5em; } p { margin-bottom: 15px; }
![Page 27: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/27.jpg)
Readibility - Pairing
Teknik memadukan beberapa font yang berbeda. Tantangannya adalah bukan pada memilih dua font yang mirip tapi lebih pada bagaimana menciptakan kesan yang unik pada suatu designPada umumnya kita akan memilih cara yang aman dengan menggunakan maksimal dua font pada web design. Satu untuk header text (bisa berupa logo) atau heading dan lainnya untuk paragraph text. Font yang serupa membuat design kita safe, tapi bisa jadi sesuatu yang membosankan.
![Page 28: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/28.jpg)
Readibility - PairingParagraph text pada umumnya menggunakan web safe font standard (arial, trebuchet, times new roman, verdana, georgia, dll.) Namun dengan teknologi font embeding yang berkembang penggunaan font lain selain standard web font menjadi mungkin. Contoh: Junction, Museo Sans, Sansation.Jika harus sejenis, pastikan bahwa ada irama, emphasis (titik pusat perhatian) dan contrast yang jelas di setiap elemen penyusun design.
![Page 29: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/29.jpg)
Readibility - Pairing
Seluruh text menggunakan font decorative font. Bagian body susah dibaca
Decorative text untuk bagian Headings dan font sans serif dipilih untuk body text
![Page 30: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/30.jpg)
Readibility - Pairing
Design akhir dengan pairing yang seimbang dan mudah dibaca
![Page 31: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/31.jpg)
Readibility - Text Alignment
Flush Left (Rata kiri) » Secara default adalah setting yang paling bagus untuk paragraph text. Alasan utamanya adalah karena susunan kata dalam kalimat menjadi mudah dibaca. Centered (Perataan tengah) » Bagus untuk menampilkan quote atau callouts, slogan dan sejenisnya, namun tidak disarankan untuk paragraph dengan banyak kalimat.Flush Right (Rata kanan) » Solusi yang bagus untuk menambahkan sesuatu berbeda dalam susunan yang normal (rata kiri atau rata kanan-kiri). Hanya akan efektif terlihat bagus untuk callout atau text yang menggunakan huruf kecil atau paragraph yang memiliki sedikit kata-kata.Justified (Rata kanan-kiri) » terlihat rapi jika dihasilkan dari software web print seperti adobe in design ~tetapi untuk website, akan terlihat aneh karena kita akan sulit mengontrol jarak antar kata yang tidak seragam dan dipaksakan akibat perataan semacam ini.
![Page 32: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/32.jpg)
Readibility - Text Alignment
![Page 33: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/33.jpg)
Readibility - Text Alignment
![Page 34: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/34.jpg)
Readibility - Text Alignment
![Page 35: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/35.jpg)
Readibility - SizeDalam Web Design, satuan em lebih baik daripada px karena px adalah satuan ukuran yang statis. Artinya ketika di zoom in, ukurannya tidak bisa relative dengan window browser kita.Size atau ukuran font dapat dikomposisikan untuk memudahkan penyampaian struktur informasi dalam suatu design selain itu juga dapat menambah nilai estetik suatu design TypographyPenataan ukuran font pada beberapa komponen design dapat pula menciptakan mood tertentu.
![Page 36: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/36.jpg)
Readibility - Size
Perbedaan ukuran antar font yang sejenis membuat komponen design invitation ini menjadi terlihat artistic walaupun konsep design-nya sederhana.
![Page 37: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/37.jpg)
Readibility - Size
Contoh perbedaan ukuran font dalam suatu website design yang memudahkan penyampaian informasi. Terstruktur dan seimbang dengan unsur graphic di dalamya sehingga menjadi efektif.
![Page 38: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/38.jpg)
Readibility - Size
Website ini memiliki sedikit elemen illustrasi, namun perbedaan ukuran font yang jelas untuk navigasi, heading dan sub heading, membuat pandangan kita menjadi mengalir dari satu bagian ke bagian yang lain dengan nyaman
![Page 39: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/39.jpg)
Readibility - Warna & Contrast
Penataan warna & contrast pada font juga dapat dikombinasikan dengan perbedaan ukuran dengan tujuan menciptakan kesan tertentu pada suatu designBagaimana menciptakan kontras yang baik antara warna font atau text dengan background sehingga kita mudah membacanya. Perlunya merasakan tiap level kontras warna melalui beberapa eksperimen sebelum memutuskan untuk memilih warna sehingga hasilnya maksimal dan nyaman untuk dilihat.
![Page 40: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/40.jpg)
Readibility - Warna & Contrast
![Page 41: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/41.jpg)
Readibility - Warna & Contrast
![Page 42: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/42.jpg)
Audience Factor
Tentukan audience. Siapa kira-kira yang akan mengakses website kita, akan dipasang dimana poster design kita, dll.Kelengkapan karakter typeface yang kita gunakan. Standar font untuk negara yang memiliki unit karakter font tertentu seperti Arabic, China, Jepang, RussiaApa pesan dan kesan yang ingin ditampilkan. Perlukah menciptakan mood tertentu? Simplicity, Creative website, Retro, Grunge, Pop, Casual, Friendly, Eco-Green theme, dll. adalah beberapa keyword yang perlu digarisbawahi. Design website untuk sebuah group band akan berbeda dengan website untuk seorang pelukis misalnya, begitu pula dengan jenis font yang digunakan. Corporate website memerlukan jenis font yang formal dan memiliki professional look.
![Page 43: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/43.jpg)
Audience Factor
Website yang didesign untuk anak-anak ~ menggunakan font berjenis comical
![Page 44: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/44.jpg)
Audience Factor
Website yang didesign untuk sebuah bar ~ menggunakan font yang lebih tegas
![Page 45: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/45.jpg)
Audience Factor
Poster sebuah group band yang bertema Grunge
![Page 46: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/46.jpg)
Visual Identity Factor
Visual identity adalah design brand sebuah product atau service beserta komponen-komponen designnya, yaitu logo, warna, grafis dll sebagai satu kesatuan.Pemilihan font baik untuk web atau media lainnya sudah semestinya disesuaikan dengan design visual identity suatu brand, berikut cara kita mengolah dan menampilkannya. Sehinga tercipta konsistensi
![Page 47: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/47.jpg)
![Page 48: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/48.jpg)
![Page 49: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/49.jpg)
![Page 50: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/50.jpg)
Typography Trend
Design website atau grafis berikut tema typography yang digunakan sebenarnya tidak selalu harus mengikut trend. Kita akan cenderung memilih font sesuai kebutuhan dan content dari website yang akan kita designTrend berkembang seiring dengan inovasi teknologi terbaru di bidang web design, perubahan lifestyle. Perkembangan ini mempengaruhi tampilan suatu website atau grafis design baik dari segi tampilan artistik atau elemen penyusunnya.
![Page 51: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/51.jpg)
Typography Trend - Euphoria Web 2.0
Karakteristik typography design:
tampilan logo dengan font untuk heading serta body text yang simple dan terkesan friendly dominasi warna- warna terang, seperti: hijau, orange dan biru muda gradient effectglossy effect disana sini
![Page 52: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/52.jpg)
Typography Trend - Euphoria Web 2.0
![Page 53: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/53.jpg)
Typography Trend - Booming Product Apple
Karakteristik typography design:
text dengan letterpress effect menyertakan simplified icons bersama dengan text (ala interface product Apple)menggunakan color schemes product Apple (greyish, white, subtle gradient)
![Page 54: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/54.jpg)
Typography Trend - Booming Product Apple
![Page 55: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/55.jpg)
Typography Trend - Grunge & Psychadelic
Karakteristik typography design:
akibat dari banyaknya keteresediaan freebies (brushes, vectors, grunge fonts, sketch fonts) yang akhirnya mendorong orang untuk lebih kreatif mengolah design websitenya.untuk mengakomodasi image sebuah lifestyle dengan target audience tertentu (misal: remaja - pecinta music rock, dll.)
![Page 56: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/56.jpg)
Typography Trend - Grunge & Psychadelic
![Page 57: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/57.jpg)
Typography Trend - CSS3 Techniques
Karakteristik typography design:
banyak orang bereksperimen dengan CSS3 animation CSS text effect (gradient, shadow) pada heading dan subheadings bahkan pada paragraph text.permainan posisi text sehingga menyerupai tranparent layer (lapisan) hanya menggunakan CSS (tanpa web grafis)
![Page 58: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/58.jpg)
Typography Trend - CSS3 Techniques
line25.com
![Page 59: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/59.jpg)
Typography Trend - CSS3 Techniques
24ways.org
![Page 60: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/60.jpg)
Tips -Tips dalam Typography:
Pilih font dengan style dengan kesan yang tidak biasa (dinamis) atau bahkan luar biasa (mendekati heboh =D) untuk headings dan font yang lebih static untuk paragraph. Cobalah bereksperimen dengan ukuran atau ketebalan font untuk heading dan paragraph jika harus menggunakan satu font (type family) saja. Jangan menggunakan dua font untuk display atau headings yang saling mendominasi satu sama lain. Jika harus memakai dua font display yang berbeda karakter, pilih bagian mana yang ingin ditonjolkan terutama melalui perbedaan ukuran atau warna.
![Page 61: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/61.jpg)
Tips -Tips dalam Typography:
Cobalah menggunakan Grid di tahap wireframing untuk mendapatkan komposisi typography design yang seimbang dan proporsional. Menciptakan rhythm atau irama. Perhatikan unsur whitespace. Unsur ini mampu memberikan efek visual dan komposisi design yang dramatis, sekaligus readibilityPenyampaian informasi yang efektif tanpa harus memenuhi halaman web page, sehingga tampilan informasi menjadi terstruktur. Less is more. Berikan informasi yang terpenting pada audience, dan selanjutnya biarkan mereka mengeksplor sendiri
![Page 62: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/62.jpg)
Tips -Tips dalam Typography:
Penerapan white space yang membuat tampilan typography menjadi kontras dengan semua yang ada di sekelilingnya
![Page 63: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/63.jpg)
Tips -Tips dalam Typography:
Penerapan white space untuk menciptakan komposisi bidang yang seimbang pada sebuah business card
![Page 64: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/64.jpg)
Tips -Tips dalam Typography:
Mendesign dengan grid system
![Page 65: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/65.jpg)
Tips -Tips dalam Typography:
Sebuah infography dengan Swiss Style Typography design yang dibuat menggunakan grid system
![Page 66: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/66.jpg)
European Typography CharactersPerpanduan antara style design classic dan modern (neoclassicism) Berusaha menampilkan design yang elegan namun juga masih terkesan up to date secara visual. Sering menggunakan font-font yang classic seperti Georgia, Fontin, atau script fonts untuk kesan yang elegan.
![Page 67: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/67.jpg)
European Typography CharactersMenggunakan font transisional. Contoh:Times New Roman, Baskerville.Menggunakan font serifs modern yang terlihat lebih geometris, tajam, memiliki kontras di beberapa karakter huruf, & artistic. Misalnya Bodoni, Didot
![Page 68: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/68.jpg)
European Typography Characters
![Page 69: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/69.jpg)
Asian Typography Design CharactersSering menggunakan font-font decorative, kaligrafi karena selalu bercermin pada akar budayanya yang dekat dengan alam dan filosofinya. Memadukan tekstur, mengkombinasikan warna-warna alam yang eksotis sehingga terkesan friendly (ramah)
![Page 70: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/70.jpg)
Asian Typography Design Characters
![Page 71: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/71.jpg)
Swiss Typography Design CharactersThe power of mind direpresentasikan oleh Uniformity and GeometrySering menggunakan sans serif font, terutama HelveticaClean simplicity, mendesign dengan sangat memperhatikan grid dengan tujuan untuk menampilkan informasi dengan struktur yang jelas. White space yang lugas. Memadukan bentuk geometri, photography dan typography
![Page 72: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/72.jpg)
Swiss Typography Design CharactersDe Stijl movement » The neoplasticism, as proposed by De Stijl artists, is about elementarism and geometry not only as a form of exploring the potential of the fundamental elements, but as a pursuit of beauty and harmony, hinting on a more mystical belief in ‘ideal’ geometric forms. (bahwa semua hal berkaitan dengan elemen design dan geometri tidak hanya berfungsi sebagai suatu bentuk untuk menciptakan elemen-elemen basic, tapi dapat bertujuan menciptakan keindahan dan harmoni)Menggunakan warna-warna web-print yang solid (CMYK) dengan kombinasi yang tidak biasa, tapi berfungsi untuk menciptakan kontras (pengaruh DeStijl movement)Jan Tschichol » Filosofi dalam memilih font: font tidak harus terlalu terlihat eksprisive dari segi bentuk, yang paling penting adalah bagaimana font bisa menjadi alat untuk berekspresi (terutama melalui komposisi layout)
![Page 73: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/73.jpg)
Swiss Typography Design Characters
![Page 74: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/74.jpg)
Swiss Style Typography Characters
![Page 75: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/75.jpg)
Swiss Style Typography Characters
![Page 76: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/76.jpg)
American Typography Design CharactersUrban lifestyle, multicultural ~ cross-culturesMenyukai gaya design retro atau industrial styleSeringkali menggunakan font berjenis Slab Serif (mis. Chunk Five) atau Script (mis. Lobster) yang ditampilkan dengan ukuran tebal atau besar (Big Typography) sebagai display font atau heading website untuk mendapatkan kesan retroPenggunaan font-font berbentuk pipih atau condensed font (industrial font typical) seperti Impact, League GothicSering memadukan illustrasi dan typography. Menggunakan komposisi warna retro atau terkadang industrial color scheme.
![Page 77: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/77.jpg)
American Typography Design Characters
![Page 78: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/78.jpg)
American Typography Design Characters
![Page 79: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/79.jpg)
American Typography Design Characters
![Page 80: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/80.jpg)
American Typography Design Characters
alpha-multimedia.com
![Page 81: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/81.jpg)
Mengapa Helvetica?"One of the strongest characteristics of the Swiss style typography is the use of sans-serif typefaces such as Akzidenz Grotesk and Neue Haas Grotesk (a.k.a Helvetica). In fact, when Jan Tschichold wrote Die neue Typographie, he ignored any use of non sans-serif typefaces. With this philosophy, graphic designers were aiming at clarity, simplicity and universality. Helvetica, for instance, is a typeface that is famous for its pervasiveness: it is used in corporate identity, street signs, magazines and pretty much everywhere else. The Swiss Style advocates that the typeface does not have to be expressive in itself, it must be an unobtrusive instrument of expression." (Lesson From Swiss Style Graphic Design - Smashing Magz )
Simple dan memiliki clarity yang bagus (jelas - lugas)Flexible & Universal karena sering digunakan pada beragam media terutama sebagai display font karena proporsi antara tinggi dan lebarnya dianggap sempurna.Kekurangan: tidak terlalu bagus untuk screen font atau sebagai body text untuk web.
![Page 82: Typography Design - Sebuah Diskusi & Review](https://reader034.vdokumen.com/reader034/viewer/2022042503/5479f0f45906b530358b4622/html5/thumbnails/82.jpg)
Link of References
http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/http://www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphic-design/http://www.smashingmagazine.com/2008/02/11/award-winning-newspaper-designs/ http://webdesignledger.com/inspiration/a-showcase-of-letterpress-invitations-for-inspiration
http://speckyboy.com/2008/10/06/css-typography-reference-sheet-get-creative-with-your-headlines/http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web/http://net.tutsplus.com/tutorials/html-css-techniques/six-ways-to-improve-your-web-typography/