Top Banner
TYPOGRAPHY DESIGN A DISCUSSION & REVIEW
82

Typography Design - Sebuah Diskusi & Review

Nov 29, 2014

Download

Design

webgeek

Material Diskusi Typography suWec (Surabaya Web Community)
Friday, December 17 · 6:30pm - 9:30pm
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Typography Design - Sebuah Diskusi & Review

TYPOGRAPHY DESIGNA DISCUSSION & REVIEW

Page 2: Typography Design - Sebuah Diskusi & Review

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
Page 4: Typography Design - Sebuah Diskusi & Review

Type Anatomy

Page 5: Typography Design - Sebuah Diskusi & Review

Type Anatomy

Page 6: Typography Design - Sebuah Diskusi & Review

Jenis - jenis Font

SerifSans SerifSlab SerifBlackletter (Gothic Script) Display ScriptHandwriting DecorativeCalligraphy Comic, dll.

Page 7: Typography Design - Sebuah Diskusi & Review

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
Page 9: Typography Design - Sebuah Diskusi & Review
Page 10: Typography Design - Sebuah Diskusi & Review

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
Page 12: Typography Design - Sebuah Diskusi & Review
Page 13: Typography Design - Sebuah Diskusi & Review

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
Page 15: Typography Design - Sebuah Diskusi & Review
Page 16: Typography Design - Sebuah Diskusi & Review

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

Script Font

Handwriting Font

Page 18: Typography Design - Sebuah Diskusi & Review

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

Readability Factor

Tracking (Kerning) Leading Vertical RhythmPairingText AlignmentSizeColor and Contrast

Page 20: Typography Design - Sebuah Diskusi & Review

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

Readibility - Tracking

Page 22: Typography Design - Sebuah Diskusi & Review

Readibility - Tracking

Page 23: Typography Design - Sebuah Diskusi & Review

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

Readibility - Leading

Page 25: Typography Design - Sebuah Diskusi & Review

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

Readibility - Vertical RythmContoh dalam CSSbody { font-size: 11px; line-height: 1.5em; } p { margin-bottom: 15px; }

Page 27: Typography Design - Sebuah Diskusi & Review

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

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

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

Readibility - Pairing

Design akhir dengan pairing yang seimbang dan mudah dibaca

Page 31: Typography Design - Sebuah Diskusi & Review

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

Readibility - Text Alignment

Page 33: Typography Design - Sebuah Diskusi & Review

Readibility - Text Alignment

Page 34: Typography Design - Sebuah Diskusi & Review

Readibility - Text Alignment

Page 35: Typography Design - Sebuah Diskusi & Review

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

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

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

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

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

Readibility - Warna & Contrast

Page 41: Typography Design - Sebuah Diskusi & Review

Readibility - Warna & Contrast

Page 42: Typography Design - Sebuah Diskusi & Review

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

Audience Factor

Website yang didesign untuk anak-anak ~ menggunakan font berjenis comical

Page 44: Typography Design - Sebuah Diskusi & Review

Audience Factor

Website yang didesign untuk sebuah bar ~ menggunakan font yang lebih tegas

Page 45: Typography Design - Sebuah Diskusi & Review

Audience Factor

Poster sebuah group band yang bertema Grunge

Page 46: Typography Design - Sebuah Diskusi & Review

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
Page 48: Typography Design - Sebuah Diskusi & Review
Page 49: Typography Design - Sebuah Diskusi & Review
Page 50: Typography Design - Sebuah Diskusi & Review

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

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

Typography Trend - Euphoria Web 2.0

Page 53: Typography Design - Sebuah Diskusi & Review

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

Typography Trend - Booming Product Apple

Page 55: Typography Design - Sebuah Diskusi & Review

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

Typography Trend - Grunge & Psychadelic

Page 57: Typography Design - Sebuah Diskusi & Review

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

Typography Trend - CSS3 Techniques

line25.com

Page 59: Typography Design - Sebuah Diskusi & Review

Typography Trend - CSS3 Techniques

24ways.org

Page 60: Typography Design - Sebuah Diskusi & Review

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

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

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

Tips -Tips dalam Typography:

Penerapan white space untuk menciptakan komposisi bidang yang seimbang pada sebuah business card

Page 64: Typography Design - Sebuah Diskusi & Review

Tips -Tips dalam Typography:

Mendesign dengan grid system

Page 65: Typography Design - Sebuah Diskusi & Review

Tips -Tips dalam Typography:

Sebuah infography dengan Swiss Style Typography design yang dibuat menggunakan grid system

Page 66: Typography Design - Sebuah Diskusi & Review

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

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

European Typography Characters

Page 69: Typography Design - Sebuah Diskusi & Review

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

Asian Typography Design Characters

Page 71: Typography Design - Sebuah Diskusi & Review

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

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

Swiss Typography Design Characters

Page 74: Typography Design - Sebuah Diskusi & Review

Swiss Style Typography Characters

Page 75: Typography Design - Sebuah Diskusi & Review

Swiss Style Typography Characters

Page 76: Typography Design - Sebuah Diskusi & Review

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

American Typography Design Characters

Page 78: Typography Design - Sebuah Diskusi & Review

American Typography Design Characters

Page 79: Typography Design - Sebuah Diskusi & Review

American Typography Design Characters

Page 80: Typography Design - Sebuah Diskusi & Review

American Typography Design Characters

alpha-multimedia.com

Page 81: Typography Design - Sebuah Diskusi & Review

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

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/