Shantell Sans (2023)

 (shantellsans.com)
1 poin oleh GN⁺ 2 jam lalu | 1 komentar | Bagikan ke WhatsApp
  • Shantell Sans menawarkan gaya mulai dari font untuk penggunaan sehari-hari hingga gaya eksperimental untuk animasi melalui sumbu Weight, Italic, Informality, Bounce, dan Spacing
  • Berangkat dari tulisan tangan Shantell Martin dan pengalamannya dengan disleksia, font ini menargetkan aksesibilitas yang tetap terasa seru, playful, namun layak dipakai secara profesional
  • Font ini merujuk pada kesan universal dan mudah dibaca dari Comic Sans, tetapi bukan turunannya; melainkan merapikan tulisan tangan marker felt-tip menjadi font digital
  • Keterbacaannya ditingkatkan lewat metrik yang mendekati Roboto, lebar glif dan jarak huruf yang luas, serta desain b·d·p·q dan I·1 yang mudah dibedakan
  • Didistribusikan gratis lewat Google Fonts dan lisensi OFL, dengan dukungan untuk lebih dari 380 bahasa berbasis Latin dan Cyrillic serta penggunaan di Google Docs

Titik awal Shantell Sans

  • Shantell Sans adalah font variabel yang dibuat berdasarkan tulisan tangan Shantell Martin, menghadirkan gaya yang ramah untuk penggunaan sehari-hari sekaligus gaya eksperimental yang cocok untuk animasi
  • Saat kecil, Shantell Martin tidak berhasil lulus tes ejaan dan harus menjalani detention, tetapi ia menyukai kata-kata dan telah mengekspresikan emosinya melalui tulisan dan gambar
  • Pada usia 20 atau 21 tahun, ia mengetahui bahwa dirinya memiliki disleksia, dan saat mulai mengambil gelar seni di Central Saint Martins, ia merasa banyak orang kreatif juga memiliki disleksia
  • Ia kecewa karena para guru yang tidak menyadari kesulitannya dalam membaca dan menulis justru memberinya hukuman alih-alih dukungan, dan font yang didasarkan pada tulisan serta huruf buatannya sendiri menjadi cara agar orang bisa membaca dan menulis apa pun hubungan mereka dengan kata-kata
  • Tujuannya adalah membuat font yang seru dan playful namun profesional dan dapat digunakan, serta font yang aksesibel dan mengingatkan bahwa kata-kata adalah gambar yang bisa hadir dengan caranya masing-masing
  • Stephen Nixon mengirimkan template bergaris untuk menulis alfabet Latin, angka, dan simbol dengan tulisan tangan, lalu tulisan tangan itu dipakai untuk membuat font digital

Distribusi terbuka dan penggunaan awal

  • Dengan merilis Shantell Sans di bawah Open Font License, lebih banyak orang bisa mengaksesnya tanpa biaya, dan pola distribusi terbuka seperti penjelasan lisensi Google Fonts membantu meningkatkan kegunaannya
  • Ketersediaan gratis membuatnya bisa dipakai luas lewat Google Fonts dan platform lain, dan typeface buatan seniman yang masih hidup ini dapat memicu seniman lain untuk membuat tipografi mereka sendiri
  • Shantell Sans sangat personal karena berbasis pada tulisan tangan Shantell Martin, tetapi distribusi terbuka juga pada dasarnya berarti melepaskan kendali atas elemen yang sangat miliknya sendiri
  • Ia berharap anak-anak dan kaum muda akan memakai Shantell Sans dan mengetahui latar belakang pembuatannya, serta bahwa font ini bisa dipakai dengan cara yang tak terduga baik di proyek pribadi maupun proyek desain yang lebih besar

  • Penerapan awal

Tujuan desain dan pengaruh Comic Sans

  • Stephen Nixon membayangkan mural besar Shantell Martin serta karya garisnya yang eksploratif, semi-improvisasional, dan playful ketika Shantell menghubunginya dengan keinginan untuk membuat “typeface yang usable, menarik secara visual, cerdas, dan kreatif”
  • Ungkapan ingin membuat “Comic Sans baru” menjadi petunjuk utama, dan proyek ini merujuk pada universalitas budaya serta respons emosional terhadap Comic Sans, tetapi bukan proyek turunan langsung atau versi barunya
  • Comic Sans dirancang oleh Vincent Connare pada 1994 untuk Microsoft Bob, lalu dipra-instal di sistem operasi Windows dan Mac dan digunakan secara luas
  • Comic Sans digunakan di banyak tempat, mulai dari tag generasi kelima Ty Beanie Babies hingga pengumuman CERN tahun 2012 tentang partikel Higgs Boson

  • Lima kriteria

    • Harus menarik bagi pengguna sehari-hari, bukan hanya font untuk penggemar tipografi
    • Harus mudah dipakai untuk menulis dalam beragam komunikasi
    • Harus bisa digunakan oleh rentang orang yang luas dan aksesibel
    • Harus memiliki keterbacaan tinggi dan mudah dibaca
    • Harus melakukan sesuatu yang baru, bukan sekadar mengulang wilayah yang sudah ada

Desain dan produksi berbasis Latin

  • Daya tarik sehari-hari

    • Untuk menciptakan daya tarik sehari-hari, fondasinya diambil dari tulisan tangan marker felt-tip seperti Comic Sans, dengan tulisan tangan Shantell Martin sebagai titik awal
    • Beberapa ciri tulisan tangan dipertahankan, tetapi kesan keseluruhannya disederhanakan agar cocok dalam bentuk digital

  • Kemudahan penggunaan lintas konteks

    • Agar sesuai dengan proporsi umum dan ekspektasi gaya font modern, font metrics seperti cap-height, x-height, dan line height dasar diatur mendekati font yang banyak dipakai seperti Roboto
    • Agar tetap mudah dibaca dan selaras secara visual dengan tulisan Shantell, digunakan lebar glif dan jarak huruf yang sedikit lebih lebar dari rata-rata
    • Font ini dibuat agar mudah dipakai dalam konteks sehari-hari seperti website, aplikasi, dan presentasi, tetap menampilkan karakter pada ukuran besar, dan tetap berfungsi untuk body text kecil

  • Dukungan bahasa dan distribusi

    • Shantell Sans mengikuti dan sedikit melampaui glyph set Google Fonts Latin Plus dan Cyrillic Plus, serta mendukung lebih dari 380 bahasa yang memakai aksara Latin dan Cyrillic
    • Cakupan dukungannya meliputi bahasa berbasis Latin dan Cyrillic di Eropa, Amerika, dan Asia Tengah
    • Berkat dukungan Google Fonts dan rilis lisensi OFL, font ini dapat didistribusikan sebagai font open-source yang bisa dipakai gratis

  • Pembedaan huruf yang mudah dibaca

    • b, d, p, q dan n, u dirancang agar saling terbedakan melalui kontras bentuk yang sederhana dan terminal yang ditempatkan dengan tepat
    • Karena Shantell Martin terkadang menulis huruf kapital I dan angka 1 sebagai satu garis lurus, serif ditambahkan pada huruf kapital I dan flag ditambahkan pada 1 agar keduanya bisa dibedakan
    • Sesuai karakter font berbasis tulisan tangan, a dan g memakai bentuk single-story seperti yang diajarkan kepada anak-anak di sekolah agar tetap terasa akrab dan familier

  • Sumbu variabel dan fitur OpenType

    • Selain membutuhkan rentang ketebalan yang baik, font ini juga harus menyediakan rentang gaya yang luas sebagai font variabel untuk desainer dan developer yang ingin mengeksplorasi fitur tipografi modern
    • Untuk membawa suasana bebas dan organik dari karya Shantell Martin ke dalam sumbu eksperimental, dibuat lima sumbu variabel: Weight, Italic, Informality, Bounce, dan Spacing
    • Untuk kebutuhan tipografi yang lebih rinci, juga disertakan fitur OpenType seperti tabular vs proportional figures, fractions, dan localized forms
    • Dengan merujuk pada detail kerajinan dari font berbasis tulisan tangan seperti Inkwell, Cortado, dan Studio Lettering, pendekatan membuat satu lagi font marker felt-tip hasil auto-tracing dihindari

Penentuan bentuk dan sumbu eksperimental

  • Shantell Martin memilih marker felt-tip medium Staedtler Lumocolor M dan menulis pangram huruf besar-kecil, angka, tanda baca, simbol, serta beberapa kata yang berisi huruf beraksen
  • Hasil scan ditrace mengikuti garis tengah sapuan pena lalu dikembangkan menjadi sapuan Light dan ExtraBold
  • Karena tulisan tangan aslinya memiliki variasi ukuran dan ritme yang lebih besar daripada font yang biasa dibaca, tinggi, lebar, dan jarak huruf dinormalisasi sampai batas tertentu lalu disesuaikan secara konsisten
  • Ciri-ciri seperti palang t dan f yang tidak keluar ke sisi kiri batang vertikal utama, A dan R yang dimulai dari kiri atas, P yang berupa loop sederhana dari kiri bawah, serta M dan W yang berbentuk gelombang beruntun tetap dipertahankan
  • Arah akhir desainnya adalah mempertahankan sedikit ketajaman dan kontras yang membuat tulisan Shantell menarik, sambil membuat ketebalannya sedikit lebih seragam dan menerapkan ujung semi-bulat yang lembut
  • Keseimbangan ini menjaga rasa tulisan marker sambil tetap membuatnya tampak aksesibel dan hangat dalam bentuk digital

  • Bounce dan Informality

    • Berdasarkan font dasar yang telah dinormalisasi, dibuat gaya tambahan yang memperkenalkan kembali ketidakteraturan dari sampel tulisan tangan yang dipindai
    • Ketidakteraturan itu bukan sepenuhnya acak, melainkan memiliki karakter berulang; huruf dengan banyak palang horizontal cenderung terlihat lebih tinggi, sedangkan huruf dengan banyak batang vertikal cenderung tampak lebih lebar dan rendah
    • Agar font tidak menjadi terlalu kacau dan kehilangan kegunaannya, diperlukan keseimbangan untuk memasukkan lebih banyak karakter sambil tetap membuatnya terasa “seperti font”
    • Sumber tulisan tangan dan sumber yang dapat dibangun dipisahkan untuk membuat sumbu Bounce dan Informality pada font final
    • Gaya Bounce dihasilkan dengan skrip yang menggeser glif ke atas dan ke bawah, sedangkan gaya Informal dibuat dengan interpolasi antara sumber utama yang “dinormalisasi” dan sumber utama yang “tidak teratur”
    • Semua sumber mencakup beberapa glif alternatif untuk huruf, angka, dan simbol utama, dan font final memutar glif alternatif ini secara pseudorandom agar terlihat seperti tulisan tangan yang energik
    • Karena berupa sumbu variabel, efeknya bisa diatur dari sangat halus hingga sangat menonjol, dan animated type dengan desain yang koheren dapat dipakai dengan mudah di dalam sistem font yang sama

  • Google Fonts dan perluasan open-source

    • Karena Shantell Martin tertarik pada rilis open-source, dibahas apakah Google Fonts bisa mendukung perluasan untuk menjangkau basis pengguna yang lebih luas
    • Dengan dukungan Google Fonts, rentang gaya diperluas dengan pembuatan seluruh set gaya Italic
    • Ditambahkan pula sumbu eksperimental Spacing yang dapat berguna ketika software tidak mendukung pengaturan jarak huruf secara bawaan
    • Aksara Latin diperluas dengan karakter bahasa Vietnam dan lebih banyak simbol mata uang, sedangkan penambahan Cyrillic membuatnya mendukung kumpulan bahasa yang sepenuhnya baru

Desain huruf Cyrillic Shantell Sans

  • Cyrillic adalah aksara yang dipakai untuk banyak bahasa di Eurasia seperti Bulgaria, Serbia, Rusia, Belarus, Ukraina, Tatar, Bashkir, dan lainnya
  • Proses desain Cyrillic relatif mirip dengan desain Latin, tetapi bisa menjadi lebih sulit ketika menangani bentuk nontradisional yang terinspirasi dari tulisan tangan orang tertentu
  • Mengerjakan aksara lain untuk typeface tulisan tangan mirip seperti menerjemahkan puisi: struktur bahasa sasaran harus dipakai sambil tetap menjaga nada khasnya
  • Cyrillic memiliki bentuk upright atau “printed”, italic, dan cursive, dan sebagian bentuk italic serta cursive berbeda secara struktural dari bentuk printed yang umum
  • Tulisan tangan Shantell Martin mencampur bentuk cursive dan printed, tetapi karena ia hanya menulis Latin, perlu diputuskan huruf Cyrillic mana yang akan dialihkan ke bentuk cursive dan mana yang ke bentuk printed
  • Shantell Martin diminta menulis beberapa kalimat dalam bahasa Rusia untuk melihat bagaimana ia mendekati bentuk-bentuk yang asing baginya, dan ia juga diberi contoh bentuk berbeda untuk huruf yang sama serta diminta menulis beberapa kata berulang kali
  • Tim juga berkonsultasi dengan desainer huruf Cyrillic Maria Doreuli, Krista Radoeva, dan Alexei Vanyashin, dan pemahaman mereka tentang bentuk yang tepat dan yang tidak tepat sebagian besar sejalan
  • Bahasa Bulgaria dan Serbia memiliki bentuk konvensional yang berbeda dari Cyrillic dasar; misalnya, t dalam bahasa Bulgaria biasanya berbentuk seperti m Latin, yang dalam gaya ini bisa tertukar dengan m Cyrillic sehingga perlu penyesuaian
  • Huruf seperti nje dalam bahasa Serbia harus tampak alami bagi pembaca native baik dalam huruf besar maupun kecil, dan untuk bahasa Serbia juga dilakukan konsultasi dengan Jovana Jocić
  • Pengerjaan Cyrillic melibatkan banyak tantangan desain, tetapi diharapkan dapat berguna bukan hanya untuk komposisi Latin melainkan juga untuk penataan teks dalam berbagai bahasa Cyrillic

Cara menggunakan dan tautan referensi

  • Shantell Sans on Google Fonts: tersedia di Google Fonts
  • open-source repo: unduh versi terbaru
  • Juga dapat digunakan di Google Docs, Slides, dan produk Workspace lainnya

  • Menambahkan di Google Workspace

    • Buka menu font di dokumen lalu klik “More Fonts”
    • Di panel pop-up yang terbuka, cari “Shantell Sans”
    • Klik family font tersebut untuk menambahkannya ke menu font
    • Google Material Design Blog: tersedia versi yang disederhanakan

Bacaan terkait

1 komentar

 
GN⁺ 2 jam lalu
Pendapat di Hacker News

  • Saat melihat sampel multibahasa di sekitar bagian tengah tulisan, saya menyadari bahwa glif Sirilik pada font ini sangat bagus
    Saat mencoba font baru, biasanya karakter Sirilik tidak sebagus karakter Latin, dan pengecualiannya biasanya hanya font dari foundry kawasan Sirilik seperti ParaType
    Sepertiga bagian akhir tulisan membahas secara rinci bagaimana hal ini dicapai
    https://www.paratype.com/fonts/pt/yefimov-sans?tab=gallery

  • Slider formalitas yang bisa dimainkan di halaman Google Fonts yang ditautkan dalam tulisan ini adalah salah satu contoh paling keren dari pemanfaatan sumbu variable font yang pernah saya lihat belakangan ini
    Rasanya seperti melihat Metafont perlahan tapi pasti dinilai ulang
    https://fonts.google.com/specimen/Shantell+Sans

    • Dash dari Typotheque juga punya sumbu variabel yang hampir sama, dan di sana namanya “Speed”: https://www.typotheque.com/fonts/dash-casual
      Entah kenapa, untuk melihat seluruh rentang variabelnya Anda harus mengeklik kotak ‘Variable’
    • Itu yang paling keren. Bahkan ada slider “bounce” juga
      Sulit dipercaya kita hidup di zaman seperti ini… jadi penasaran apakah ada font lain dengan pengaturan khusus semacam ini
      Saya masih menunggu teknologi yang benar-benar memungkinkan font tulisan tangan dengan keacakan sungguhan
    • Saya kurang paham Metafont, maksudnya yang ini? https://ctan.org/pkg/metafont?lang=en
    • Tunggu, apakah ini berarti kalau dibuat lebih tidak formal, glif individual untuk huruf yang sama bisa berbeda satu sama lain bahkan dalam kalimat yang sama?

  • Fontnya luar biasa. Hanya saja saya masih merasa kurang pada glif variabel yang selangkah lebih maju secara teknis
    Kesan membaca tulisan tangan hilang kalau bentuk hurufnya selalu sama
    Akan sangat keren kalau setiap huruf punya 5–6 variasi kecil dan bisa dipakai bergantian secara acak

  • Saya heran baru sekarang melihat font seperti ini. Saya sudah cukup banyak menangani font bergaya Comic Sans, dan ini sejauh ini font terindah yang pernah saya lihat

  • Kemiripannya dengan Comic Sans terlalu jelas, jadi hal pertama yang saya lakukan di tulisan itu adalah Ctrl-F mencari “comic”
    Pikiran pertama saya adalah seberapa jauh konsep ini didorong
    Cara penyebutan Comic Sans tersebar di dalam tulisan juga menarik; sekitar titik 30% ada beberapa penyebutan, seolah mengakui garis keturunan yang jelas, lalu setelah itu hampir tidak muncul lagi
    Font ini benar-benar melangkah lebih jauh, dan indah

  • Apakah aneh kalau saya menginginkan versi monospace dari font ini? Kelihatannya benar-benar keren dan desainnya bagus sekali

  • Putri saya yang mengalami disleksia sangat menyukainya. Dari contoh yang ada, dia jelas lebih memilih font ini daripada Roboto

    • Saya sendiri tidak disleksia, tetapi bahkan pada contoh Roboto pun perbedaan keterbacaannya terasa sangat jelas
      Setelah terbiasa dengan Shantell Sans sampai di titik itu, Roboto terasa hampir sulit dibaca

  • Wah, ini jelek sekali sampai-sampai sulit menjelaskan seberapa jeleknya

  • Baru pertama kali melihatnya, tapi ini sudah menjadi font tulisan tangan favorit saya. Pekerjaan yang luar biasa

  • Rasanya seperti karya seni yang indah yang lahir dari human-computer interaction
    Cukup bisa dipakai bahkan dalam konteks di mana Comic Sans bisa terlihat agak seperti bahan olok-olok