Typography Thụy Điển

 (identity.sweden.se)
3 điểm bởi GN⁺ 2023-07-19 | 1 bình luận | Chia sẻ qua WhatsApp
  • Sweden Sans là kiểu chữ chủ đạo đảm nhiệm tính dễ tiếp cận, sự đơn giản và tính nhất quán trong toàn bộ truyền thông thương hiệu Thụy Điển; được tạo ra lấy cảm hứng từ hệ thống biển chỉ dẫn cũ của Thụy Điển
  • Được thiết kế để có độ dễ đọc cao và duy trì bản sắc thương hiệu riêng, bảo đảm khả năng nhận diện cao nhằm tạo tác động mạnh trong mọi môi trường ứng dụng
  • Sweden Sans có bốn độ đậm: Book, Regular, Semibold, Bold; khi không thể dùng Sweden Sans, Noto Sans đóng vai trò kiểu chữ thay thế và bổ trợ
  • Khi không thể dùng cả Sweden Sans lẫn Noto Sans, dùng Arial làm kiểu chữ fallback
  • Trong môi trường số, áp dụng hệ thống phân cấp typography có cấu trúc dựa trên lưới baseline 6px để duy trì cách thể hiện thương hiệu nhất quán

Hệ phân cấp typography (Type hierarchy)

  • Sweden Sans là kiểu chữ chủ đạo và có bốn độ đậm: Book, Regular, Semibold, Bold
  • Khi không thể dùng Sweden Sans, Noto Sans hoạt động như kiểu chữ thay thế và bổ trợ
  • Sweden Sans là yếu tố cốt lõi của bản sắc thương hiệu Thụy Điển, phụ trách duy trì tính nhất quán, tạo sự rõ ràng và quản lý di sản thương hiệu; luôn được dùng khi cần thể hiện trọn vẹn biểu đạt thương hiệu
  • Noto Sans được dùng làm lựa chọn thay thế (thứ cấp) và kiểu chữ bổ trợ cho Sweden Sans, đồng thời là kiểu chữ thay thế cho ngôn ngữ không dùng chữ La Mã và ký tự đặc biệt, cũng như fallback cho các kiểu độ đậm đặc biệt như italic
    • Nên tránh dùng ngoài các mục đích này khi có thể, vì có thể làm suy yếu khả năng biểu đạt thương hiệu

Kiểu chữ chủ đạo (Main typeface)

  • Sweden Sans có bốn độ đậm: Book, Regular, Semibold, Bold
    • Semibold chỉ được dùng cho sub logo

Kiểu chữ thay thế (Alternative typeface)

  • Noto là họ font của Google nhằm hỗ trợ mọi ngôn ngữ trên thế giới và được cấp phép theo Open Font License
  • Noto Sans được dùng khi Sweden Sans không hỗ trợ môi trường hoặc mục đích ứng dụng thực tế
    • Dùng riêng cho hỗ trợ ngôn ngữ
    • Các độ đậm không có sẵn (ví dụ: italic)
    • Ký tự đặc biệt

Kiểu chữ fallback (Fallback typeface)

  • Arial là kiểu chữ fallback, dùng khi Sweden Sans hoặc Noto Sans không được cài đặt hoặc không thể sử dụng
  • Trong giao tiếp hằng ngày như tài liệu Word, Arial có thể phù hợp hơn

Ghép cặp (Pairings)

  • Sử dụng các cặp kiểu chữ được đề xuất để bảo đảm sự rõ ràng, tính nhất quán và hệ phân cấp mạnh trong mọi hoạt động truyền thông
  • Ví dụ được đưa ra gồm Level 1 Sweden Sans + Level 2 Noto Sans, cũng như tổ hợp Level 1 Sweden Sans với Level 2 Noto Sans Italic/Mono
  • Bao gồm các ví dụ ghép cặp đa ngôn ngữ như Noto Sans Russian, Noto Sans Japanese

Bậc thang chữ (Type stairs)

  • Bậc thang chữ giúp xử lý tiêu đề, phần thân văn bản và mối quan hệ giữa chúng
  • Headline đậm tương phản với typography nhỏ hơn, bảo đảm sự rõ ràng, tính nhất quán và hệ phân cấp mạnh

Kỹ thuật số (Digital)

  • Là hệ phân cấp typography chủ đạo cho biểu đạt thương hiệu số của Thụy Điển, áp dụng nhịp điệu có cấu trúc theo đơn vị 6px làm đường cơ sở
    • Cung cấp mối tương quan cân bằng khi chuyển đổi giữa các kích thước và tổ hợp khác nhau, đồng thời duy trì tổng thể biểu đạt
  • Nhãn được dùng một cách tiết chế cùng với headline liên kết với một hạng mục cung cấp hoặc danh mục cụ thể
    • Giúp người dùng nhanh chóng phân loại thông tin và liên kết trực tiếp với danh mục hoặc hạng mục cung cấp
    • Chủ yếu dùng trong các thẻ ở khu vực hero để mô tả dự án được chọn, giá trị cốt lõi và nội dung biên tập chính
  • Tất cả các style có thể dùng màu trắng trên nền tối, ngoại trừ liên kết

Khoảng cách (Spacing)

  • Để có luồng typography hợp lý và liên tục trên toàn nền tảng, toàn bộ line-height được định nghĩa bằng lưới baseline (một dòng mỗi 6px)
  • Mọi khoảng cách được thiết lập quang học theo baseline để cân bằng với các line-height khác nhau
    • Quy tắc chung: headline càng lớn thì khoảng cách giữa headline và đoạn văn cũng càng lớn

Cách viết (Writing)

  • Trong mọi ngữ cảnh, dùng sentence case hoặc chữ thường nhiều nhất có thể
    • Thương hiệu hướng đến cách biểu đạt như đang trò chuyện với khán giả, không phải hét vào họ
  • Chỉ dùng chữ hoa khi cần thiết, giới hạn tối đa 1–3 ký tự (ví dụ: nhãn danh mục trên website)

Đọc từ phải sang trái (Right to left hand reading)

  • Khi sub logo và nội dung dựa trên văn bản tiếng Ả Rập, làm theo ví dụ được trình bày

Căn chỉnh (Alignment)

  • Văn bản luôn căn trái
  • Sender system cũng luôn căn trái
  • Logo bên trong Sender system được căn giữa

Trường hợp ứng dụng (Applications)

  • Cung cấp ví dụ về cách sử dụng họ Sweden Sans
    • Semibold cho logotype
    • Sweden Sans Bold cho headline
    • Sweden Sans Book cho phần thân văn bản

Bài viết liên quan

1 bình luận

 
GN⁺ 2023-07-19
Ý kiến trên Hacker News

  • Tôi rất mê typography và thiết kế trang nên thích đọc các bài về chủ đề này, nhưng thật sự không rõ làm sao người ta duy trì được mức tỉ mỉ gần như ám ảnh như thế
    Nhiều khi cảm giác lượng tài liệu hóa và sự chăm chút cho kiểu chữ cùng điều kiện sử dụng còn lớn hơn rất nhiều so với thời gian dành cho vận hành website, tài liệu API, hay các chức năng cơ bản của ứng dụng
    Nó giống như trồng một cây sồi suốt 100 năm, dùng dao thủ công lạng veneer, ngâm trong dầu dừa 1 năm rồi dán lên tấm tổ ong bột giấy của IKEA

    • Tài liệu typography thường dành cho nhà thiết kế, nhưng nếu được dùng đúng cách thì có thể giúp ích cho tất cả mọi người. Khi nhà thiết kế tạo ra một thiết kế nhất quán, lập trình viên có thể xây dựng một design system với hành vi mặc định hợp lý, và đến mức đó thì hệ thống không làm tăng gánh nặng cho lập trình viên mà còn giảm bớt
      Tôi từng xây dựng ở quy mô khá lớn một bản diễn giải design system dựa trên Tailwind trong lĩnh vực giáo dục, và thiết kế cùng tailwind-config đều xuất phát từ cùng một đặc tả. Nó giảm bớt lựa chọn và khả năng, loại bỏ những chỗ mà kỹ sư phải đắn đo, đồng thời giúp các giá trị như padding, font weight, line-height, màu sắc đều nhất quán
      Mockup nào lệch khỏi line-height, padding, weight, màu sắc v.v. là mockup sai, và các giá trị đã cấu hình sẽ cho lập trình viên thấy điều đó. Code lệch khỏi đặc tả cũng là code sai. Cần có luồng giao tiếp tốt giữa engineering và UX, nhưng cách này thực sự hiệu quả
      Trong một hệ thống vận hành tốt, chỉ cần nhìn là biết giá trị mặc định, nên gánh nặng sẽ giảm đi. Và rốt cuộc, mục đích của toàn bộ backend ứng dụng là để phục vụ frontend. Dù các thực hành backend có xuất sắc đến đâu, nếu không khớp với thiết kế hay đặc tả thì đó vẫn là một thất bại mà khách hàng nhìn thấy được
    • Những người làm ra các hướng dẫn thiết kế như thế này và những người phụ trách tài liệu API hay các chức năng cốt lõi khác thường là các vai trò khác nhau. Vì vậy, việc làm hướng dẫn thiết kế và việc xử lý yêu cầu kỹ thuật không nhất thiết là zero-sum, và trên thực tế nhiều khi là những nỗ lực hoàn toàn tách biệt
      Thiết kế, đặc biệt là typography, liên quan trực tiếp đến khả năng tiếp cận, nên xứng đáng được chăm chút đến mức đó. Việc xác định độ tương phản và thứ bậc thị giác ảnh hưởng rất lớn đến mức độ dễ tiếp cận của một thiết kế
      Trong ví dụ này, phần khuyên nên dùng chữ in hoa ít hơn hẳn trong tương lai đặc biệt nổi bật. Chữ in hoa là thứ tôi từng phải tranh luận với các nhà thiết kế vì vấn đề accessibility, và Microsoft cũng từng vướng rắc rối công khai khá lớn với thiết kế “Metro” thời kỳ đầu, sau đó xin lỗi và đảo ngược trong thiết kế “Fluent” về sau
      Con người đọc hình dạng của từ nhiều hơn là từng chữ cái riêng lẻ, còn chữ in hoa tạo ra rất nhiều hình chữ nhật giống nhau nên làm chậm tốc độ đọc như các gờ giảm tốc trên đường, ngay cả với người đọc không bị chứng khó đọc. Với người mắc dyslexia, đó không còn là gờ giảm tốc mà là một bức tường, khiến văn bản viết toàn chữ in hoa có thể gần như không thể tiếp cận được
      Tôi đã thấy rất nhiều thiết kế dùng toàn chữ in hoa chỉ vì “trông đẹp”, nhưng một hình thức có vẻ ngăn nắp, sạch sẽ với nhà thiết kế này lại có thể là một lỗi accessibility khổng lồ với người khác
    • Thật đáng kinh ngạc khi có quá nhiều công sức được đổ vào chuyện này, nhưng lý do có vẻ đơn giản. Có rất nhiều người thích ám ảnh với typography, họ muốn được ám ảnh, và vì thế họ tạo ra mục đích để ám ảnh
      Cá nhân tôi thấy điều đó tốt, và nghĩ rằng nên trả tiền cho những người như vậy
    • Những guideline kiểu này có thể rất hữu ích theo nhiều cách. Có những người với đủ loại trình độ và mức đào tạo luôn muốn thể hiện sự sáng tạo, kể cả khi phải hy sinh chiến dịch thương hiệu quy mô lớn, nên đội thiết kế thương hiệu phải tìm cách kiểm soát nguồn năng lượng đó
      Quyền truy cập kỹ thuật của những người đó thường bị hạn chế, nhưng quyền truy cập thực tế vào cách thể hiện thương hiệu thông qua biểu đạt đồ họa thì rộng hơn nhiều
      Nếu có sự khác biệt khi so với tài liệu kỹ thuật thì đó nên là một vấn đề riêng cần được xử lý riêng, chứ không phải gọi hướng dẫn thiết kế là soi mói tiểu tiết chỉ vì một thứ khác kém được hoạch định hoặc kém được tài liệu hóa hơn
    • Đây không phải là guideline cho ứng dụng hay website, mà là hướng dẫn về cách dùng typography khi Bộ Ngoại giao, Bộ Doanh nghiệp và Đổi mới, Bộ Văn hóa, Swedish Institute, Business Sweden, Visit Sweden và nhiều cơ quan họ sử dụng đại diện cho Thụy Điển ở nước ngoài
      Tôi không thấy phần kiểu chữ là lớn bất thường. Tôi từng làm ở một công ty chỉ chuyên tạo sổ tay thiết kế trong 2 năm, và tài liệu được làm tốt thường trông như thế này

  • Gần đây tôi cũng biết đến Finlandica của Phần Lan, và nó khá ổn: https://toolbox.finland.fi/brand-identity-and-guidelines/fin...

    • Tôi không thích chi tiết trên đầu chữ A in hoa. Nếu chỉ dùng hiếm hoi như trong tiêu đề thì có thể đẹp, nhưng xuất hiện ở mọi chữ A thì gây rối mắt
    • Trông thật sự rất đẹp. Nó gần như giống một font đơn cách; nếu chỉnh thêm một chút thì có thể thành một font lập trình rất hay
    • #, &, @ không ổn lắm. A và G cũng kỳ, như thể là hai chữ có trang trí trong một font sans-serif. i và j cũng vậy
      Dù vậy, chữ I được thiết kế để phân biệt với l, điều mà nhiều font khác không làm được

  • Dù bạn có để tâm đến kiểu chữ và thiết kế đến đâu, cũng chẳng có nhiều ý nghĩa nếu cách chào đón khách truy cập lại khó chịu kiểu “bạn thật sự không muốn cookie theo dõi sao?”. Phải bấm hai ô chọn nhỏ, và bên cạnh nút “chỉ cho phép mục đã chọn” bị làm mờ là nút “cho phép tất cả” in đậm đầy tính thù địch với người dùng
    Nếu thật sự muốn cải thiện UX, thì một trong những thứ như thế này đáng được quan tâm hơn

  • Được tạo bởi agency thiết kế Söderhavet ở Stockholm. Xem chi tiết tại đây: https://soderhavet.com/work/sweden/

  • Ở Mỹ có Public Sans: https://public-sans.digital.gov/

  • https://archive.is/7ytlz
    Có vẻ như bị HN traffic làm sập

    • Hơi đáng tiếc là sweden.se dường như không chịu nổi chỉ vài nghìn lượt truy cập trong thời gian ngắn
    • Tôi biết HN không phải diễn đàn hỗ trợ, nhưng không biết có phải chỉ mình tôi gặp thông báo “Safari couldn’t establish a secure connection” trên các trang archive.xx hay không. Tình trạng này đã diễn ra khá lâu rồi

  • Có vẻ đây là kiểu chữ dành cho một trang web tập trung vào việc quảng bá hình ảnh Thụy Điển với người nước ngoài. Tôi sống ở Thụy Điển nhưng hình như chưa từng thấy kiểu chữ này được dùng trong các kênh truyền thông thông thường của cơ quan nhà nước Thụy Điển
    Nếu có thể gọi đó là ngôn ngữ thiết kế của Swedish Tax Agency thì tôi thấy khá thích. Có vẻ họ không dùng Sweden Sans, nhưng tôi không biết chính xác là dùng gì

    • Trang đó do Swedish Institute vận hành
      “Swedish Institute là một cơ quan công lập xây dựng sự quan tâm và niềm tin đối với Thụy Điển trên toàn thế giới. Chúng tôi làm việc về quảng bá Thụy Điển, hợp tác khu vực Baltic và phát triển toàn cầu. […] Hoạt động của SI chủ yếu được hỗ trợ tài chính thông qua phân bổ trực tiếp từ ngân sách nhà nước. SI quản lý khoảng 470 triệu SEK tiền tài trợ của chính phủ Thụy Điển trong bốn lĩnh vực: hợp tác quốc tế, viện trợ quốc tế, giáo dục và nghiên cứu đại học, và kinh doanh.”
      [1] https://si.se/en/about-si/our-mission/
    • Theo tôi biết, Sweden Sans được dùng làm kiểu chữ tiêu đề trên thẻ căn cước quốc gia và hộ chiếu phiên bản mới nhất
    • Quả thật khá thú vị khi ngày nay các quốc gia cũng tự quảng bá bản thân. Và điều đó có hiệu quả. Khi nghĩ đến các nước Bắc Âu, khả năng cao Thụy Điển là cái tên hiện ra đầu tiên
    • Tôi cũng nghĩ đây là một trang quảng bá hình ảnh Thụy Điển. Có nhiều nơi vui chơi và phong cảnh đồng quê, và nếu có mô tô thì đi vòng quanh Thụy Điển cũng không mất quá lâu
      https://www.youtube.com/watch?v=qXiIJ32kaZU
      Có người ở Thụy Điển từng nói với tôi rằng cảnh sát phải bắt được trong ngày mới chứng minh được ai là người lái xe, nhưng tôi vẫn định tiếp tục chạy trên autobahn của Đức. Ở đó ít nai sừng tấm đi lang thang hơn
      ghost rider patrik fürstenhoff

  • Tên là Sweden Sans, nhưng một số chữ như i và l viết thường lại trông như có serif. Tôi không rõ là mình hiểu sai về serif hay là hiểu sai ý nghĩa của sans ở đây

    • Cũng có khá nhiều khoảng linh hoạt. Thiết kế kiểu chữ cũng là một nghệ thuật cảm tính, nên đôi khi nhà thiết kế khéo léo thêm một serif, hoặc có thể đặc tả dự án yêu cầu vì lý do nào đó
      Hồi dạy typography trong những năm 2000, sinh viên của tôi hay chỉ ra những điều như vậy. Trong các ví dụ cho lớp nhập môn, đôi khi người ta dùng phông mà không xem kỹ, rồi sau đó mới vướng vào một chi tiết nào đó
      Nghe lạ nhưng đa số mọi người chọn phông mà không thật sự nghĩ sâu về bản thân kiểu chữ. Họ thậm chí không đọc tên hay quan sát kỹ, mà chỉ nghĩ về thiết kế của mình, suy nghĩ và cảm xúc của mình, thông điệp của mình, hay cơ hội tạo ra một thiết kế ngầu
      Một nhà thiết kế lành nghề cần được rèn luyện để tự hỏi liệu mình có đang ảo giác về mục đích của kiểu chữ hay không. Vì chỉ cần nhìn vài giây là mục đích ban đầu thường đã hiện ra rất rõ. Khi học được cách điều này vận hành, bạn cũng sẽ hiểu rõ vì sao cái slab serif đó lại có mặt ở đây
    • Đây không phải là một nhóm phân loại quá cứng nhắc. Nó gần giống một chỉ dấu cho biết nhà thiết kế xem kiểu chữ đó thuộc về dòng dõi nào hơn
      Nhiều kiểu sans-serif cũng có một chút serif ở các ký tự dễ gây nhầm lẫn như chữ l. Điều này lại càng phổ biến trong ngữ cảnh kỹ thuật, hoặc với kiểu chữ dùng cho mọi nơi như kiểu này
    • Bản thường và bản đậm có lẽ gần với slab serif hơn, còn trọng lượng “book” thì đúng là sans-serif. Có lẽ cách dễ nhất là tải phông xuống và xem các tệp OTF
    • Quả thật nó trông như có pha một chút slab serif. Nói rộng ra thì serif và sans-serif có thể xem là một phổ với hai đầu mút
      Nếu gọi nó là serif thì mọi người sẽ kỳ vọng một kiểu chữ serif rõ rệt hơn nhiều, nên gọi là sans-serif có lẽ đơn giản hơn
    • Thuật ngữ chính xác có lẽ là Slab Serif

  • Pháp cũng có hệ thống thiết kế và kiểu chữ riêng là Marianne: https://www.systeme-de-design.gouv.fr/elements-d-interface/f...

  • Không phải tôi muốn hạ thấp Thụy Điển, nhưng Estonia cũng có thứ tương tự: https://brand.estonia.ee/guidelines/typography/?lang=en

    • Vẻ đẹp tùy vào mắt người nhìn, nhưng nhìn chung phần làm của Thụy Điển khá đẹp và dễ đọc, trong khi guideline của Estonia trông như một ví dụ điển hình về việc điều gì xảy ra khi nhà thiết kế được toàn quyền làm theo ý mình hoặc khi khách hàng quá dễ dãi và chỉ muốn khác biệt.
      Phần giới thiệu mô tả tính cách của thương hiệu Estonia là “nordic, surprising, smart”, nhưng đặc biệt là kiểu chữ Aino dường như tập trung quá mức vào yếu tố surprising đến mức hy sinh khả năng đọc, vì vậy cách thể hiện yếu tố smart rõ ràng bị yếu đi