Post on 29-Nov-2014
description
TYPOGRAPHY DESIGNA DISCUSSION & 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.
Type Anatomy
Type Anatomy
Jenis - jenis Font
SerifSans SerifSlab SerifBlackletter (Gothic Script) Display ScriptHandwriting DecorativeCalligraphy Comic, dll.
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
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.
Slab Serif Font
Karakter font memiliki ketebalan huruf dan serif yang berbentuk block. Terminal serif umumnya berbentuk sudut persegi atau angular (roundy)
Gothic FontPertama kali digunakan di Eropa Barat Sering digunakan sebagai konsep design grunge fontSering digunakan sebagai logotype pada banyak surat kabar
Script Font
Handwriting Font
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
Readability Factor
Tracking (Kerning) Leading Vertical RhythmPairingText AlignmentSizeColor and Contrast
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
Readibility - Tracking
Readibility - Tracking
Readibility - LeadingJarak spasi antar baris di dalam suatu body paragraph. Di dalam CSS kita mengenalnya dengan properti “line-height”. Contoh: line-height: 1.5em.
Readibility - Leading
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).
Readibility - Vertical RythmContoh dalam CSSbody { font-size: 11px; line-height: 1.5em; } p { margin-bottom: 15px; }
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.
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.
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
Readibility - Pairing
Design akhir dengan pairing yang seimbang dan mudah dibaca
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.
Readibility - Text Alignment
Readibility - Text Alignment
Readibility - Text Alignment
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.
Readibility - Size
Perbedaan ukuran antar font yang sejenis membuat komponen design invitation ini menjadi terlihat artistic walaupun konsep design-nya sederhana.
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.
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
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.
Readibility - Warna & Contrast
Readibility - Warna & Contrast
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.
Audience Factor
Website yang didesign untuk anak-anak ~ menggunakan font berjenis comical
Audience Factor
Website yang didesign untuk sebuah bar ~ menggunakan font yang lebih tegas
Audience Factor
Poster sebuah group band yang bertema Grunge
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
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.
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
Typography Trend - Euphoria Web 2.0
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)
Typography Trend - Booming Product Apple
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.)
Typography Trend - Grunge & Psychadelic
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)
Typography Trend - CSS3 Techniques
line25.com
Typography Trend - CSS3 Techniques
24ways.org
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.
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
Tips -Tips dalam Typography:
Penerapan white space yang membuat tampilan typography menjadi kontras dengan semua yang ada di sekelilingnya
Tips -Tips dalam Typography:
Penerapan white space untuk menciptakan komposisi bidang yang seimbang pada sebuah business card
Tips -Tips dalam Typography:
Mendesign dengan grid system
Tips -Tips dalam Typography:
Sebuah infography dengan Swiss Style Typography design yang dibuat menggunakan grid system
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.
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
European Typography Characters
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)
Asian Typography Design Characters
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
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)
Swiss Typography Design Characters
Swiss Style Typography Characters
Swiss Style Typography Characters
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.
American Typography Design Characters
American Typography Design Characters
American Typography Design Characters
American Typography Design Characters
alpha-multimedia.com
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.
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/