Advertisement
  1. Web Design
  2. Typography

10 contoh inspirasional tipografi di Web

Scroll to top
Read Time: 9 min

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

Anda tahu apa yang saya sukai? Internet. Secara khusus, saya suka perasaan itu ketika Anda tersandung pada salah satu sudut kecil yang indah keindahan dengan beberapa tipografi yang sangat baik. Hari ini, kami akan menempatkan kaca pembesar untuk 10 contoh besar dari tipografi web di seri bulanan baru yang berusaha untuk membawa Anda segar tipografi inspirasi!


Inspirasi Web tipografi, A Webdesigntuts + bulanan Series: Sepanjang perjalanan pada world wide web, saya telah mengambil catatan contoh situs yang menginspirasi saya sebagai seorang desainer. Dengan menggunakan jenis dengan cara yang inovatif, berseni, atau hanya indah, situs ini telah membantu saya untuk mendorong kemampuan tipografi saya sendiri... dan saya berharap bahwa mereka akan membuktikan menjadi inspirasi untuk Anda juga. Dalam seri ini, kita tidak hanya daftar situs-situs ini... kita benar-benar akan meneliti bagaimana dan mengapa mereka bekerja.

Tanpa basa-basi, dengan ini saya hadir bulan ini koleksi terkurasi 10 contoh inspirasional tipografi. Jika saya tidak memukul favorit Anda sendiri bulan ini, pastikan untuk berbagi turun di bawah ini di bagian komentar!


Bilik desain

web typography inspirationalweb typography inspirationalweb typography inspirational

Brian Hoff desain blog menggunakan campuran Sentinel dan Tungsten untuk header dan judul kecil, dan FF Dagny Web Pro untuk tubuh dan posting judul. Kombinasi ini dua gaya yang sangat berbeda dari jenis bekerja dari satu sama lain dengan sangat baik.

Header terlihat bangga dan profesional, dengan sangat baik dua wajah dari Hoefler & Frere-Jones melengkapi satu sama lain dengan indah. Kental, vertikal bentuk Tungsten kontras dengan Sentinel miring halus rinci untuk menghasilkan judul yang mudah dibaca dan menyenangkan ke mata.

Untuk tubuh, ada tidak benar-benar banyak terjadi, dan saya berpikir bahwa adalah bagaimana desainer menginginkannya. Dagny merupakan indah, sungguh-sungguh jenis huruf yang bekerja dalam teks tubuh kecil dan besar, tebal judul. Tidak banyak lagi untuk mengatakan di sini, Selain itu adalah pilihan yang indah font, dan salah satu yang siapa pun yang melihatnya pasti akan menghargai.


Carsonified

web typography inspirationalweb typography inspirationalweb typography inspirational

Ah ya. Tidak ada posting yang tepat tipografi akan lengkap tanpa menyebutkan Mike Kus' 2009 mendesain ulang dari carsonified.com. Situs menggunakan sangat berukuran Cooper hitam, tipografi kekuasaan yang sesungguhnya jelas bila diatur pada seperti ukuran besar. Anda melihat semua rincian dari font, dan benar-benar mendapatkan merasakan apa jenis perusahaan Carsonified yang.

Sisa jenis pada halaman mendapatkan keluar dari jalan, dengan hampir tak terlihat Helvatica dalam navigasi, dan Georgia untuk body copy dan sebagian besar judul. Saya tidak yakin apa font yang digunakan untuk judul di sebelah kanan situs mereka, tapi aku dapat melihat bahwa kualitas digambar tangan indah kontras dengan hampir mesin tik-esque merasa Cooper, seolah-olah mereka adalah dua sisi mata uang yang sama.

Benar-benar, meskipun, apa yang saya pikir ikatan bersama desain situs ini adalah warna. Setiap halaman memiliki warna latar belakang yang unik yang bekerja sempurna dengan tan teks. Warna benar-benar berbeda di seluruh halaman, tetapi mereka semua berbagi perasaan nostalgia, bersemangat, satu yang bekerja dengan hijau, biru, dan bahkan terang oranye. Keindahan warna teks adalah bahwa ia memiliki cukup kontras terhadap latar belakang gelap, serta latar belakang sangat cerah.


Galpin industri

web typography inspirationalweb typography inspirationalweb typography inspirational

Tyler Galpin situs adalah campuran yang indah industri, rinci dan emosional. Ia menggunakan berbagai macam font untuk hanya tagline — sesuatu yang biasanya akan terlihat bodoh, tapi di sini, Tyler memilih hanya yang tepat untuk membuatnya bekerja. Meskipun mereka tampak begitu berbeda dengan mata telanjang, Semua tipografi menampilkan pesan tunggal.

Tidak memukul titik, tapi aku akan mengatakan fitur mendefinisikan dari situs ini adalah semata-mata jumlah font yang digunakan di seluruh itu. Satu saat Anda sedang melihat bagus lempengan-serif, maka Anda gulir ke bawah sedikit, dan apa ini? Script? Sini? Anda dapat memberitahu hanya dari melihat berapa banyak waktu dan upaya dimasukkan ke dalam untuk memilih jenis yang Anda dapat melirik hanya dalam beberapa detik.

Elemen penting lainnya dari situs ini adalah bagaimana setiap halaman kustom dirancang, jika Anda mau, tanpa menggunakan default CMS template. Setiap halaman adalah juga mengeset dengan font bahkan lebih, menciptakan sebuah konsistensi melalui kurangnya total konsistensi seluruh situs.

Mari kita bicara warna. Galp.in memiliki salah satu palet warna yang paling terkendali yang pernah kulihat di web akhir-akhir ini. Sederhana hitam pada putih, dengan percikan kuning dan merah dilemparkan untuk penekanan, dan menekankan Apakah. Itu benar-benar menakjubkan apa yang dapat lakukan satu warna untuk membuat kontras visual yang mencolok di tangan yang tepat. Tipografi yang indah, website yang cantik.


Dawghouse desain Studio

web typography inspirationalweb typography inspirationalweb typography inspirational

Situs Jan Cavan ini sangat unik. Dia sangat bergantung pada tekstur, dan tidak begitu banyak jenis. Jadi mengapa ia termasuk dalam roundup ini? Jenis dia memiliki di situs fasilitas dipilih. Sebagai contoh, judul utama setiap halaman terletak di sebuah gaya hidup, retro script, pilihan yang berani untuk desain yang berani. Ini "retro script" font rumit untuk digunakan di web meskipun... dan desain ini dengan hati-hati menghindari habis-habisan klise ' dengan aplikasi terkendali.

Aku benar-benar tidak bisa menempatkan jari saya pada Mengapa aku menikmati desain ini begitu banyak, tapi saya pikir ini memiliki sesuatu untuk dilakukan dengan warna, atau mungkin tekstur? Tunggu, saya pikir saya mendapatkannya. Semua elemen desain berbaur sempurna bersama-sama, dan tidak salah daerah mendapatkan perhatian lebih daripada yang lain.

Ada juga banyak halus hal yang terjadi di sini. Judul posting blog berada di semua-caps, keputusan yang bekerja baik dengan serif berkelas yang dia memilih untuk menetapkan mereka dalam. Semua hal-hal kecil di Jan desain berkontribusi pada getaran retro yang halaman meletakkan keluar.


Hari delapan jam

web typography inspirationalweb typography inspirationalweb typography inspirational

Studio Nathan Strandberg & Katie Kirk. Nama permainan di sini adalah kehalusan, dan website ini indah tidak mengecewakan. Dari jenis yang indah untuk warna yang hidup, itu adalah benar-benar sebuah pengalaman untuk mengunjungi eighthourday.com. Semua tipografi dipilih dengan selera tinggi, dengan header di bagus sans-serif dan script subpos. Semua teks yang seimbang; tidak ada yang berteriak-teriak untuk perhatian Anda. Ini adalah website yang sangat ramah.

Seperti yang saya sebutkan, warna memainkan bagian besar dalam tipografi, serta desain secara keseluruhan. Merah-oranye yang bagus digunakan di seluruh, disertai dengan warna-warna lembut lainnya. Dalam situs ini, tampaknya bahwa jenis dan warna yang intrinsik ditenun bersama-sama. Jenis yang tidak akan bekerja tanpa warna, dan sebaliknya.

Tidak ada sesuatu yang khusus tentang tipografi sendiri. Tentu saja, mereka akan masih terlihat bagus, tapi tidak hampir sempurna seperti mereka lakukan sekarang. Yang membuat situs ini terutama menyenangkan untuk memeriksa untuk menemukan bagaimana jenis dan warna saling mempengaruhi dengan satu sama lain.


Malam untuk adopsi

web typography inspirationalweb typography inspirationalweb typography inspirational

Situs web yang besar untuk menyebabkan besar oleh Matius Smith. Apa yang saya sukai tentang situs ini adalah perhatian terhadap detail. Lihatlah miring yang halus dalam judul. Cantik. Aku mengagumi penggunaan Georgia untuk judul. Hal ini biasanya digunakan untuk teks tubuh, tapi benar-benar memasukkannya ke dalam ukuran yang dilakukannya untuk header menunjukkan rincian cantik huruf kuno.

Perhatikan jalan cahaya bersinar di atas teks di header. Ini adalah hal-hal kecil yang membuat desain yang besar.

Georgia juga digunakan untuk tombol yang indah, dengan kombinasi dari semua-caps dan kecil miring. Desain ini benar-benar menunjukkan dari fleksibilitas dari satu huruf, dan I 'm loving it.

Saya juga ingin menyebutkan bahwa hampir semua teks pada halaman teks asli, tertanam melalui @font-face, jadi topi ke Mike Meyer untuk itu.


Kicauan

web typography inspirationalweb typography inspirationalweb typography inspirational

Lain desain Mike Kus, ini satu yang menampilkan beberapa tipografi yang sangat unik. Karena sebagian besar berbasis gambar, saya tidak bisa mengatakan apa font yang digunakan dalam desain ini, tapi saya dapat mengatakan bahwa itu sangat baik merupakan gambar yang memancarkan Twitter sebagai perusahaan; ini menyenangkan, ringan, dan sedikit konyol.

Color-Wise, Anda memiliki kericau akrab biru digunakan di seluruh situs untuk sebagian besar dari teks, dan bekerja dengan indah. Ada juga merah sangat bagus digunakan untuk hiasan dan perhatian-tangan yang berdampingan dengan sangat damai di seluruh halaman situs.

Apa yang menakjubkan bagi saya di sini adalah bahwa, bahkan jika itu tidak menyebutkan perusahaan di setiap belokan, Anda masih bisa melihat bahwa ini adalah situs Twitter. Ini proyek-proyek mereka merek yang unik pada setiap tingkat, dengan jenis, warna, ilustrasi, dan bahkan tekstur. Apa lovely situs kecil.


Digital Labs

web typography inspirationalweb typography inspirationalweb typography inspirational

Lempengan-serif, sans-serif, serif, ini situs menggunakan segala macam jenis dan menggunakan mereka dengan baik. Ini adalah pilihan yang baik untuk meninggalkan lempengan-serif untuk judul terbesar, yang meninggalkan angkat berat, jika Anda mau, untuk miring Times New Roman-jenis huruf yang biasanya tidak digunakan dalam desain web, tapi satu yang bekerja dengan baik jika digunakan dengan benar.

Kecil body copy yang tersisa untuk Arial, pilihan berani lain yang bekerja dengan baik dalam ukuran kecil. Anda hampir tidak melihat bahwa bahkan ada di sana, dan aku yakin bahwa bagaimana desainer menginginkannya.

Sekali lagi, saya tidak yakin apa yang digunakan untuk judul besar, walaupun aku mungkin akan menaruh uang saya pada Rockwell, memilih benar-benar solid.

Color-Wise, desain ini mempekerjakan cahaya yang jarang digunakan pada skema gelap yang tidak bekerja dengan lama tubuh teks, tetapi untuk situs gambar-berat seperti ini, saya pikir bekerja sangat, sangat baik. Seperti biasa, warna lain digunakan untuk penekanan, dan dalam situasi ini, bahwa warna adalah bagus, kaya oranye. Ini adalah pilihan yang sangat berkelas, dan saya sangat menghargai keputusan.


Seni dalam kopi

web typography inspirationalweb typography inspirationalweb typography inspirational

Untuk koleksi keangkeran berbusa, oleh duo dinamis Jina Bolton dan Meagan Fisher, kata yang terlintas dalam pikiran berkelas. Semua type sangat mudah dibaca, dan set dalam warna yang baik melengkapi gambar lezat situs fitur. Ketika saya melihat situs ini, saya dikejutkan oleh kualitas detail dalam desain ini, dari jenis yang baik ditetapkan, untuk warna terinspirasi kopi.

Aku cukup yakin bahwa logo dan sub judul berada di Archer, sederhana, mudah dibaca, lempengan-serif dari Hoefler & Frere-Jones. Sekali lagi, ini, ditambah dengan Georgia, membuat pengalaman yang berkelas dan dapat dibaca.

Hal lain yang benar-benar menyukainya dalam situs ini adalah warna. Karena itu jelas situs bertema kopi, warna-warna tidak hanya cocok, tapi juga cantik. Memang, efek mungkin ditingkatkan mengingat jumlah gambar berwarna kopi di situs.

Secara keseluruhan, sebuah website yang benar-benar hebat dari orang-orang yang benar-benar hebat.


Besi untuk besi

web typography inspirationalweb typography inspirationalweb typography inspirational

Tampan desain dan pengembangan, membaca besi-besi, dan tampan itu. Seluruh desain merasa bangga dan entah bagaimana regal, seolah-olah itu halus dibuat oleh desainer rumah pengadilan.

Type-Wise, desain ini adalah indah sederhana. Kental menggelapkan teks itu jenius. Anda tidak bisa benar-benar membacanya, tapi itu tidak benar-benar menempatkan tekanan pada Anda untuk mencoba. Ini adalah orang-orang macam rincian dan berkembang yang membuat situs ini indah. Dalam kasus, ada tujuan tidak praktis untuk bentuk venn-diagram-seperti di latar belakang header, tapi itu tampak hebat, dan menambah dimensi lain desain ini.

Paragraf tubuh terletak di Georgia yang sungguh-sungguh, dan saya pikir itu melayani mereka baik, terutama ketika Anda mempertimbangkan bahwa berbagai sans bahwa mereka berada di bawah (untuk judul).

Transparansi dalam warna yang digunakan untuk efek yang besar, dengan sebagian besar warna hanya berbagai tingkat Tan sama dan biru-hijau.

Apa cara yang benar-benar indah untuk mengakhiri koleksi ini sedikit dari website yang indah.


Kesimpulan

Yah, memang waktu itu posting lagi. Kami telah memiliki beberapa tertawa, menangis beberapa, tetapi bersama-sama kita telah sampai pada kesimpulan, dan di sini saya harus meninggalkan Anda. Seperti yang saya sebutkan di atas, jika aku did't memukul favorit Anda sendiri bulan ini, pastikan untuk berbagi turun di bawah ini di bagian komentar! Aku akan pastikan untuk check it out untuk posting bulan depan!

Baca lebih lanjut tentang Web tipografi pada postingan saya memilih Font yang tepat: panduan praktis untuk tipografi di Web!

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.