Material Diskusi Typography suWec (Surabaya Web Community) Friday, December 17 · 6:30pm - 9:30pm

1. TYPOGRAPHY DESIGN
A DISCUSSION & REVIEW

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

4. Type Anatomy

5. Type Anatomy

6. Jenis - jenis Font
Serif
Sans Serif
Slab Serif
Blackletter (Gothic Script)
Display
Script
Handwriting
Decorative
Calligraphy
Comic, dll.

7. Serif Font
Memiliki 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

10. Sans Serif Font
Tidak 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.

13. Slab Serif Font
Karakter font memiliki ketebalan huruf dan serif yang
berbentuk block.
Terminal serif umumnya berbentuk sudut persegi atau
angular (roundy)

16. Gothic Font
Pertama kali
digunakan di Eropa
Barat
Sering digunakan
sebagai konsep
design grunge font
Sering digunakan
sebagai logotype
pada banyak surat
kabar

17. Handwriting Font
Script Font

18. 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. Readibility
2. Audience
3. Visual Identity

19. Readability Factor
Tracking (Kerning)
Leading
Vertical Rhythm
Pairing
Text Alignment
Size
Color and Contrast

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

21. Readibility - Tracking

22. Readibility - Tracking

23. Readibility - Leading
Jarak spasi antar baris
di dalam suatu body
paragraph.
Di dalam CSS kita
mengenalnya dengan
properti “line-height”.
Contoh:
line-height: 1.5
em.

24. Readibility - Leading

25. Readibility - Vertical Rythm
Pengaturan irama pada jarak spasi
sehingga ideal untuk dilihat atau diikuti
oleh mata.
Pergunakan baseline grid untuk acuan
Vertical rhythm yang paling bagus adalah
yang mendekati 1.5em ~ 24px line-height
(berdasarkan ukuran font 11px).

26. Readibility - Vertical Rythm
Contoh dalam CSS
body {
font-size: 11px;
line-height: 1.5em;
}
p {
margin-bottom: 15px; }

27. 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 design
Pada 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.

28. Readibility - Pairing
Paragraph 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.

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

30. Readibility - Pairing
Design akhir dengan
pairing yang
seimbang dan mudah
dibaca

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

32. Readibility - Text Alignment

33. Readibility - Text Alignment

34. Readibility - Text Alignment

35. Readibility - Size
Dalam 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 Typography
Penataan ukuran font pada beberapa komponen design dapat
pula menciptakan mood tertentu.

36. Readibility - Size
Perbedaan ukuran
antar font yang
sejenis membuat
komponen design
invitation ini menjadi
terlihat artistic
walaupun konsep
design-nya
sederhana.

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

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

39. Readibility - Warna & Contrast
Penataan warna & contrast pada font juga dapat
dikombinasikan dengan perbedaan ukuran dengan
tujuan menciptakan kesan tertentu pada suatu
design
Bagaimana 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.

40. Readibility - Warna & Contrast

41. Readibility - Warna & Contrast

42. 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, Russia
Apa 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.

43. Audience Factor
Website yang didesign untuk anak-anak ~
menggunakan font berjenis comical

44. Audience Factor
Website yang didesign untuk sebuah bar ~
menggunakan font yang lebih tegas

45. Audience Factor
Poster sebuah
group band
yang bertema
Grunge

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

50. 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 design
Trend 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.

51. 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 effect
glossy effect disana sini

52. Typography Trend - Euphoria Web 2.0

53. 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)

54. Typography Trend -
Booming Product
Apple

55. 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.)

56. Typography Trend - Grunge & Psychadelic

57. 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)

58. Typography Trend - CSS3 Techniques
line25.com

59. Typography Trend - CSS3 Techniques
24ways.org

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

61. 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 readibility
Penyampaian 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

62. Tips -Tips dalam Typography:
Penerapan white space yang membuat tampilan
typography menjadi kontras dengan semua yang ada di
sekelilingnya

63. Tips -Tips dalam Typography:
Penerapan white space untuk menciptakan komposisi
bidang yang seimbang pada sebuah business card

64. Tips -Tips dalam Typography:
Mendesign
dengan grid
system

65. Tips -Tips dalam Typography:
Sebuah infography
dengan Swiss Style
Typography design
yang dibuat
menggunakan grid
system

66. European Typography Characters
Perpanduan 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.

67. European Typography Characters
Menggunakan 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

68. European Typography Characters

69. Asian Typography Design Characters
Sering 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)

70. Asian Typography Design Characters

71. Swiss Typography Design Characters
The power of mind direpresentasikan oleh Uniformity and
Geometry
Sering menggunakan sans serif font, terutama Helvetica
Clean 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

72. Swiss Typography Design Characters
De 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)

73. Swiss Typography Design Characters

74. Swiss Style Typography Characters

75. Swiss Style Typography Characters

76. American Typography Design Characters
Urban lifestyle, multicultural ~ cross-cultures
Menyukai gaya design retro atau industrial style
Seringkali 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
retro
Penggunaan font-font berbentuk pipih atau condensed font
(industrial font typical) seperti Impact, League Gothic
Sering memadukan illustrasi dan typography.
Menggunakan komposisi warna retro atau terkadang
industrial color scheme.

77. American Typography Design Characters

78. American Typography Design Characters

79. American Typography Design Characters

80. American Typography Design Characters
alpha-multimedia.com

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

82. 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/