Tipografi Swedia

 (identity.sweden.se)
3 poin oleh GN⁺ 2023-07-19 | 1 komentar | Bagikan ke WhatsApp
  • Sweden Sans adalah jenis huruf utama yang bertanggung jawab atas aksesibilitas, kesederhanaan, dan konsistensi di seluruh komunikasi merek Swedia, dibuat dengan inspirasi dari sistem rambu lama Swedia
  • Dirancang agar memiliki keterbacaan tinggi dan tetap menjaga keunikan merek, sehingga memiliki daya pembeda yang tinggi untuk memberi dampak kuat di semua lingkungan penerapan
  • Sweden Sans tersedia dalam empat ketebalan: Book, Regular, Semibold, Bold, dan jika Sweden Sans tidak dapat digunakan maka Noto Sans berfungsi sebagai jenis huruf pengganti dan pendukung
  • Jika Sweden Sans dan Noto Sans sama-sama tidak dapat digunakan, gunakan Arial sebagai jenis huruf fallback
  • Di lingkungan digital, digunakan hierarki tipografi terstruktur berbasis baseline grid 6px untuk menjaga ekspresi merek yang konsisten

Hierarki tipografi (Type hierarchy)

  • Sweden Sans adalah jenis huruf utama dan tersedia dalam empat ketebalan: Book, Regular, Semibold, Bold
  • Jika Sweden Sans tidak dapat digunakan, Noto Sans berfungsi sebagai jenis huruf pengganti dan pendukung
  • Sweden Sans adalah elemen inti identitas merek Swedia, bertugas menjaga konsistensi, menciptakan kejelasan, dan mengelola warisan merek, serta harus selalu digunakan ketika ekspresi merek perlu ditampilkan secara utuh
  • Noto Sans digunakan sebagai jenis huruf alternatif (sekunder) dan pendukung untuk Sweden Sans, sekaligus sebagai pengganti untuk bahasa non-Romawi, karakter khusus, dan fallback untuk ketebalan khusus seperti italic
    • Penggunaan di luar tujuan ini sebaiknya dihindari sebisa mungkin karena dapat melemahkan daya ekspresi merek

Jenis huruf utama (Main typeface)

  • Sweden Sans tersedia dalam empat ketebalan: Book, Regular, Semibold, Bold
    • Semibold hanya digunakan untuk sub-logo

Jenis huruf alternatif (Alternative typeface)

  • Noto adalah keluarga font Google yang bertujuan mendukung semua bahasa di dunia dan dilisensikan di bawah Open Font License
  • Noto Sans digunakan ketika Sweden Sans tidak dapat mendukung lingkungan penerapan atau kebutuhan penggunaan yang nyata
    • Dukungan bahasa sebagai satu-satunya penggunaan
    • Ketebalan yang tidak tersedia untuk digunakan (misalnya italic)
    • Karakter khusus

Jenis huruf fallback (Fallback typeface)

  • Arial adalah jenis huruf fallback yang digunakan ketika Sweden Sans atau Noto Sans tidak terpasang atau tidak dapat digunakan
  • Dalam komunikasi sehari-hari seperti dokumen Word, Arial bisa jadi lebih sesuai

Pairing (Pairings)

  • Gunakan pairing tipe yang disarankan untuk memastikan kejelasan, konsistensi, dan hierarki yang kuat dalam semua komunikasi
  • Contoh yang ditampilkan antara lain kombinasi Level 1 Sweden Sans + Level 2 Noto Sans, serta Level 1 Sweden Sans dengan Level 2 Noto Sans Italic/Mono
  • Juga termasuk contoh pairing multibahasa seperti Noto Sans Russian dan Noto Sans Japanese

Tangga tipe (Type stairs)

  • Tangga tipe membantu menangani judul, isi, dan hubungan di antara keduanya
  • Headline tebal dikontraskan dengan tipografi yang lebih kecil untuk memastikan kejelasan, konsistensi, dan hierarki yang kuat

Digital

  • Sebagai hierarki tipografi utama untuk ekspresi merek digital Swedia, diterapkan ritme terstruktur berbasis unit 6px sebagai garis dasar
    • Ini memberikan hubungan yang seimbang saat berpindah di antara ukuran dan kombinasi yang berbeda, sekaligus menjaga keseluruhan ekspresi
  • Label digunakan secara hemat bersama headline yang terhubung dengan penawaran atau kategori tertentu
    • Membantu pengguna mengelompokkan informasi dengan cepat dan terhubung langsung ke kategori atau penawaran
    • Terutama digunakan untuk menjelaskan proyek pilihan, nilai inti, dan konten editorial utama pada kartu di area hero
  • Semua gaya dapat digunakan dalam warna putih di atas latar gelap, kecuali tautan

Jarak (Spacing)

  • Untuk alur tipografi yang rasional dan berkesinambungan di seluruh platform, semua leading didefinisikan dengan baseline grid (satu baris setiap 6px)
  • Semua jarak diatur secara optis agar sejajar dengan baseline sehingga seimbang dengan berbagai leading
    • Aturan umum: semakin besar headline, semakin besar pula jarak antara headline dan paragraf

Penulisan (Writing)

  • Dalam semua konteks, gunakan sebisa mungkin sentence case atau huruf kecil
    • Merek ini mengarah pada ekspresi yang berbicara kepada audiens, bukan berteriak kepada mereka
  • Huruf kapital hanya digunakan bila perlu, dibatasi maksimal 1–3 karakter (misalnya label kategori di situs web)

Pembacaan kanan ke kiri (Right to left hand reading)

  • Saat sub-logo dan konten berbasis teks Arab, ikuti contoh yang disajikan

Perataan (Alignment)

  • Teks selalu rata kiri
  • Sender system juga selalu rata kiri
  • Logo di dalam Sender system diratakan ke tengah

Contoh penerapan (Applications)

  • Disediakan contoh cara penggunaan keluarga Sweden Sans
    • Semibold untuk logotype
    • Sweden Sans Bold untuk headline
    • Sweden Sans Book untuk isi

Bacaan terkait

1 komentar

 
GN⁺ 2023-07-19
Opini Hacker News

  • Saya suka membaca tulisan tentang tipografi dan desain halaman karena terpikat olehnya, tetapi saya tidak begitu paham bagaimana ketelitian yang nyaris seperti obsesi pada tingkat ini bisa dipertahankan
    Sering kali terlihat bahwa dokumentasi dan perhatian detail yang dicurahkan pada jenis huruf dan syarat penggunaannya jauh lebih besar daripada waktu yang dipakai untuk menjalankan situs web, mendokumentasikan API, atau membangun fungsi dasar aplikasi
    Rasanya seperti menumbuhkan pohon ek selama 100 tahun, mengupas veneer dengan pisau buatan tangan, merendamnya dalam minyak kelapa selama setahun, lalu menempelkannya ke papan sarang lebah pulp IKEA

    • Dokumen tipografi biasanya ditujukan untuk desainer, tetapi jika digunakan dengan benar, itu bisa membantu semua orang. Saat desainer membuat desain yang konsisten, pengembang bisa membangun sistem desain dengan perilaku default yang masuk akal, dan setelah sampai di titik itu, sistem tersebut bukan menambah beban pengembang melainkan menguranginya
      Saya pernah membuat interpretasi sistem desain berbasis Tailwind dalam skala cukup besar di bidang pendidikan, dan desain serta tailwind-config berasal dari spesifikasi yang sama. Dengan mengurangi pilihan dan kemungkinan, area yang perlu dipikirkan insinyur ikut hilang, dan nilai seperti padding, ketebalan font, line-height, serta warna semuanya menjadi konsisten
      Mockup yang menyimpang dalam line-height, padding, weight, warna, dan sebagainya adalah mockup yang salah, dan nilai yang telah ditetapkan membuat fakta itu terlihat bagi pengembang. Kode yang menyimpang dari spesifikasi juga merupakan kode yang salah. Diperlukan alur komunikasi yang baik antara engineering dan UX, tetapi ini benar-benar bisa bekerja
      Dalam sistem yang berjalan baik, hanya dengan melihatnya saja orang jadi tahu nilai default-nya sehingga beban berkurang. Dan pada akhirnya, tujuan seluruh backend aplikasi adalah menyajikan frontend. Sebagus apa pun praktik backend, jika desain atau spesifikasi tidak terpenuhi, itu tetap menjadi kegagalan yang terlihat oleh pelanggan
    • Orang yang membuat panduan desain seperti ini dan orang yang menangani dokumentasi API atau fungsi dasar lain biasanya memiliki peran yang berbeda. Jadi pembuatan panduan desain dan pengerjaan kebutuhan teknis tidak selalu zero-sum, dan dalam praktiknya sering kali merupakan upaya yang sepenuhnya terpisah
      Desain, khususnya tipografi, berkaitan langsung dengan aksesibilitas, jadi detail seperti itu memang layak mendapat perhatian. Penetapan kontras dan hierarki visual sangat memengaruhi seberapa aksesibel sebuah desain
      Dalam contoh ini, bagian yang menyarankan agar ke depan jauh lebih jarang memakai teks huruf kapital penuh sangat menonjol. Huruf kapital penuh adalah hal yang pernah saya perdebatkan dengan para desainer karena masalah aksesibilitas, dan Microsoft juga pernah mengalami masalah besar secara terbuka pada desain awal “Metro”, lalu meminta maaf dan kemudian membatalkannya di desain “Fluent”
      Orang lebih banyak membaca bentuk kata daripada huruf per huruf, dan huruf kapital menciptakan banyak bentuk persegi panjang yang mirip sehingga memperlambat kecepatan baca seperti polisi tidur di jalan, bahkan bagi pembaca yang tidak disleksia. Bagi pembaca disleksia, itu bisa terasa bukan seperti polisi tidur melainkan tembok, sehingga teks serba huruf kapital bisa menjadi nyaris tidak dapat diakses
      Saya sudah sering melihat desain yang memakai huruf kapital penuh hanya karena “terlihat bagus”, tetapi bentuk yang bagi sebagian desainer tampak rapi dan bersih bisa menjadi bug aksesibilitas besar bagi orang lain
    • Mengejutkan bahwa begitu banyak usaha dicurahkan ke hal seperti ini, tetapi alasannya tampak sederhana. Ada banyak orang yang senang terobsesi pada tipografi, mereka ingin berobsesi, dan karena itu mereka menciptakan tujuan untuk diobsesikan
      Secara pribadi saya suka, dan menurut saya orang-orang seperti itu memang pantas dibayar
    • Pedoman seperti ini bisa sangat berguna dalam banyak hal. Orang-orang dengan beragam tingkat kemampuan dan pelatihan sering berusaha menyalurkan kreativitas mereka bahkan dengan mengorbankan kampanye merek berskala besar, jadi tim desain merek harus mencari cara untuk mengendalikan semangat itu
      Akses mereka ke ranah teknis umumnya terbatas, tetapi akses nyata ke ekspresi merek melalui ekspresi grafis jauh lebih luas
      Jika ada perbedaan dibanding dokumentasi teknis, maka itu harus ditangani sebagai persoalan terpisah; bukan berarti panduan desain boleh disebut rewel berlebihan hanya karena ada hal lain yang kurang terencana atau kurang terdokumentasi
    • Ini bukan pedoman untuk aplikasi atau situs web, melainkan panduan tentang bagaimana Kementerian Luar Negeri, Kementerian Inovasi Bisnis, Kementerian Kebudayaan, Swedish Institute, Business Sweden, Visit Sweden, serta berbagai organisasi yang mereka gunakan harus memakai tipografi saat mewakili Swedia di luar negeri
      Saya tidak merasa bagian jenis hurufnya terlalu besar. Saya pernah bekerja dua tahun di perusahaan yang hanya membuat manual desain, dan manual yang dibuat dengan baik umumnya memang seperti ini

  • Belakangan saya juga mengetahui Finlandica dari Finlandia, dan itu cukup bagus: https://toolbox.finland.fi/brand-identity-and-guidelines/fin...

    • Saya tidak suka elemen di atas huruf A kapital. Kalau dipakai jarang seperti pada judul mungkin bisa terlihat keren, tetapi kalau muncul di semua A jadi mengganggu
    • Benar-benar enak dilihat. Hampir terlihat seperti font monospace, dan dengan sedikit polesan mungkin bisa jadi font yang keren untuk pemrograman
    • #, &, @ kurang bagus. A dan G juga aneh, seperti dua huruf yang diberi ornamen di font sans-serif. i dan j juga begitu
      Meski begitu, I dirancang agar bisa dibedakan dari l, dan banyak font tidak melakukan itu

  • Tidak banyak artinya seberapa besar perhatian diberikan pada jenis huruf dan desain jika cara menyambut pengunjung justru menjengkelkan dengan “apa Anda benar-benar tidak ingin cookie pelacakan?” Anda harus menekan dua kotak centang kecil, dan di samping tombol “hanya izinkan yang dipilih” yang dibuat pudar ada tombol tebal yang tidak ramah pengguna, “izinkan semua”
    Kalau benar-benar ingin memperbaiki UX, salah satu hal seperti ini lebih layak diperhatikan

  • Ini dibuat oleh agensi desain Söderhavet di Stockholm. Detailnya di sini: https://soderhavet.com/work/sweden/

  • Di AS ada Public Sans: https://public-sans.digital.gov/

  • https://archive.is/7ytlz
    Sepertinya jebol karena trafik dari HN

    • Agak disayangkan kalau sweden.se bahkan tidak sanggup menangani kunjungan beberapa ribu orang dalam waktu singkat
    • Saya tahu HN bukan forum dukungan, tapi saya penasaran apakah hanya saya yang melihat “Safari couldn’t establish a secure connection” di situs archive.xx. Sudah begitu cukup lama

  • Ini tampaknya untuk situs yang berfokus pada promosi citra Swedia kepada orang asing. Saya tinggal di Swedia, dan sepertinya belum pernah melihat jenis huruf ini dipakai dalam komunikasi umum lembaga negara Swedia
    Kalau bisa disebut sebagai bahasa desain Swedish Tax Agency, saya suka itu. Sepertinya mereka tidak memakai Sweden Sans, tapi saya tidak tahu persis apa yang dipakai

    • Situs itu dikelola oleh Swedish Institute
      “Swedish Institute adalah lembaga publik yang membangun minat dan kepercayaan terhadap Swedia di seluruh dunia. Kami menangani promosi Swedia, kerja sama kawasan Laut Baltik, dan pembangunan global. […] Operasi SI terutama didanai melalui alokasi langsung dari anggaran negara. SI memiliki sekitar SEK 470 juta dana pemerintah Swedia di empat bidang: kerja sama internasional, bantuan internasional, pendidikan dan riset universitas, serta bisnis.”
      [1] https://si.se/en/about-si/our-mission/
    • Setahu saya, Sweden Sans dipakai sebagai typeface judul pada kartu identitas nasional dan paspor terbaru
    • Memang menarik bahwa negara-negara sekarang melakukan promosi untuk dirinya sendiri. Dan itu efektif. Saat memikirkan negara Nordik, kemungkinan besar Swedia yang pertama terlintas di benak
    • Saya juga merasa ini situs untuk mempromosikan citra Swedia. Ada tempat-tempat menyenangkan dan pemandangan pedesaan, dan kalau punya motor, berkeliling Swedia tidak akan memakan waktu terlalu lama
      https://www.youtube.com/watch?v=qXiIJ32kaZU
      Seseorang di Swedia mengatakan bahwa polisi harus menangkapnya pada hari yang sama untuk membuktikan siapa pengemudinya, tapi saya akan tetap terus naik di autobahn Jerman. Karena lebih sedikit moose yang berkeliaran
      ghost rider patrik fürstenhoff

  • Namanya Sweden Sans, tetapi beberapa huruf seperti i dan l kecil tampak memiliki serif. Saya tidak tahu apakah saya yang salah memahami serif, atau saya yang salah memahami arti sans di sini

    • Ada cukup banyak kelonggaran. Desain huruf juga seni yang emosional, jadi kadang desainer diam-diam memasukkan satu serif, atau bisa juga ada alasan tertentu dalam spesifikasi proyek
      Saat mengajar tipografi pada 2000-an, para mahasiswa kadang menunjuk hal seperti ini. Sebagai contoh kelas pemula, kadang mereka memakai huruf tanpa benar-benar mencermatinya, lalu belakangan tersandung pada detail tertentu
      Aneh, tetapi kebanyakan orang memilih font tanpa benar-benar memikirkan font itu sendiri secara mendalam. Mereka bahkan tidak membaca namanya, apalagi mengamatinya dengan saksama. Mereka hanya memikirkan desain mereka sendiri, pikiran dan perasaan mereka, pesan mereka, peluang desain yang keren
      Desainer berpengalaman perlu dilatih untuk bertanya pada diri sendiri apakah mereka sebenarnya sedang berhalusinasi tentang tujuan sebuah font. Karena sering kali tujuan aslinya menjadi sangat jelas hanya dengan melihatnya beberapa detik. Kalau Anda mempelajari cara kerja ini, alasan adanya slab serif itu pun jadi jelas
    • Itu bukan kategori yang seketat itu. Lebih merupakan penanda tentang garis keturunan mana yang menurut desainer menaungi font tersebut
      Banyak font sans-serif juga memiliki sedikit serif, terutama pada karakter seperti l yang mudah membingungkan. Ini lebih sering lagi jika dipakai dalam konteks teknis, atau sebagai font serbaguna seperti font ini
    • Gaya regular dan bold mungkin lebih dekat ke slab serif, tetapi bobot “book” adalah sans-serif sungguhan. Mungkin paling mudah terlihat kalau Anda mengunduh font-nya dan melihat file OTF-nya
    • Memang terlihat seperti ada sedikit slab serif. Kalau mau longgar, serif dan sans-serif bisa dibilang sebuah spektrum dengan dua ujung
      Jika disebut serif, orang akan mengharapkan font yang jauh lebih terasa serif-nya, jadi mungkin lebih sederhana menyebutnya sans-serif
    • Istilah yang tepat mungkin Slab Serif

  • Prancis juga punya sistem desain sendiri dan font Marianne: https://www.systeme-de-design.gouv.fr/elements-d-interface/f...

  • Bukan bermaksud merendahkan Swedia, tetapi Estonia juga punya hal serupa: https://brand.estonia.ee/guidelines/typography/?lang=en

    • Keindahan memang tergantung pada mata yang melihat, tetapi karya Swedia umumnya cukup indah dan mudah dibaca, sedangkan pedoman Estonia tampak seperti contoh yang sangat baik tentang apa yang terjadi ketika desainer dibiarkan berbuat sesuka hati atau klien terlalu patuh dan ingin tampil berbeda
      Dalam pengantarnya, karakter merek Estonia digambarkan sebagai “nordic, surprising, smart”, tetapi khususnya jenis huruf Aino tampaknya terlalu berfokus pada unsur surprising sampai mengorbankan keterbacaan, sehingga penyampaian unsur smart pun jelas menjadi lebih lemah