{"id":1480,"date":"2025-07-03T01:39:26","date_gmt":"2025-07-03T01:39:26","guid":{"rendered":"https:\/\/www.apridesain.id\/blog\/?p=1480"},"modified":"2025-07-03T01:43:07","modified_gmt":"2025-07-03T01:43:07","slug":"beda-typeface-dan-font","status":"publish","type":"post","link":"https:\/\/www.apridesain.id\/blog\/beda-typeface-dan-font\/","title":{"rendered":"Perbedaan Typeface dan Font, Desainer Wajib Tahu!"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Bagi teman-teman yang belajar desain pasti cukup sering mendengar istilah <em>typeface<\/em> dan <em>font<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pertanyaanya, apakah Anda tahu perbedaan antara typeface dan font?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Jika belum tahu silahkan baca tulisan ini sampai akhir, karena akan ada informasi menarik dan bermanfaat untuk teman-teman.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kebanyakan dari kita para desainer, khususnya yang baru belajar hanya tahu tentang font saja.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Padahal jika perhatikan lebih jauh, ternyata ada yang lebih dari sekedar font lho! Ada juga typeface, lalu ada juga tipografi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lalu, sebenarnya apa sih perbedaan antara typeface dan font? Yuk ketahui jawabannya di tulisan ini.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Baca juga: <a href=\"https:\/\/www.apridesain.id\/blog\/font-tipografi\/\" class=\"rank-math-link\">Deretan Koleksi Font Tipografi, Unduh Gratis!<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu Tipografi?<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"352\" src=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2024\/01\/pengertian-tipografi.png\" alt=\"pengertian tipografi\" class=\"wp-image-2484\" srcset=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2024\/01\/pengertian-tipografi.png 500w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2024\/01\/pengertian-tipografi-300x211.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Pengertian tipografi adalah adalah seni menyusun huruf dan teks sedemikian rupa sehingga salinannya dapat dibaca, jelas, dan menarik secara visual bagi pembaca.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tipografi melibatkan gaya font, tampilan, dan struktur, yang bertujuan untuk membangkitkan emosi tertentu dan menyampaikan pesan tertentu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Singkatnya, tipografi ialah yang membuat teks tampak hidup dan menarik.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tipografi dapat diterka berasal dari abad ke-11.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sebelum era digital, tipografi merupakan kerajinan khusus yang terkait dengan buku dan majalah, dan akhirnya menjadi pekerjaan umum.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu Typeface?<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"352\" src=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2024\/01\/pengertian-typeface.png\" alt=\"pengertian typeface\" class=\"wp-image-2485\" srcset=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2024\/01\/pengertian-typeface.png 500w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2024\/01\/pengertian-typeface-300x211.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Pengertian typeface adalah suatau rancangan karakter dari huruf-huruf dengan keunikan, karakteristik, tampilan, hingga perbedaan bentuk dalam perancangan kelompok huruf agar dapat dibedakan dengan jenis huruf lainnya.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typeface mulai digunakan di awal-awal percetakan untuk menjelaskan karakter yang mempunyai fitur desain yang serupa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contohnya, Helvetica adalah jenis typeface berkarakter yang memiliki karakteristik desain yang sama.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sama halnya dengan Times New Roman merupakan jenis typeface berkarakter yang mempunyai karakter yang mirip atau serupa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Jenis-jenis Typeface<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Berikut ini merupakan klasifikasi untuk masing-masing jenis typeface:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Serif, seperti Times New Roman, Garamond, Rockwell, dan Didot.<\/li>\n\n\n\n<li>Sans Serif, seperti Arial, Helvetica, Geneva, Verdana, Tahoma.<\/li>\n\n\n\n<li>Display atau Decorative, seperti Moon, Cherie Bomb, Faun Font Duo.<\/li>\n\n\n\n<li>Script dan Cursive, seperti Dancing Script, Sofia, Allura, Euphoria Script.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Baca juga: <a class=\"rank-math-link\" href=\"https:\/\/www.apridesain.id\/blog\/font\/\">Daftar Font Keren untuk Logo<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Lalu, Apa itu Font?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pengertian font adalah kumpulan dari format lengkap dari jenis huruf, simbol, angka, bentuk dan karakter model dengan ukuran dan karakteristik khusus pada sebuah perangkat lunak atau program.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Font itu tentang berat (<em>weight<\/em>), gaya (<em>style<\/em>), ukuran (<em>size<\/em>), dan efek (<em>effect<\/em>) dari typeface tertentu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Umumnya setiap typeface menyertakan sejumlah font di dalamnya.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contohnya, typeface Helvetica memiliki 51 font dengan gaya, ukuran, dan berat yang beraneka macam.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Format Font<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Secara umum format atau ekstensi font yang sering kita jumpai antara lain ialah OTF dan TTF.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>TTF<\/strong> alias <strong>True Type Font<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dibuat oleh Microsoft dan Apple pada tahun 1980-an dan sekarang telah menjadi file font paling terkenal.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">TTF mencakup semua yang diperlukan untuk dilihat pada layar monitor dan dicetak, hebatnya langsung dengan menggunakan file yang sama.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>OTF<\/strong> alias <strong>Open Type Font.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hasil dari pengembangan TTF pada akhir 1990-an oleh perusahaan yang sama yaitu, Apple dan Microsoft.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ia mampu menyimpan hingga 65.000 karakter termasuk karakter khusus, huruf, angka dan Glif (Glyph) dengan fitur tipografi yang diperluas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">OTF berguna saat bekerja dalam waktu yang sama dengan banyak bahasa. Karena alasan tersebut, terkadang harganya sedikit lebih mahal dibanding ekstensi TTF.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Baca juga: <a href=\"https:\/\/www.apridesain.id\/blog\/rekomendasi-font-untuk-cv\/\">Rekomendasi Font untuk CV<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Perbedaan Typeface dan Font<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"270\" src=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2021\/04\/typeface-dan-font.png\" alt=\"typeface dan font\" class=\"wp-image-1486\" srcset=\"https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2021\/04\/typeface-dan-font.png 500w, https:\/\/www.apridesain.id\/blog\/wp-content\/uploads\/2021\/04\/typeface-dan-font-300x162.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Cara mudah membedakannya adalah:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Times New Roman itu <strong>typeface<\/strong>, sedangkan Times New Roman regular italic itu <strong>font<\/strong>-nya.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Jadi pada intinya typeface itu adalah font family yang terdiri dari font, dengan setiap gaya (style) font menjadi anggota individu dari font family.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contoh font style antara lain:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Regular.<\/li>\n\n\n\n<li>Italic.<\/li>\n\n\n\n<li>Bold.<\/li>\n\n\n\n<li>Black.<\/li>\n\n\n\n<li>Conceded.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Faktanya, dalam dunia pengembangan web, istilah typeface sudah diganti dengan class name: font-family.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Jadi sekarang semakin jelas kan?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Baca juga: <a href=\"https:\/\/www.apridesain.id\/blog\/contoh-desain-kemasan\/\" class=\"rank-math-link\">Inspirasi Desain Kemasan Dijamin Unik dan menarik<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mengapa Typeface menjadi Sinonim untuk Font?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Jenis huruf dan font mulai digunakan secara bergantian saat munculnya desktop publishing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Di mana konvensi penamaan dalam sistem operasi dan berbagai aplikasi menggunakan istilah font dalam menu mereka, bukan typeface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Jadi ketika Anda mengunggah font ke library di Windows, maka tulisan yang tampil bukan typeface, melainkan font.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lalu, baik Adobe maupun Google sendiri menawarkan perpustakaan font, bukan perpustakaan typeface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cara-cara di atas telah mengaburkan garis perbedaan antara jenis huruf (typeface) dengan font.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dan dalam penggunaan sehari-hari, istilah tersebut sering digunakan secara bergantian, sehingga membuatnya semakin samar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Baca juga: <a href=\"https:\/\/www.apridesain.id\/blog\/tren-desain-grafis\/\" class=\"rank-math-link\">Mau Tahu Tren Desain Grafis Terbaru? Cek di sini!<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh Typeface dan Font<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Typeface: <strong>Arial<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Font: 16pt <strong>Arial Bold<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typeface: <strong>Roboto<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Font: <strong>Roboto<\/strong> Thin, Roboto, Light, Roboto Regular, Roboto Medium, Roboto Bold, Roboto Black.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typeface: <strong>Helvetica<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Font: <strong>Helvetica<\/strong> Regular, Helvetica Oblique, Helvetica Light, Helvetica Light Oblique, Helvetica Bold, Helvetica Bold Oblique.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typeface: <strong>Arial<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Font: <strong>Arial<\/strong> Regular, Arial Italic, Arial Bold.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typeface: <strong>Raleway<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Font: <strong>Raleway<\/strong> Dots, Raleway Thin, Raleway Regular, Raleway Heavy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typeface: <strong>Avenir<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Font: <strong>Avenir<\/strong> Book, Avenir Roman, Avenir Book Oblique, Avenir Oblique, Avenir Light, Avenir Light Oblique, Avenir Medium, Avenir Medium Oblique, Avenir Heavy, Avenir Heavy Oblique, Avenir Black, Avenir Black Oblique.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Demikian artikel mengenai perbedaan antara typeface dan font ini. Apabila ada pertanyaan atau ingin menambahkan, silakan tuliskan pesan Anda di kolom komentar atau hubungi kami di <strong><a href=\"https:\/\/www.apridesain.id\/blog\/kontak-kami\/\">halaman kontak ini<\/a><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Sumber:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/careerfoundry.com\/en\/blog\/ui-design\/beginners-guide-to-typography\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/careerfoundry.com\/en\/blog\/ui-design\/beginners-guide-to-typography\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/design.tutsplus.com\/articles\/typeface-vs-font-what-is-the-difference-between-them--cms-34908\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/design.tutsplus.com\/articles\/typeface-vs-font-what-is-the-difference-between-them&#8211;cms-34908<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/356labs.com\/blog\/otf-vs-ttf-whats-the-difference\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/356labs.com\/blog\/otf-vs-ttf-whats-the-difference\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tipografi merupakan elemen penting dalam desain. Pertanyaannya sudah tahukan Anda perbedaan antara typeface dan font? Ini jawabannya!<\/p>\n","protected":false},"author":1,"featured_media":1482,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desain-grafis"],"_links":{"self":[{"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/posts\/1480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/comments?post=1480"}],"version-history":[{"count":0,"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/posts\/1480\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/media\/1482"}],"wp:attachment":[{"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/media?parent=1480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/categories?post=1480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.apridesain.id\/blog\/wp-json\/wp\/v2\/tags?post=1480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}