Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Sebuah Analisis Typography pada Web

by
Read Time:15 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Masatti (you can also view the original English article)

Tipografi adalah salah satu aspek yang paling penting dalam desain web. Beberapa orang berpendapat bahwa desain web membutuhkan hingga 95% dari Tipografi, jadi mengapa kita sering mengabaikan pentingnya hal ini? Pembaca yang mengunjungi situs anda sering kali memutuskan apakah akan tetap tinggal atau tidak sesuai dengan pilihan Tipografi anda. Bagaimanapun, awalnya mereka datang untuk membaca. Pikirkanlah sejenak, jika konten adalah raja, logikanya Tipografi harus diperlakukan sebagai ratu.

Faktanya, bahkan beberapa nama font menunjukkan klasifikasi itu: Futura, Optima; Times New Roman (Ok, mungkin itu lelaki), Verdana, Lucida, Georgia, Helvetica... Tidak ada keraguan tentang hal ini. Tipografi adalah ratu.  Oleh karena itu, Tipografi harus didandani dengan benar sebelum dirilis, perlu adanya kerning dan tracking, mungkin varian font yang berbeda, dan Tipografi akan terlihat seperti wanita sungguhan.

Tidak Yakin dengan Apa yang Saya Katakan? Baik, Bacalah.


Ketahui (sans) Serifs Anda

Sebelum Memulai dengan artikel ini, dan khususnya jika anda tidak memiliki kontak yang banyak pada typografi, saya sarankan anda untuk membuat pembatas pada pengetahuan Typograpi anda dari Typedia, mengambil catatan khusus dari  Pengelompokan Typeface dan pada sebuah typeface anatomi yang mana melayani anda dengan baik ketika membuat font-stak anda sendiri dan memasangkan jenis huruf.

Setelah anda selesai membaca dua artikel di Typedia, kembalilah ke sini sehingga kita dapat memperkuat pengetahuan Tipografi yang baru anda temukan dan mempersiapkannya untuk beberapa bab berikutnya dari artikel ini.

TIPS #1: Hubungan Antar Typefaces

Typefaces memiliki hubungan yang dinamis dan bisa terlihat baik atau buruk ketika bersama, tergantung dengan siapa mereka dikombinasikan dan perbedaan diantaranya. Secara teknis, ada tiga cara untuk menghubungkan Typefaces:

  1. Harmoni

    Hubungan yang harmoni adalah hubungan yang tak menggairahkan, dimana dua Typefaces sangat mirip karateristiknya. Hal ini bisa juga adalah satu Typefaces yang memiliki beberapa gaya dan atau ukuran.

  2. Kontras

    Ketika Typeface cukup berbeda satu sama lain, hal ini disebut kontras. Biasanya ada tujuan baik dengan adanya kontras, misalnya, antara Typefaces serif dan sans-serif.

  3. Konflik

    Dua (atau lebih) Typeface yang memiliki karakteristik berbeda yang masih cukup mirip untuk menciptakan kesulitan pada halaman masuk dalam jenis konflik. Anda biasanya harus menghindari jenis hubungan ini.   

Contrasting, conflicting and concording relationship between fonts.Contrasting, conflicting and concording relationship between fonts.Contrasting, conflicting and concording relationship between fonts.

TIPS #2: Perbedaan Typefaces

Typefaces dapat bervariasi. Entah itu berat, tinggi, lebar atau apapun, setiap jenis Typefaces memiliki beberapa karteristik yang menonjol. Anda harus belajar untuk menemukan seluk beluk ini dan menyesuaikan dengan efek yang ditimbulkan. Dan jangan berfikir itu tidak penting, karena berbagai iterasi dari Typefaces yang sama dapat secara signifikan tidak seimbang.

Secara khusus ini berhubungan dengan Web, dimana seni membuat dan mengaplikasikan font stack sangat penting. Anda tidak harus memilih persis Typefaces yang sama, namun pilihlah font yang mirip misalkan font berdesain kuno seperti Garamond sebaiknya dipasangkan dengan font kuno lainnya yang karakteristiknya sama (misalnya, Caslon, Baskerville, Times).

Adobe Garamond Pro, Garamond Premier Pro and Georgia side-by-sideAdobe Garamond Pro, Garamond Premier Pro and Georgia side-by-sideAdobe Garamond Pro, Garamond Premier Pro and Georgia side-by-side

Adobe Garamond Pro, Garamond Premier Pro dan Georgia sering berdampingan. Meskipun ketiganya termasuk dalam serifs, Gergia, Garamond dan Adobe Garamond Pro sangat mirip (Contoh diatas berukuran 200 poin)

TIPS #3: Tidak Setiap Typeface Cocok untuk Setiap Situasi

Font modern seperti Bodoni atau Bodoni Bold adalah pilihan yang baik untuk heading, namun merupakan font yang buruk untuk diaplikasikan pada body copy yang panjang, hal ini dikarenakan dapat mengganggu dan mengalihkan perhatian pembaca dari konten. Font kuno seperti Garamond adalah pilihan yang lebih baik untuk kondisi seperti ini.

Non-desainer sering membuat keputusan yang buruk ketika memilih Typefaces, meskipun saya tak akan menjelaskan mengenai Comic-Sans anda harus menyadari bahwa tidak semua font cocok digunakan, misalkan, Georgia untuk body copy. Hal ini juga tidak selalu buruk untuk menggunakan Typeface jenis arial, tapi pertimbangkan pesan yang ingin anda kemukakan lewat Tipografi.


Belajar dari yang Terbaik

Artikel ini bukan satu-satunya, namun mengamati apa yang telah dilakukan desainer berbakat lainnya untuk klien mereka selalu menarik dan menyenangkan untuk dilihat. Kita akan melihat apa yang dapat dihasilkan dari pertimbangan dekorasi font secara cermat, juga pemilihan font stack.

(catatan. Jika anda ingin melihat contoh Tipografi yang lain secara online, telusurilah lewat arsip Typesites. Tidak banyak konten yang disediakan, tapi memuat beberapa situs yang sangat baik.)

Font Untuk Web: A List Apart

A List Apart, careful consideration to WebfontsA List Apart, careful consideration to WebfontsA List Apart, careful consideration to Webfonts
A list Apart menunjukan bagaimana font pada web dapat terlihat bagus ketika dipikirkan dengan seksama. 

Apakah Verdana adalah Typeface yang paling membosankan yang dapat anda gunakan? Tentu saja tidak jika anda bertanya pada Jason Santa Maria. Dia adalah orang cerdas yang menggunakan kekuatan font Verdana (height-X) untuk membuat body copy berukuran kecil sehingga terlihat anggun dan elegan, yang layak untuk A List Apart.

Georgia banyak digunakan untuk penekanan beberapa elemen pada halaman web dan sebagai tampilan Typeface. Dari pemilihan desain, huruf besar yang berukuran kecil dan jarak antar huruf yang baik akan menghasilkan tampilan yang lebih baik dan mudah dibaca.

Font Stack: Jon Tan

JonTangerine.com, typographic excellenceJonTangerine.com, typographic excellenceJonTangerine.com, typographic excellence
JonTangerine.Com, adalah contoh Tipografi unggulan.

Jon Tan, memperhatikan detail yang membuat Tipografi terlihat sempurna. Jon Tan, Seperti Khoi Vin dan Daniel Mall, juga mengikuti kaidah desain hitam putih yang minimalis dengan penambahan percikan warna oranye secara cermat. Meskipun warnanya kurang mencolok, anda dapat melihat jika Jon membuat Tipografi ini dengan sangat hati-hati. File CSS Jontangerine.com berisi lebih dari 250 penjelasan yang berbeda untuk segala jenis Tipografi mikro.

Body copy menggunakan Georgia, sedangkan Heading menggunkan font stack berbasis Times dengan Baskerville dan Palatino.

Selain itu, “warna” Tipografi didapatkan dengan menggunakan varian font yang berbeda, berbagai nuansa hitam dan padu padan font yang sangat baik. Benar-benar merupakan pusat situs Tipografi terbaik di luar sana.

@font face embedding: Information Highwayman

Information HighwaymanInformation HighwaymanInformation Highwayman
Information Highwayman adalah embedding Justus, sebuah font gratis.

Anda mungkin pernah mendengar  banyak tentang @font-face embedding dengan CSS selama beberapa bulan terakhir ini. Meskipun Internet Explorer telah memiliki teknik yang sama sejak iterasi keempatnya (kami merasa malu untuk mengakui ini), hanya pada tahun 2009 - ketika semua dari 5 browser besar menerapkan @font-face. Apakah kita mulai membicarakan secara mendalam tentang hal hal non inti mengenai penggunaan webfont online.  

Seperti yang anda ketahui, ada beberapa kelemahan yang cukup besar untuk teknik ini (terutama masalah hak cipta), namun jika anda menemukan font yang cocok dengan kebutuhan anda, anda bebas untuk meningkatkan kualitas pembaca dalam menejelajahi situs anda. D. Bnonn Tennant (Information Highwayman) menggunakan Justus untuk body copy, yang cukup kontras dengan elemen background sans-serif (“compelling magnum”) dan membantu untuk membuat efek “usang” pada situsnya.

Typekit: Elliout Jay Stocks

FF Tisa Web Pro on ElliotJayStocks.comFF Tisa Web Pro on ElliotJayStocks.comFF Tisa Web Pro on ElliotJayStocks.com
Slabby FF Tisa berjalan sempurna pada website milik Elliot.

Elliot suka menggunakan Slab-Serif Typefaces, yang contoh keduanya ada dalam 8 majalah Tipografi buatannya (sangat direkomendasikan), dengan FF Slab, dan website miliknya, dimana FF Tisa Web Pro di embedding menggunakan layanan Typekit’s font embedding.

Tidak ada banyak padu padan Tipografi dalam situs tersebut, misalnya milik Jon Tan. Namun, pekerjaanya sangat baik dalam hal keselarasan dan warna, yang juga tidak boleh dilupakan dan merupakan aspek penting untuk membuat Tipografi yang baik.         

Replacement Gambar dan sIFR: Squared Eye

Squared Eye, sIFR typographySquared Eye, sIFR typographySquared Eye, sIFR typography
Mata kuadrat menggunakan sIFR Flash teks pengganti.

Squared Eye menggunakan sIFR Flash text replacement. Meskipun hal ini cepat menjadi teknik replacement yang “tua”, Flash dan gambar digantikan oleh teks (baik Cufón maupun gambar yang dimasukkan secara manual), bukannya menggunakan teks biasa yang cocok untuk cross-browser disitus yang pengunjungnya tidak banyak  menggunakan browser modern, seperti pada kasus ketika font tidak tersedia yang dikarenakan satu atau alasan lainnya (misalnya, karena hak cipta).

Square Eye memberikan penekanan berbagai tingkat dari headings dengan sIFR, serta dengan gambar yang dimasukkan secara manual. Dia menggunakan slab-serif Archer yang indah selaras dengan font stack berbasis Lucida untuk tampilan yang modern namun tetap elegan.


Menggunakan Pengetahuan Kita untuk Hal yang Baik

Meskipun saya akan menyediakan beberapa font-stacks yang dapat anda gunakan dalam desain anda, pertimbangkan hal berikut sebagai “latihan” untuk membuat font stacks anda sendiri. Sudah ada banyak situs lain di luar sana yang menyediakan solusi ini baik untuk display dan teks body copy.

Seperti kata pepatah, “berikan lelaki seekor ikan dan kau memberinya makan dalam sehari. Ajarilah lelaki untuk memancing dan kau memberinya makan untuk sepanjang hidupnya”.

Mempelajari Hal-hal Dasar: Pembaca Web Anda

Sebelum mulai membangun font stack, anda harus mengenal audiens utama anda dan menentukan software dan operating system apa yang mereka gunakan. Dengan begitu anda dapat memprediksi font yang mana yang munkin mereka instal dan berapa banyak fleksibilitas Tipografi yang dapat anda sediakan.

Contohnya: Matthew Smith (Squared Eye) mungkin (berhak) memprediksi bahwa sebagian besar dari audiens tidak memiliki font seperti Archer yang terinstal dalam komputer mereka dan memutuskan untuk melakukan embedding menggunakan Flash font replacement (dibandingkan Archer, ~97% dari pengguna telah menginstal Flash).

Selalu mendesain dengan Webfonts terlebih dahulu, dan kemudian secara bertahap tingkatkan dengan font stack.

Untuk informasi lebih lanjut tentang font yang dikirimkan menggunakan software yang berbeda, telusurilah “24 Ways’ Font Matrix, Fluid Web Type dan Apaddedcell. Anda mungkin juka menemukan dokumentasi ekstensif Microsoft mengenai font yang tersedia dalam produknya, serta wawasan mengenai departemen Tipografi mereka, itu adalah sebuah bacaan yang berguna. 

Perhatikan Hal-Hal Kecil

Ketika berhubungan dengan font stack, anda mungkin membutuhkan pertimbangan tertentu, ketika menentukan apa yang membuat font berbeda satu sama lain (ingat perbandingan mengenai Georgia-Garamond-Garamond yang telah dijelaskan sebelumnya). Hal ini sekali lagi, erat kaitannya dengan pengalaman dan pengetahuan anda mengenai berbagai jenis kategori font. Anda harus mempelajari untuk tidak hanya memperhatikan bagaimana serifs ditampilkan (apakah ini miring atau lurus? Atau apakah ini tidak ada?), tapi juga perhatikanlah perbedaan antara dua Typeface yang mirip.      

Mempertimbangkan bagaimana mereka berkomunikasi dengan satu sama lain, mereka x-heights dan keterbacaan pada ukuran kecil, serta bentuk dan arah. Bahkan jika ini terdengar, mungkin, menakutkan sekarang, ingat bagaimana praktek membuat sempurna.

Contoh: Tampilan Ibis dan Archer, meskipun keduanya dikategorikan slab-serifs, mungkin keduanya tidak cocok disandingkan dikarenakan adanya perbedaan yang signifikan dalam hal tampilan keduanya dan adanya transisi tebal/tipis yang kentara pada Ibis versus monoweight (tidak adanya stroke transisi tebal tipis)  pada Archer.

Membuat Sampel Font Stack

Sudah saya sebutkan sebelumnya saya suka Garamond. Jadi saya akan membuat font stack dasar menggunakan Times New Roman, dimana itu merupakan Web-Safe Font yang paling mendekati tampilan jenis tulisan Typeface gaya kuno. 

Garamond, karena memiliki X-height yang rendah, kemungkinan bukan pilihan terbaik ketika didesain untuk pembacaan tulisan pada layar (bagaimanapun juga, Garamond tidak dibuat untuk tampilan layar utama), namun tak mengapa jika digunakan untuk font dengan ukuran yang cukup besar (menurut saya, optimalnya sebesar 16-17 pixel / 1em Garamond).

Dalam skala optik, ukuran teks yang lebih kecil umumnya memiliki x-heights yang lebih besar, stem width yang lebih lebar, dan lebih sedikit Tipografi kontras dan tampilan ukuran yang lebih lebar memiliki x-height yang lebih kecil dengan lebih banyak variasi dalam stem width.
- MSDN Blogs.

Font degrading in our font-stackFont degrading in our font-stackFont degrading in our font-stack
Bagaimana keluarga font kami akan menurunkan dalam kasus Garamond tidak tersedia (Garamond berwarna biru dalam contoh).

Menurut 24 Ways’ Font Matrix, Garamond tersedia dalam Office Word 2007 untuk Windows, dan Word 2004 untuk Mac, yang berarti ini dimiliki oleh banyak pengunjung situs. Untuk mereka yang belum menginstalnya, Saya telah menyediakan cadangan dalam bentuk Adobe’s Caslon, Garamond dan Minion Pro Typeface dimana mereka tersedia dalam Creative Suite (perhatikan, bagaimanapun, semua font ini juga tersedia untuk didownload secara individu; Saya menyebutkan program yang menyediakannya karena saya kira banyak dari anda yang membelinya bersama software Adobe)

Saya juga memutuskan untuk menggunakan Crimson teks dari repositori Webfont milik Google untuk menyediakan fallback yang layak sebelum Times. Hasil akhir font stack terlihat seperti ini:

Font stack ini sebaiknya digunakan hanya pada ukuran font yang tinggi, hal ini dikarenakan Windows terkenal memiliki rendering font yang buruk.

Font rendering in Safari vs. ChromeFont rendering in Safari vs. ChromeFont rendering in Safari vs. Chrome

Chrome dengan pengaturan default (kiri) dan safari dengan font smoothing diatur ke medium (kanan). Mungkin awalnya terlihat halus, namun itu berdampak besar pada keterbacaannya ketika ukurannya diperkecil.

Jika anda mencari yang terbaca dengan baik di layar, Geogina dan Verdana yang memiliki X-Height yang tinggi (kedua font tersebut berasal dari tahun sembilan puluhan, yang dibuat secara special untuk rendering layar) akan memberikan font stack yang lebih baik.

Misalnya, kita bisa memanfaatkan kelebihan dari kesamaan antara Lucida serifs (Fax dan Bright, dimana juga disediakan oleh MS Word) dan Droid serif dari repositori Webfont Google untuk membuat font stack dengan tingkat keterbacaan yang tinggi dan x-height yang lebar.

Sekali lagi webfont Google menyediakan solusi, dimana hampir semua Droid serif tampilannya masing-masing lebih mirip dengan Lucida daripada Georgia dan Times.

Stack berbasis Verdana yang sangat mirip juga memiliki 3 sans-serif Lucida yang hampir sama (Grande – bersama Mac, Sans, Sans Unicode).

Perhatikan bagaimana penggantian font yang memiliki karakteristik yang mirip, terutama bagaimana huruf g hampir sama dengan Typefaces lintasan, dan bagaimana o menyerupai lingkaran daripada elips. Seperti kebanyakan sans-serifs, mereka semua monoweight dan tidak memiliki transisi tebal/tipis (Optima contohnya, bukanlah monoweight – ini yang membuatnya lebih sulit untuk dipasangkan dengan font lain).

Lucida-based Sans-serif font stackLucida-based Sans-serif font stackLucida-based Sans-serif font stack

Menjadi Pemilih

Ketika menciptakan font stack hal yang penting untuk memberikan Tipografi yang bagus, anda harus melakukan “10 persen ekstra” dan menyediakan kontras Tipografi menggunakan berbagai macam varian font, berat, arah dan pengaturan untuk semua jenis metode Tipografi mikro.

Jon Tan, attention to micro typographyJon Tan, attention to micro typographyJon Tan, attention to micro typography

Jon Tan menangani mikro Tipografi dengan hati-hati.

Jon Tan, misalnya, menggunakan beberapa penyeleksian CSS3 untuk membuat visual efek yang hebat.

Dia menggunakan heading ditengah dan dicetak miring dalam postingan blognya menggunakan font stack berbasis Times. Ini, ketika dikombinasikan dengan teks yang tepat dan desain minimalisnya, akan menghasilkan pengalaman membaca yang sangat menyenangkan. Ingatlah: memperhatikan hal kecil memang penting.

Absolutely astonishing headings on jontangerine.comAbsolutely astonishing headings on jontangerine.comAbsolutely astonishing headings on jontangerine.com

Mencampuradukkan huruf tebal, huruf besar dan jarak spasi positif untuk heading yang kecil akan menghasilkan tampilan dan kontras yang jauh lebih baik, serta pemisahan yang jelas dengan body copy, daripada hanya sebuah Typefaces yang berbeda. Samantha Warren telah menerapkan hierkaki Tipografi dengan sangat baik, dan saya menyarankan anda untuk membaca artikelnya untuk pemahaman topik yang lebih luas.

Lucida and Garamond, contrasting and conflictingLucida and Garamond, contrasting and conflictingLucida and Garamond, contrasting and conflicting
Lucida dan Garamond, kontras dan saling bertentangan. Kontras meningkatkan pemisahan. Dapatkah anda mengenali heading kedua?

a Garamond 17 pixel untuk body copy dan 15px Lucida Sans untuk subheading level 4 (h4) akan terlihat cukup berbeda dalam dua situasi diatas, hanya karena beberapa perubahan kecil pada CSS kita:

Ampersan yang dicetak mirik adalah salah stu teknik yang membuktikan bahwa “hal-hal kecil penting” (perhatikan, bagaimanapun, tidak semua font memiliki ampersan yang “spesial”).

Jika anda ingin mengautomisasi penggunaan ampersan yang mewah (melampirkannya untuk kelas yang tepat, seta memiliki beberapa bantuan Tipografi kelas canggih), Saya menyarankan untuk mencari plugin WP-Tipografi untuk Wordpress.


Peningkatan Kualitas dengan Penambahan JavaScript

Kita dapat meningkatkan lebih jauh pengalaman pengguna web kita dengan meningkatkan kualitas situs dengan beberapa JavaScript sederhana untuk menguji apakan dia memiliki font tertentu yang terpasang dalam sistemnya. Kemudian, penting untuk memilih font fallback yang cocok, jika font tidak tersedia (misalnya, peningkatan ukuran font membuat ukuran font lain menjadi tak terbaca, gunakan penggantian penggunaan gambar, beban font tambahan, dll).

Perhatikan bahwa anda harus tetap mempertimbangkan fakta bahwa sebagian kecil dari pengguna menjelajah web menggunakan JavaScript yang dimatikan.

Anda mungkin juga dapat menambahkan kelas noscript pada body jika JavaScript dinonaktifkan dan mempersiapkan beberapa Tipografi yang masuk sesuai untuk itu.

Ada yang mengatakan, ada beberapa teknik yang pada dasarnya sama untuk mengetahui jika beberapa font terpasang atau tidak dalam sistem pengguna. Saya akan menggunakan sedikit variasi dari kode Lucas Smith.

Setelah menempelkan kode ke file JavaScript anda, anda dapat menguji apakah font tertentu terpasang pada komputer pengguna dengan pernyataan bersyarat:

Salah satu hal yang menarik dari penggunaan teknik ini adlah hal ini memungkinkan untuk bisa menghubungkan ke file font-loading (@font-face, Google Webfonts...), jika font yang dipilih tidak tersedia dalam sistem pengguna. Kita dapat meningkatkan performansi, dan jangan memaksakan pengguna untuk mengunduh file ekstra ~30kb tanpa alasan:

Sumber dan Bacaan Lebih Lanjut

  • Memuat font lokal dan menampilkannya dalam teks pilihan anda. Bisa sedikit intensif di komputer.
  • CSS Font Stack yang lebih baik, dari Unit Interactive. Tua tapi bagus yang menyediakan sampel font-stack yang cocok baik untuk headline maupun body copy.
  • Spesimen web font adalah alat yang baik untuk menguji font lokal yang berbeda. Anda juga harus membaca artikel pendukung A List Apart
  • 50 alat Tipografi dan sumber dari smashing magazine
  • Buku The non-designer’s design book, yang memuat Tipografi dasar dan prinsip desain untuk visual pemula, sebuah bacaan yang simpel dan singkat. Anda akan menemukan semua font yang berguna dijelaskan didalam buku secara jelas, jadi anda dapat mengetahui bagaimana membedakannya dari jenis dan kategori dengan cepat.
  • Sudah tahu dasar-dasarnya? Coba buku Elements of Typographic Style, sebuah bacaan penting dan bagus untuk semua desainer, direkomendasikan oleh beberapa desainer terbaik

♣ ♠ ♣ ♠ ♣ ♣ ♠ ♣

Saya berharap sekarang anda lebih memahami Tipografi pada web. Jika ada masalah lain, saya dengan senang hati ingin mengetahuinya cukup anda beritahukan mengenai hal itu melalui kolom komentar.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.