Typography Design - Sebuah Diskusi & Review

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/