7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Design Theory

Tipografi Dasar untuk Pengembang 

Scroll to top
Read Time: 6 mins
This post is part of a series called Design School for Developers.
Working With Brand and Design Guidelines
Improving Layout With Vertical Rhythm

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

Tipografi adalah elemen dasar dalam setiap desain yang Anda kerjakan. Alasan utama kita memiliki situs web di tempat pertama adalah untuk menampilkan informasi, dan untuk itu informasi yang akan dikonsumsi oleh pengguna yang menemukan itu. Meskipun mungkin ada banyak elemen lain ke situs web, pada intinya adalah konten. Konten yang perlu dapat dengan mudah membaca, dicerna, dipahami dan memiliki dasar yang solid tipografi akan hanya membantu dengan itu.

Dimulai dengan tipografi adalah mungkin salah satu bagian yang lebih mudah diakses dari belajar desain, hanya karena betapa mudahnya untuk mengubah dan bermain-main dengan teks untuk mendapatkan hasil yang langsung. Namun, menyempurnakan keterampilan tipografi Anda sehingga Anda dapat merancang sesuatu yang berfungsi dengan baik dan efektif, dapat dibaca dan bermanfaat bagi pengguna Anda, lebih merupakan tantangan.


Istilah Teknis

Pertama, kita akan mendapatkan beberapa hal teknis dasar. Ini hanya sedikit dari beberapa istilah paling umum yang akan Anda temui ketika bekerja dengan tipografi, dan ada panduan yang jauh lebih komprehensif di web atau di buku jika Anda ingin membaca lebih banyak.

Font vs. Typeface 

Istilah pertama ini adalah salah satu yang membuat kebanyakan orang naik. Typeface mendeskripsikan letterform yang dirancang. Sebuah font adalah kendaraan yang berisi jenis huruf. Anda men-download dan menginstal sebuah paket font untuk menggunakan huruf dalam desain Anda.

Serif vs Sans Serif

Anda dapat dengan aman memikirkan ada dua tipe utama klasifikasi - serif dan sans serif. Tipografi serif umumnya terlihat sedikit lebih klasik dalam gaya, seringkali dengan sedikit film atau hiasan (serif) di mana bentuk huruf berakhir.

Sans vs SerifSans vs SerifSans vs Serif

Contoh font serif termasuk Times New Roman, Baskerville dan Georgia. Tipografi Sans serif tidak memiliki hiasan serif, melainkan terlihat sedikit lebih modern. Contoh sans serif font termasuk Helvatica, Arial dan Futura.


Apa yang Membuat Karakter?

Mari kita memeriksa secara singkat anatomi letterform.

Ascender

Ascender adalah bagian dari sebuah huruf kecil yang memanjang di atas x-height huruf. Anda akan akrab dengan huruf-huruf yang memiliki ascenders b, d, f, h, k, l.

AscenderAscenderAscender

Descender

Descender adalah bagian dari sebuah huruf kecil yang meluas di bawah x-height huruf. Misalnya g, j, p, q, y.

DescenderDescenderDescender

Counter

Dalam huruf, counter adalah ruang negatif tertutup (atau sebagian tertutup) melengkung di dalam huruf. Huruf umum dengan counter termasuk b, d, e, o, s.

countercountercounter

Serif

Seperti yang telah disebutkan, serif adalah garis tambahan dan hiasan yang Anda dapat melihat ketika membedakan antara serif dan sans serif font gaya.

SerifSerifSerif

Baseline

Baseline adalah garis yang tak terlihat di mana semua karakter duduk. Dasar ini dapat bervariasi secara besar-besaran antara tipografi berbeda, tetapi biasanya selalu konsisten dalam huruf individu.

BaselineBaselineBaseline

Ketinggian Cap

Ketinggian cap adalah jarak dari dasar ke atas huruf.

Cap HeightCap HeightCap Height

x-height

X-height adalah puncak dari bagian utama dari huruf (atau setidaknya ketinggian x huruf kecil, karena itu nama). Ketinggian ini tidak termasuk ketinggian tambahan ascenders atau descenders.

x-heightx-heightx-height

Font Glyphs

Glyph adalah sebuah karakter individu dalam font. Ini mencakup simbol atau huruf, melalui untuk glyphs tambahan yang mungkin tersedia bagi Anda yang tidak sesuai dengan salah satu yang lebih umum dikenal atau digunakan simbol atau huruf.


Ketika Bekerja Dengan Typografi...

...Anda harus berpikir tentang:

Ukuran

Ketika bekerja dengan tipografi (dan hal ini mungkin terdengar jelas) Anda harus mempertimbangkan ukuran teks yang Anda akan kerjakan.

sizesizesize

Dengan setiap tren desain yang lewat di sana juga akan menjadi tren tentang seberapa kecil atau besar teks seharusnya. Pikirkan, misalnya, tentang audiens yang dituju; apakah audiens Anda adalah audiens yang lebih muda atau lebih tua, apakah mereka membutuhkan ukuran teks yang lebih besar?

Pikirkan juga tentang bagaimana ukuran teks akan mempengaruhi desain situs Anda. Apakah Anda ingin untuk berfokus pada tipografi, atau apakah Anda memiliki hiasan lainnya dan elemen desain yang ingin Anda sertakan yang dapat mempengaruhi cara tipografi duduk dalam desain?

Kontras

Kontras sangat mempengaruhi pembacaan blok teks. Ketika kita berbicara tentang kontras ada dua hal yang penting untuk diingat.

readability-and-contrastreadability-and-contrastreadability-and-contrast

Pertama, Anda ingin memastikan kontras antara teks dan background cukup kuat untuk terlihat. Berpikir tentang aksesibilitas di sini - akan kembali ke berbicara tentang aksesibilitas warna dalam desain, yang sama berlaku untuk teks Anda. Jika Anda tidak yakin apakah atau tidak teks Anda akan memiliki cukup kontras yang kemudian menggunakan alat seperti Lea Verou rasio kontras tool untuk membantu Anda.

Anda juga perlu berhati-hati pilihan font yang Anda buat. Banyak font yang memiliki bobot sangat tipis mungkin tidak ditampilkan dengan baik pada ukuran tertentu dan mungkin lebih berguna untuk font yang lebih besar atau menampilkan tajuk utama. Juga mencoba untuk memastikan bahwa font atau tipografi yang Anda pilih memiliki baik browser dan sistem operasi dukungan. Beberapa font dan tipografi dapat bekerja dengan baik pada satu platform tapi tampak dan melakukan sangat lain.

Ruang

Ketika bekerja dengan tipografi, seperti halnya bagian lain desain Anda, Anda ingin memastikan bahwa Anda memberikan cukup ruang untuk bernapas dan untuk konten yang berbicara untuk dirinya sendiri.

spacespacespace

Konten di situs web Anda adalah pengalaman inti yang pengguna perlu ditawarkan. Selain dari elemen desain lainnya, sesuatu yang sangat diperlukan pengguna adalah melihat konten. Karena itu, jangan takut memberi lebih banyak ruang untuk konten dan membiarkan konten Anda melakukan lebih dari bicara.

Ruang negatif adalah ruang atau kesenjangan yang tersisa di sekitar elemen rancangan; Jangan takut untuk meninggalkan ruang negatif ini di sekitar konten Anda.

Juga jangan lupa tentang ruang di sekitar setiap bagian dari teks Anda. Berikan tinggi baris yang tidak membuat teks Anda terasa sempit dan lebih sulit dibaca. Sebagai aturan umum (meskipun merasa bebas untuk bermain dengan ini), tinggi garis yang setidaknya 140% hingga 160% dari ukuran teks harus bekerja dengan baik dan menawarkan keseimbangan yang baik untuk teks Anda.

Hirarki 

Sebuah hirarki tipografi berkaitan dengan bagaimana konten diletakkan dalam desain Anda.

hierarchyhierarchyhierarchy

Menetapkan hierarki konten yang baik dimulai di awal, ketika Anda bekerja untuk membuat struktur yang baik dalam konten Anda. Hirarki tipografi kemudian berfungsi dengan konten Anda - dari judul hingga paragraf normal dan bagian apa pun dari konten yang ingin Anda tekankan - untuk membantu membentuk struktur yang mudah dinavigasi oleh pengguna.

Dampak hierarki terhadap desain Anda bisa sangat besar. Anda harus membuat perjalanan pengguna Anda untuk menemukan konten yang mereka cari semudah mungkin, dan membangun hierarki yang solid hanya akan menghasilkan efek positif.

Anda dapat membangun hierarki tipografi yang baik, visual, dalam berbagai cara, termasuk menggunakan warna atau berbagai ukuran teks untuk menciptakan penekanan dan struktur dalam konten Anda. Semua tips sebelumnya akan membantu Anda untuk membangun hirarki tipografi yang lebih baik, meskipun itu adalah sesuatu yang akan selalu datang dengan latihan.


Web Fonts

Kita akan membahas font web secara lebih rinci nanti dalam seri ini, tetapi berikut ini harus menjadi intro yang kuat ke dalam kemungkinan font web. 

Saat ini kita benar-benar beruntung karena memiliki banyak pilihan untuk menerapkan font web di situs web - dan dengan penggunaan font web yang lebih umum di web (yang didukung oleh dukungan browser yang lebih baik di seluruh penjuru), kita dapat lebih inventif dalam gaya tipografi dan desain yang dapat disertakan dalam desain .

Selain dapat menghosting font Anda sendiri menggunakan @font-face, ada banyak layanan online yang tersedia untuk membantu Anda menggunakan lebih banyak font web online, termasuk:

dan banyak, banyak lagi. Bahkan situs seperti FontShop atau MyFonts (yang dulunya terbatas hanya menjual font desktop) kini memasuki pasar font web, menawarkan font yang dapat Anda unduh yang dapat Anda gunakan dengan teknik @font-face.


Berikutnya...

Setelah membahas dasar-dasar tipografi, di artikel selanjutnya kita akan melihat ritme vertikal. Jangan lupa bahwa Anda juga dapat menyelami sesi berkelanjutan kami A-Z dari Tipografi Web untuk detail lebih lanjut tentang poin-poin ini.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.