Shantell Sans (2023)
(shantellsans.com)- Shantell Sans は、Weight、Italic、Informality、Bounce、Spacing の各軸により、日常使いの書体からアニメーション向けの実験的なスタイルまで提供する
- Shantell Martin の手書きと ディスレクシア の経験を出発点とし、楽しく遊び心がありながらも、プロフェッショナルに使えるアクセシビリティを目標としている
- Comic Sans の普遍性と読みやすい印象を参考にしているが派生作品ではなく、フェルトペンの手書き をデジタル書体として整理したもの
- Roboto に近いメトリクス、広めのグリフ幅と字間、識別しやすい b·d·p·q と I·1 の設計により可読性を高めている
- Google Fonts と OFL 公開により無料配布され、Latin・Cyrillic ベースの 380以上の言語 と Google Docs での利用をサポートする
Shantell Sans の出発点
- Shantell Sans は Shantell Martin の手書きをもとに作られた可変フォントで、親しみやすい日常向けスタイルと、アニメーションに合う実験的スタイルをあわせて提供する
- Shantell Martin は幼いころ、スペリングテストに合格できず detention に座らされていたが、言葉は好きで、文章と絵で感情を表現してきた
- 20歳か21歳のときに ディスレクシア があることを知り、Central Saint Martins で芸術の学位課程を始める中で、多くのクリエイティブな人々がディスレクシアを持っていると感じた
- 読み書きの困難に気づかなかった教師たちが、支援ではなく罰を与えていたことへの失望があり、自分の字や文字をもとにした書体は、言葉との関係がどうであれ人々が読んだり書いたりできるようにする方法になった
- 目標は、楽しく遊び心がありながら プロフェッショナルで実用的な 書体を作ることであり、言葉が絵であり、それぞれのやり方で存在できることを思い出させるアクセシブルな書体を望んでいた
- Stephen Nixon は、Latin アルファベット、数字、記号を手書きするためのガイド線付きテンプレートを送り、その手書きを使ってデジタル書体を作った
公開配布と初期の使用先
- オープンフォントライセンス で Shantell Sans を公開し、より多くの人が費用なしでアクセスできるようにした。Google Fonts のライセンス説明 のような公開配布の仕組みは有用性を高める
- 無料提供により Google Fonts や他のプラットフォームを通じて広く使えるようになり、生きているアーティストが作った書体が、ほかのアーティストのタイポグラフィ制作を刺激しうる
- Shantell Sans は Shantell Martin の手書きに基づくため個人的な性格が強いが、公開配布は本質的に自分のものである要素へのコントロールを手放すことでもある
- 子どもや若者が Shantell Sans を使い、その制作背景を知ることを望んでおり、個人プロジェクトにも、より大きなデザインプロジェクトにも、予想外の形で使われうる
-
初期の適用先
- Whitney Museum shop のキータグデザインでは Shantell Sans タイプが使われ、制作は Various Keytags が担当した
- Cash App の仕事では、Cash Card 裏面の cash tag、数字、そのほかの情報に Shantell Sans が使われている
- コラボレーション描画 Web アプリ tldraw は Shantell Sans をデフォルトフォントとして使用している
- 携帯電話で Web サイトを作れるアプリ univer.se は Shantell Sans を Web ビルド用テンプレートに使用している
- Shantell Sans は Google Fonts、Google Docs、GitHub オープンリポジトリのダウンロード から利用できる
デザイン目標と Comic Sans の影響
- Stephen Nixon は、Shantell Martin が「使いやすく、見た目がよく、賢く、創造的な書体」を望んでいると連絡してきたとき、Shantell の大きな壁画や、探究的で半即興的で遊び心のある線の仕事を思い浮かべた
- 「新しい Comic Sans を作りたい」という表現が重要な手がかりであり、Comic Sans の文化的な普遍性と感情的反応を参考にしつつも、直接の派生や新バージョンを作るプロジェクトではなかった
- Comic Sans は Vincent Connare が 1994 年に Microsoft Bob のために設計し、Windows と Mac のオペレーティングシステムにプリインストールされて広く使われた
- Comic Sans は Ty Beanie Babies の第5世代以降のタグから、ヒッグス粒子に関する 2012年の CERN 発表 まで、さまざまな場所で使われてきた
-
5つの基準
- 日常ユーザー に訴求する必要があり、タイポグラフィ愛好家だけのためのフォントであってはならなかった
- さまざまなコミュニケーションで 書きやすく使いやすい 必要があった
- 幅広い人々が使え、アクセシブルである必要があった
- 可読性が高く、読みやすい必要があった
- 既存領域の繰り返しではなく、新しいことをする必要があった
ラテン系デザインと制作
-
日常的な魅力
- 日常的な魅力のために、Comic Sans のように フェルトペンの手書き をベースにし、Shantell Martin の手書きが出発点となった
- 手書きの一部の特徴は残しつつ、全体の印象はデジタル形状に合わせて単純化した
-
幅広い用途での使いやすさ
- 現代フォントに一般的な比率やスタイルの期待に合わせるため、cap-height、x-height、基本の行高といった フォントメトリクス を Roboto のような広く使われる書体に近く設定した
- 読みやすさを保ちつつ Shantell の文字との視覚的一貫性を合わせるため、平均よりやや広いグリフ幅と字間を用いた
- Web サイト、アプリ、プレゼンテーションのような日常的な環境で使いやすく、大きなサイズでは個性が現れ、小さな本文でも機能するように作られている
-
言語サポートと配布
- Shantell Sans は Google Fonts のグリフセット Latin Plus と Cyrillic Plus に従い、ややそれを上回る範囲を備え、Latin および Cyrillic スクリプトを使う 380 以上の言語をサポートする
- 対応範囲は、ヨーロッパ、アメリカ大陸、中央アジアの Latin および Cyrillic ベース言語に及ぶ
- Google Fonts の対応と OFL ライセンスでの公開により、無料で使える オープンソースフォント として配布できた
-
読みやすい字形の識別
- b, d, p, q と n, u は、単純な形状コントラストと適切に配置した終筆によって互いに識別できるよう設計した
- Shantell Martin は大文字の I と数字の 1 を一本線で書くこともあったため、大文字の I にはセリフを追加し、1 には flag を追加して区別した
- 手書きベースの書体らしく、a と g には学校で子どもが学ぶ single-story 形を使い、親しみやすく見慣れた印象を保った
-
変数軸と OpenType 機能
- 良好なウェイト範囲だけでなく、現代的なタイポグラフィ機能を探るデザイナーや開発者のために、可変フォント として広いスタイル範囲を提供する必要があった
- Shantell Martin の作品にある自由で有機的な雰囲気を実験的な軸として取り込むため、Weight、Italic、Informality、Bounce、Spacing の 5 つの変数軸を作った
- 細かなタイポグラフィ要件のため、tabular vs proportional figures、fractions、localized forms といった OpenType 機能も含めた
- Inkwell、Cortado、Studio Lettering のような手書きベース書体の工芸的ディテールを参考にし、フェルトマーカー書体を自動トレースしてもう 1 つ作るだけのやり方は避けた
形の決定と実験的な軸
- Shantell Martin は中程度の太さのフェルトペン Staedtler Lumocolor M を選び、大文字・小文字の pangram、数字、句読点、記号、アクセント付き文字を含むいくつかの単語を書いた
- スキャン画像はペンのストローク中心線に沿ってトレースしたうえで、Light と ExtraBold のストロークへ拡張した
- 元の手書きには、一般的に読むためのフォントよりも大きなサイズやリズムの変化があったため、文字の高さ・幅・間隔をある程度正規化し、一貫して調整した
- t と f の横画が主たる縦画の左側へ出ないこと、A と R が左上から始まること、P が左下から始まる単純なループであること、M と W が連続した波形であることは維持した
- 最終的な方向性は、Shantell の文字を面白くしているわずかな鋭さとコントラストを残しつつ、太さをやや均一にし、滑らかな半円形の端を適用することだった
- このバランスにより、マーカー文字の感覚 を保ちながらも、デジタル形状でアクセシブルかつ温かく見えるようになった
-
Bounce と Informality
- 正規化したベースフォントをもとに、スキャンした手書きサンプルの不規則性を再導入した追加スタイルを作成した
- 不規則性は完全なランダムではなく繰り返し現れる特徴を持ち、横画の多い文字はより高く、縦画の多い文字はより広く低く見える傾向があった
- フォントが混乱しすぎて実用性を失わないように、より多くの個性を加えつつも「フォントらしさ」を保つバランスが必要だった
- 手描きソースとビルド可能なソースを分離し、最終フォントの Bounce と Informality 軸を作った
- Bounce スタイルはグリフを上下に移動させるスクリプトで生成し、Informal スタイルは「正規化された」メインソースと「不規則な」メインソースの間を補間して生成した
- すべてのソースには文字、数字、主要記号の複数の代替グリフが含まれており、最終フォントではこれらの代替グリフを擬似乱数的に巡回させることで、エネルギーのある手書きのように見せている
- 可変軸であるため、効果を控えめな段階から強い段階まで調整でき、フォントシステムの中で統一感のあるデザインの アニメーションタイプ を簡単に使える
-
Google Fonts とオープンソース拡張
- Shantell Martin がオープンソース公開に関心を持っていたため、Google Fonts がより広いユーザー層向けの拡張支援をできるか議論した
- Google Fonts の支援により、完全な Italic スタイルセットを作成してスタイル範囲を拡張した
- ソフトウェアがデフォルトで字間調整をサポートしない場合に役立つ可能性がある実験的な Spacing 軸を追加した
- Latin スクリプトはベトナム語文字やより多くの通貨記号へ拡張され、Cyrillic の追加によってまったく新しい言語群をサポートするようになった
Shantell Sans のキリル文字デザイン
- Cyrillic は、ブルガリア語、セルビア語、ロシア語、ベラルーシ語、ウクライナ語、タタール語、バシキール語など、ユーラシアの多くの言語で使われる文字体系である
- Cyrillic のデザイン過程は Latin のデザインと比較的似ているが、特定の人物の手書きに着想を得た非伝統的な形では、より難しくなりうる
- 手書き書体で別の文字体系を扱う作業は詩の翻訳に似ており、固有のトーンを保ちながら対象言語の構造を使わなければならない
- Cyrillic には upright または「printed」、italic、cursive の形があり、一部の italic や cursive 形は一般的な printed 形と構造が異なる
- Shantell Martin の手書きは cursive と printed の形が混ざっているが、Latin しか使わないため、どの Cyrillic 文字を cursive にし、どの文字を printed に移すかを決める必要があった
- Shantell Martin にロシア語の文をいくつか書いてもらい、見慣れない形へどうアプローチするかを確認した。同じ文字について異なる形の例を示し、いくつかの単語を何度も書いてもらった
- Cyrillic タイプデザイナー Maria Doreuli、Krista Radoeva、Alexei Vanyashin に相談し、正しい形と誤った形に対する感覚はおおむね一致していた
- ブルガリア語とセルビア語には基本 Cyrillic と異なる慣用形があり、たとえばブルガリア語の t は通常 Latin の m と同じ形なので、このスタイルでは Cyrillic の m と混同されうるため調整が必要だった
- セルビア語の nje のような文字は、大文字も小文字もネイティブ読者に自然に見える必要があり、セルビア語のために Jovana Jocić にも相談した
- Cyrillic の作業には多くのデザイン上の難題が含まれていたが、Latin だけでなくさまざまな Cyrillic 言語の組版でも有用に使われることを期待している
使い方と参考リンク
- Shantell Sans on Google Fonts: Google Fonts で利用可能
- open-source repo: 最新版をダウンロード
- Google Docs、Slides、その他の Workspace 製品でも利用できる
-
Google Workspace で追加する
- ドキュメントでフォントメニューを開き、「More Fonts」をクリックする
- 開いたポップアップパネルで「Shantell Sans」を検索する
- フォントファミリーをクリックしてフォントメニューに追加する
- Google Material Design Blog: 簡略版あり
1件のコメント
Hacker Newsの意見
記事の中ほどにある多言語サンプルを見ていて、このフォントのキリル文字グリフが素晴らしいことに気づいた
新しいフォントを試すと、たいていキリル文字はラテン文字ほど良くないことが多く、例外は ParaType のようなキリル文字圏のファウンドリのフォントくらいだった
記事の最後の3分の1では、これをどう実現したのかが詳しく扱われている
https://www.paratype.com/fonts/pt/yefimov-sans?tab=gallery
記事にリンクされている Google Fonts のページで触れるフォーマルさスライダーは、最近見た可変フォント軸の活用例の中でも本当にすごい
Metafont がゆっくりと着実に再評価されている場面を見ているような気分になる
https://fonts.google.com/specimen/Shantell+Sans
なぜか可変範囲全体を見るには「Variable」ボックスをクリックしないといけない
こんな時代に生きているとは……こういう特殊な調整があるフォントが他にもあるのか気になる
本当にランダム性を持つ手書きフォントを可能にしてくれる技術を、いまだに待っている
フォントは素晴らしい。ただ、技術的にもう一歩進んだ可変グリフがないのは惜しい
手書きを読んでいる感覚は、文字がいつも同じ形だと失われてしまう
文字ごとに小さな変形を5〜6種類入れてランダムに切り替えられたら、本当にすごいと思う
https://copypaste.wtf/TT2020/docs/moreinfo.html https://copypaste.wtf/TT2020/docs/moreinfo2.html
こういうフォントを今まで見たことがなかったのが驚きだ。Comic Sans 系のフォントはかなりたくさん扱ってきたが、これは今まで見た中で間違いなく最も美しいフォントだ
Comic Sans との類似性があまりにも明白だったので、記事で最初に Ctrl-F で「comic」を検索した
最初に思ったのは、このコンセプトをどこまで押し進めたのかということだった
記事の中でのComic Sansへの言及の分布も興味深く、30%あたりで明白な系譜を認めるように何度も出てきて、その後はほとんど出てこない
このフォントは実際にさらに先へ進んでいて、美しい
このフォントの等幅版が欲しいと思うのは変だろうか？ 本当にすばらしくて、設計もよくできているように思う
https://www.recursive.design
https://fonts.google.com/specimen/Recursive?preview.script=L...
https://tosche.net/fonts/codelia
コーディングのときに Comic Sans に着想を得た等幅フォントをしばらく使ってきたが、可読性がとても高いと思う
このフォントはあまりに美しいので、ターミナルでもぜひ見てみたい
https://qwerasd205.github.io/AnnotationMono/
失読症のある娘がとても満足していた。例では明らかにRobotoよりこのフォントを好んでいる
その時点までに Shantell Sans に慣れていたので、Roboto はほとんど読みにくく感じられた
うわ、あまりにも醜くて、どれほど醜いか説明するのも難しいほどだ
初めて見たのに、もう自分のいちばん好きな手書きフォントになった。素晴らしい仕事だ
人間とコンピュータの協働が生んだ美しい芸術作品のようだ
Comic Sans が少し揶揄のように見えてしまう文脈でも、十分に使える