Shantell Sans (2023)

 (shantellsans.com)
1 điểm bởi GN⁺ 2 giờ trước | 1 bình luận | Chia sẻ qua WhatsApp
  • Shantell Sans cung cấp các trục Weight, Italic, Informality, Bounce, Spacing, từ kiểu chữ dùng hằng ngày đến phong cách thử nghiệm cho hoạt họa
  • Bắt nguồn từ chữ viết tay của Shantell Martin và trải nghiệm chứng khó đọc, phông chữ này hướng tới khả năng tiếp cận vui nhộn, tinh nghịch nhưng vẫn có thể dùng chuyên nghiệp
  • Tham khảo tính phổ biến và cảm giác dễ đọc của Comic Sans, nhưng không phải tác phẩm phái sinh; đây là việc hệ thống hóa chữ viết tay bằng bút dạ đầu nỉ thành phông chữ số
  • Khả năng đọc được cải thiện nhờ metric gần với Roboto, độ rộng glyph và khoảng cách chữ rộng, cùng thiết kế phân biệt rõ b·d·p·q và I·1
  • Được phát hành miễn phí qua Google Fonts và giấy phép OFL, hỗ trợ hơn 380 ngôn ngữ dựa trên Latin và Cyrillic, đồng thời dùng được trong Google Docs

Điểm khởi đầu của Shantell Sans

  • Shantell Sans là phông chữ biến thiên được tạo dựa trên chữ viết tay của Shantell Martin, đồng thời cung cấp phong cách thân thiện cho sử dụng hằng ngày và phong cách thử nghiệm phù hợp với hoạt họa
  • Khi còn nhỏ, Shantell Martin từng không vượt qua các bài kiểm tra chính tả và phải ngồi detention, nhưng cô vẫn yêu thích từ ngữ và luôn thể hiện cảm xúc qua chữ viết và hình vẽ
  • Đến năm 20 hoặc 21 tuổi, cô mới biết mình mắc chứng khó đọc, và khi bắt đầu học nghệ thuật tại Central Saint Martins, cô cảm nhận rằng rất nhiều người sáng tạo cũng có chứng khó đọc
  • Cô từng thất vọng vì những giáo viên không nhận ra khó khăn trong việc đọc và viết đã trừng phạt thay vì hỗ trợ, và phông chữ dựa trên nét chữ và con chữ của riêng cô trở thành một cách để mọi người có thể đọc và viết, bất kể mối quan hệ của họ với từ ngữ ra sao
  • Mục tiêu là tạo ra một phông chữ vui vẻ, tinh nghịch nhưng vẫn chuyên nghiệp và hữu dụng, đồng thời là một phông chữ dễ tiếp cận gợi nhớ rằng từ ngữ cũng là hình ảnh và có thể tồn tại theo cách riêng của mỗi người
  • Stephen Nixon đã gửi một mẫu có kẻ dòng để viết tay bảng chữ cái Latin, chữ số và ký hiệu, rồi dùng chính những mẫu chữ viết tay đó để tạo ra phông chữ số

Phát hành công khai và các nơi sử dụng ban đầu

  • Giấy phép Open Font License giúp Shantell Sans được phát hành để nhiều người có thể tiếp cận mà không tốn phí, và hình thức phân phối công khai như giải thích giấy phép của Google Fonts giúp tăng tính hữu dụng
  • Việc cung cấp miễn phí cho phép phông chữ được dùng rộng rãi qua Google Fonts và các nền tảng khác, đồng thời một kiểu chữ do nghệ sĩ đương đại tạo ra có thể khơi gợi cảm hứng làm typography cho những nghệ sĩ khác
  • Shantell Sans mang tính cá nhân rất mạnh vì dựa trên chữ viết tay của Shantell Martin, nhưng phát hành công khai cũng đồng nghĩa với việc buông bỏ quyền kiểm soát đối với những yếu tố vốn rất riêng tư
  • Họ mong trẻ em và thanh thiếu niên sẽ dùng Shantell Sans và biết đến câu chuyện tạo ra nó, đồng thời nó có thể được dùng theo những cách không ngờ tới trong cả dự án cá nhân lẫn dự án thiết kế quy mô lớn

  • Các ứng dụng ban đầu

Mục tiêu thiết kế và ảnh hưởng từ Comic Sans

  • Stephen Nixon nhớ đến các bức tranh tường khổ lớn của Shantell Martin cùng nét vẽ khám phá, gần như ngẫu hứng và tinh nghịch của cô khi nhận được liên hệ rằng Shantell muốn một “kiểu chữ hữu dụng, đẹp về thị giác, thông minh và sáng tạo”
  • Cụm từ muốn tạo ra một “Comic Sans mới” là manh mối quan trọng, nhưng đây không phải dự án phái sinh trực tiếp hay tạo phiên bản mới của Comic Sans, mà chỉ tham khảo tính phổ quát văn hóa và phản ứng cảm xúc mà Comic Sans gợi ra
  • Comic Sans được Vincent Connare thiết kế cho Microsoft Bob vào năm 1994, sau đó được cài sẵn trên hệ điều hành Windows và Mac và được sử dụng rất rộng rãi
  • Comic Sans từng xuất hiện ở nhiều nơi, từ thẻ của Ty Beanie Babies thế hệ thứ 5 trở đi cho đến thông báo của CERN năm 2012 về hạt Higgs Boson

  • Năm tiêu chí

    • Phải hấp dẫn với người dùng phổ thông, chứ không chỉ là phông chữ dành cho người mê typography
    • Phải dễ dùng để viết trong nhiều hình thức giao tiếp khác nhau
    • Phải có thể được dùng bởi nhiều nhóm người và dễ tiếp cận
    • Phải có độ dễ đọc cao và dễ nhìn
    • Phải làm điều gì đó mới thay vì lặp lại lãnh địa sẵn có

Thiết kế và chế tác dựa trên Latin

  • Sức hút đời thường

    • Để có sức hút đời thường, phông chữ này lấy nền tảng từ chữ viết tay bằng bút dạ đầu nỉ như Comic Sans, với điểm khởi đầu là chữ viết tay của Shantell Martin
    • Một số đặc điểm của nét chữ tay được giữ lại, nhưng ấn tượng tổng thể được đơn giản hóa để phù hợp với hình thức số

  • Dễ dùng trong nhiều hoàn cảnh

    • Để phù hợp với tỷ lệ và kỳ vọng phong cách phổ biến của phông chữ hiện đại, các font metric như cap-height, x-height và line height cơ bản được đặt gần với các phông dùng rộng rãi như Roboto
    • Để duy trì khả năng đọc dễ dàng và phù hợp với sự nhất quán thị giác trong nét chữ của Shantell, nhóm thiết kế dùng độ rộng glyph và khoảng cách chữ hơi lớn hơn mức trung bình
    • Phông chữ được tạo ra để dễ dùng trong các môi trường hằng ngày như website, app và bản trình bày, thể hiện cá tính ở cỡ lớn nhưng vẫn hoạt động tốt ở phần thân bài cỡ nhỏ

  • Hỗ trợ ngôn ngữ và phân phối

    • Shantell Sans tuân theo và nhỉnh hơn đôi chút so với bộ glyph Google Fonts Latin Plus và Cyrillic Plus, hỗ trợ hơn 380 ngôn ngữ sử dụng chữ Latin và Cyrillic
    • Phạm vi hỗ trợ trải dài trên các ngôn ngữ dùng Latin và Cyrillic ở châu Âu, châu Mỹ và Trung Á
    • Nhờ được Google Fonts hỗ trợ và phát hành theo giấy phép OFL, đây có thể được phân phối như một phông chữ mã nguồn mở dùng miễn phí

  • Phân biệt ký tự để dễ đọc

    • b, d, p, q và n, u được thiết kế để phân biệt với nhau bằng độ tương phản hình dạng đơn giản và các nét kết thúc được đặt hợp lý
    • Vì Shantell Martin đôi khi viết chữ hoa I và số 1 chỉ bằng một nét thẳng, nhóm thiết kế thêm serif cho chữ hoa I và thêm flag cho 1 để tách biệt chúng
    • Đúng với bản chất của phông chữ dựa trên chữ viết tay, a và g dùng dạng single-story mà trẻ em thường học ở trường, giúp giữ cảm giác thân thuộc và quen mắt

  • Trục biến thiên và tính năng OpenType

    • Không chỉ cần một dải độ đậm tốt, phông chữ còn phải cung cấp phạm vi phong cách rộng dưới dạng phông chữ biến thiên cho các nhà thiết kế và lập trình viên muốn khám phá tính năng typography hiện đại
    • Để đưa không khí tự do, hữu cơ trong tác phẩm của Shantell Martin vào các trục thử nghiệm, nhóm đã tạo năm trục biến thiên: Weight, Italic, Informality, Bounce và Spacing
    • Các tính năng OpenType như tabular vs proportional figures, fractions và localized forms cũng được đưa vào để đáp ứng những nhu cầu typography tinh chỉnh
    • Nhóm tham khảo chi tiết thủ công của các phông chữ dựa trên chữ viết tay như Inkwell, Cortado và Studio Lettering, nhằm tránh việc chỉ tạo thêm một phông bút dạ được auto-trace

Quyết định hình dạng và các trục thử nghiệm

  • Shantell Martin chọn bút dạ đầu nỉ cỡ trung bình Staedtler Lumocolor M để viết pangram chữ hoa và chữ thường, chữ số, dấu câu, ký hiệu và một vài từ có ký tự dấu
  • Bản quét được tracing theo đường trung tâm của nét bút rồi mở rộng thành các nét Light và ExtraBold
  • Vì chữ viết tay gốc có biến thiên về kích thước và nhịp điệu nhiều hơn các phông thường dùng để đọc, chiều cao, độ rộng và khoảng cách chữ đã được chuẩn hóa và điều chỉnh nhất quán ở một mức độ nhất định
  • Các đặc điểm như nét ngang của t và f không vươn sang bên trái của nét dọc chính, A và R bắt đầu từ góc trên bên trái, P là một vòng lặp đơn giản bắt đầu từ phía dưới bên trái, còn M và W là những làn sóng liên tiếp, đều được giữ lại
  • Hướng cuối cùng là giữ lại một chút sắc cạnh và tương phản làm nên sự thú vị trong nét chữ của Shantell, đồng thời làm độ dày đồng đều hơn đôi chút và áp dụng các đầu nét bán nguyệt mềm mại
  • Sự cân bằng này giúp giữ lại cảm giác chữ viết bằng bút marker mà vẫn khiến hình dạng số trở nên dễ tiếp cận và ấm áp

  • Bounce và Informality

    • Dựa trên phông cơ sở đã được chuẩn hóa, nhóm tạo thêm các phong cách tái đưa vào những bất quy tắc từ các mẫu chữ viết tay đã quét
    • Các bất quy tắc này không hoàn toàn ngẫu nhiên mà có tính chất lặp lại; những chữ có nhiều nét ngang có xu hướng cao hơn, còn những chữ có nhiều nét dọc có xu hướng rộng và thấp hơn
    • Để phông chữ không trở nên quá hỗn loạn và mất đi tính hữu dụng, cần có sự cân bằng giữa việc tăng thêm cá tính và vẫn giữ nó trông “giống một phông chữ”
    • Nguồn vẽ tay và nguồn có thể build được được tách riêng để tạo thành các trục Bounce và Informality của phông cuối cùng
    • Kiểu Bounce được tạo bằng script dịch các glyph lên xuống, còn kiểu Informal được tạo bằng cách nội suy giữa nguồn chính đã “chuẩn hóa” và nguồn chính “bất quy tắc”
    • Mọi nguồn đều chứa nhiều glyph thay thế cho chữ cái, chữ số và ký hiệu chính, và phông cuối cùng xoay vòng các glyph thay thế này theo cách giả ngẫu nhiên để trông như chữ viết tay giàu năng lượng
    • Vì là các trục biến thiên, hiệu ứng có thể được điều chỉnh từ rất nhẹ đến rất nổi bật, đồng thời cho phép dễ dàng dùng chữ động với thiết kế gắn kết trong cùng một hệ thống phông

  • Mở rộng nhờ Google Fonts và mã nguồn mở

    • Vì Shantell Martin quan tâm đến việc phát hành mã nguồn mở, nhóm đã thảo luận liệu Google Fonts có thể tài trợ cho việc mở rộng tới nhóm người dùng rộng hơn hay không
    • Nhờ hỗ trợ từ Google Fonts, toàn bộ bộ kiểu Italic đã được tạo thêm để mở rộng phạm vi phong cách
    • Một trục Spacing mang tính thử nghiệm cũng được bổ sung, hữu ích khi phần mềm không hỗ trợ điều chỉnh khoảng cách chữ theo mặc định
    • Bộ chữ Latin được mở rộng để hỗ trợ ký tự tiếng Việt và nhiều ký hiệu tiền tệ hơn, còn phần bổ sung Cyrillic cho phép hỗ trợ một tập ngôn ngữ hoàn toàn mới

Thiết kế chữ Cyrillic của Shantell Sans

  • Cyrillic là hệ chữ được dùng trong nhiều ngôn ngữ ở lục địa Á-Âu như tiếng Bulgaria, tiếng Serbia, tiếng Nga, tiếng Belarus, tiếng Ukraina, tiếng Tatar và tiếng Bashkir
  • Quá trình thiết kế Cyrillic tương đối giống với thiết kế Latin, nhưng có thể khó hơn khi làm với các hình dạng phi truyền thống lấy cảm hứng từ chữ viết tay của một cá nhân cụ thể
  • Việc thiết kế một hệ chữ khác cho kiểu chữ viết tay cũng giống như dịch thơ: phải giữ được giọng điệu riêng trong khi sử dụng cấu trúc của ngôn ngữ đích
  • Cyrillic có các dạng upright hoặc “printed”, italic và cursive, và một số dạng italic cùng cursive có cấu trúc khác với dạng printed thông thường
  • Chữ viết tay của Shantell Martin pha trộn giữa dạng cursive và printed, nhưng vì cô chỉ viết Latin, nhóm phải quyết định ký tự Cyrillic nào nên chuyển theo hướng cursive và ký tự nào nên theo printed
  • Nhóm đã nhờ Shantell Martin viết vài câu tiếng Nga để xem cô tiếp cận các hình dạng lạ như thế nào, đồng thời đưa ra các ví dụ khác nhau cho cùng một chữ cái và để cô viết lặp lại một số từ nhiều lần
  • Nhóm cũng tham khảo ý kiến các nhà thiết kế chữ Cyrillic Maria Doreuli, Krista Radoeva và Alexei Vanyashin, và cảm nhận về hình dạng đúng sai phần lớn đều trùng khớp
  • Tiếng Bulgaria và tiếng Serbia có những dạng quy ước khác với Cyrillic cơ bản; ví dụ chữ t trong tiếng Bulgaria thường có hình giống chữ Latin m, nên trong phong cách này cần điều chỉnh để tránh lẫn với Cyrillic m
  • Những chữ như nje trong tiếng Serbia cần khiến cả chữ hoa lẫn chữ thường trông tự nhiên với người đọc bản ngữ, và nhóm cũng tham khảo Jovana Jocić cho phần tiếng Serbia
  • Công việc với Cyrillic bao gồm rất nhiều bài toán thiết kế, nhưng kỳ vọng là nó sẽ hữu ích không chỉ trong dàn trang Latin mà cả trong typography của nhiều ngôn ngữ Cyrillic khác nhau

Cách sử dụng và liên kết tham khảo

  • Shantell Sans on Google Fonts: có sẵn trên Google Fonts
  • open-source repo: tải phiên bản mới nhất
  • Cũng có thể dùng trong Google Docs, Slides và các sản phẩm Workspace khác

  • Thêm trong Google Workspace

    • Mở menu phông chữ trong tài liệu và nhấp vào “More Fonts”
    • Tìm “Shantell Sans” trong bảng popup mở ra
    • Nhấp vào họ phông chữ để thêm vào menu phông chữ
    • Google Material Design Blog: có phiên bản rút gọn

Bài viết liên quan

1 bình luận

 
GN⁺ 2 giờ trước
Ý kiến trên Hacker News

  • Khi xem mẫu đa ngôn ngữ ở khoảng giữa bài, tôi nhận ra các glyph chữ Kirin của bộ font này rất xuất sắc
    Thường khi thử font mới, chữ Kirin không đẹp bằng chữ Latin; ngoại lệ hiếm hoi thường chỉ là các font từ những foundry ở khối dùng chữ Kirin như ParaType
    Phần một phần ba cuối bài đi khá chi tiết vào cách họ đạt được điều này
    https://www.paratype.com/fonts/pt/yefimov-sans?tab=gallery

  • Thanh trượt độ trang trọng có thể nghịch trên trang Google Fonts được liên kết trong bài là một ví dụ thật sự rất hay về cách tận dụng trục của font biến đổi mà tôi thấy gần đây
    Nó cho cảm giác như đang chứng kiến Metafont chậm rãi nhưng đều đặn được đánh giá lại
    https://fonts.google.com/specimen/Shantell+Sans

    • Dash của Typotheque cũng có một trục biến đổi gần như tương tự, ở đó họ gọi là ‘Speed’: https://www.typotheque.com/fonts/dash-casual
      Không hiểu sao phải bấm vào ô ‘Variable’ mới xem được toàn bộ dải biến đổi
    • Cái đó mới là đỉnh nhất. Thậm chí còn có cả thanh trượt “bounce”
      Thật không thể tin là chúng ta đang sống trong thời đại này… tôi tự hỏi còn có font nào khác có kiểu tinh chỉnh đặc biệt như vậy không
      Tôi vẫn đang chờ công nghệ có thể tạo ra font chữ viết tay với tính ngẫu nhiên thực sự
    • Tôi không rành Metafont lắm, có phải ý bạn là cái này không? https://ctan.org/pkg/metafont?lang=en
    • Khoan đã, nghĩa là nếu làm nó bớt trang trọng hơn nữa thì ngay trong cùng một câu, glyph riêng lẻ của cùng một ký tự cũng có thể khác nhau à?

  • Bộ font này rất tuyệt. Chỉ là tôi vẫn thấy thiếu glyph biến đổi như một bước tiến kỹ thuật xa hơn
    Cảm giác đang đọc chữ viết tay sẽ mất đi nếu các chữ cái lúc nào cũng có cùng một hình dạng
    Nếu có thể thêm 5–6 biến thể nhỏ cho mỗi chữ cái rồi cho chúng luân phiên ngẫu nhiên thì sẽ cực kỳ hay

  • Thật ngạc nhiên là đến giờ tôi mới lần đầu thấy font như thế này. Tôi đã dùng khá nhiều font kiểu Comic Sans, và đây rõ ràng là font đẹp nhất tôi từng thấy trong số đó

  • Sự giống nhau với Comic Sans quá rõ nên điều đầu tiên tôi làm trong bài là Ctrl-F tìm “comic”
    Ý nghĩ đầu tiên của tôi là họ đã đẩy ý tưởng này đi xa đến mức nào
    Cách các lần nhắc đến Comic Sans được phân bố trong bài cũng khá thú vị: khoảng mốc 30% thì nó xuất hiện nhiều lần như thể thừa nhận dòng dõi rõ ràng, rồi sau đó gần như không còn nhắc nữa
    Font này thực sự đã đi xa hơn, và rất đẹp

  • Có lạ không nếu tôi muốn một phiên bản đơn cách của font này? Nó thật sự rất ngầu và có vẻ được thiết kế rất tốt

    • Dạo này tôi khá thích Recursive Mono Casual. Hình như tôi tải từ Google Fonts
      https://www.recursive.design
      https://fonts.google.com/specimen/Recursive?preview.script=L...
    • Tôi đang dùng cái này và rất thích. Không hoàn toàn giống, cũng không miễn phí, nhưng theo tôi nó được làm cực kỳ đẹp
      https://tosche.net/fonts/codelia
    • Tôi cũng đã thật sự mong có phiên bản đơn cách
      Khi lập trình tôi đã dùng một font đơn cách lấy cảm hứng từ Comic Sans được một thời gian, và thấy nó có khả năng đọc rất tốt
      Font này đẹp đến mức tôi rất muốn thấy nó cả trong terminal
    • Gần đây tôi thấy Annotation Mono; nó không phi trang trọng bằng Shantell Sans nhưng vẫn có cảm giác chữ viết tay
      https://qwerasd205.github.io/AnnotationMono/

  • Con gái tôi bị chứng khó đọc và bé rất hài lòng với font này. Trong ví dụ, bé rõ ràng thích font này hơn Roboto

    • Tôi không bị chứng khó đọc, nhưng ngay cả trong ví dụ với Roboto tôi cũng cảm nhận rất rõ sự khác biệt về khả năng đọc
      Sau khi đã quen với Shantell Sans đến mức đó, Roboto gần như trở nên khó đọc

  • Ôi, nó xấu đến mức khó mà diễn tả nổi là xấu đến đâu

  • Mới nhìn lần đầu mà nó đã trở thành font chữ viết tay tôi thích nhất. Làm rất xuất sắc

  • Nó giống như một tác phẩm nghệ thuật tuyệt đẹp do ngành tương tác người-máy tạo ra
    Dùng tốt ngay cả trong những ngữ cảnh mà Comic Sans có thể trông hơi như một trò đùa