フォントの話
このCosenseで設定しているフォントは以下のようになっています。
--heading-font: 'Inter', Helvetica, 'Zen Kaku Gothic New', sans-serif;
--text-font: 'Shippori Mincho', yu-mincho-pr6n, YuMincho, 游明朝, 'Yu Mincho',YuMincho, 'Hiragino Mincho ProN', HGS明朝E, serif;
--code-font: 'Fira Code', Monaco, monospace;
見出しフォント
https://gyazo.com/8121526f72aa2c345717d64dd1d404f8
InterはRasmus Anderssonが設計し、2016年ごろの実験的制作を経て2017年に公開されたオープンソースの欧文サンセリフ体で、特にUIや画面上での可読性を主目的に作られた書体である。ピクセルフィットを意識した設計思想から出発し、高いxハイトや豊富なOpenType機能、可変フォントとしての光学サイズ/ウェイト軸を備えることで、画面上の情報伝達を効率化することを狙っている。
・xハイトが高く、小さいサイズでも文字形が判別しやすいこと
・当初11pxでのピクセル適合を目標にした実験から生まれ、ピクセルグリッド上での安定表示を重視していること
・可変フォント(Inter Variable)として光学サイズやウェイトを連続的に制御できること
・スラッシュ付きゼロや区別しやすいI/l/1の字形、開放的なアパーチャ(字穴)など、識別性を高める字形設計を持つこと
・オープンソース(SIL OFL)で広く配布され、Figmaや多くのウェブサービスでUI用フォントとして採用されるなど、機能性を前景に置く姿勢で運用されていること。
参考
Helvetica
HelveticaはMax MiedingerがEduard Hoffmannのディレクションのもと設計し、1957年にスイスのHaas鋳造所から発表された欧文サンセリフ体で、戦後モダニズムの思想を体現する「中立的な書体」として構想された。広告やサイン、企業コミュニケーションなどで情報を均質に伝えることを目的とし、感情や筆跡性を排した構造によって、内容そのものを前面に出す姿勢を貫いている。
・ストロークコントラストを抑え、均質で安定した字形を持つこと
・字面が大きく、行全体が均一なグレーに見えること
・終端処理が直線的で、装飾的な要素を極力排していること
・カウンター(字穴)がやや閉じ気味で、密度の高い印象を与えること
・個性を抑えた設計により、用途や文脈を選ばず使われること
・モダニズム的な合理性と客観性を視覚的に体現していること
参考
Zen Kaku Gothic New
Zen Kaku Gothic Newは、Fontworks(フォントワークス)が設計し、2020年にGoogle Fontsを通じて公開された日本語の角ゴシック体で、既存の「Zen Kaku Gothic」を再設計し、現代的な画面表示と本文用途の両立を強く意識した書体である。無印良品や公共サインにも通じる日本的ミニマリズムの系譜に立ち、過度な感情表現を避けつつ、均質で扱いやすい文字環境を整えることを思想の中心に置いている。
・ストロークの太さを均一に保ち、角ゴシックとしての中立性を強めていること
・かなと漢字のサイズバランスを整理し、行の中での安定感を高めていること
・字面をやや大きめに取り、小サイズ表示でも可読性を確保していること
・角の処理を硬くしすぎず、画面上での視覚的ノイズを抑えていること
・ウェイト展開が豊富で、UIから本文、見出しまで一貫して運用できること
・Google Fontsでの提供を前提とし、Webやアプリケーションでの実用性を優先していること
参考
本文用フォント
Shippori Mincho
Shippori Minchoは、フォントワークスが設計し、2020年にGoogle Fontsを通じて公開された日本語の明朝体で、近世の木版印刷や活字の佇まいを現代のデジタル環境に引き寄せることを目的に作られた書体である。均整の取れた教科書的明朝とは異なり、わずかな揺らぎや柔らかさを残すことで、文章に温度と時間性を与える立場を取っている。
・横画と縦画のコントラストを抑え、全体に穏やかな表情を持つこと
・かなは丸みを帯び、筆致の流れが感じられる設計になっていること
・漢字は骨格を簡潔に整理しつつ、硬さを避けたふところ構成であること
・ウロコやはらいを控えめに処理し、行全体がやさしく連続すること
・小説や随筆など、感情の起伏を含む文章と相性がよいこと
・Google Fontsでの提供を前提とし、印刷と画面の双方で破綻しにくい設計であること
参考
游明朝
游明朝(ゆうみんちょう)は、鳥海修によってデザインされ、字游工房が2002年に発表した日本語の明朝体フォントで、単行本や文庫などの長い文章を組むための明朝体として生まれた。
・かなが小さめであること
・かなの左右幅がバラエティに富んでいて、リズムがあること
・漢字の作りが適度なふところの広さを持っており、目にやさしいこと
・漢字は、現代的な形状をしているのに、両かな(ひらがな、カタカナ)は伝統的な形状をしていること
・漢字の横画の起筆、かなの縦画の起筆がとても特徴的な形状をしていること
・欧文は和文との混植を意識した、広めのサイドベアリングにしたこと
参考
Hiragino Mincho ProN
Hiragino Mincho ProNは、字游工房が設計を担い、1990年代後半から2000年代初頭にかけてApple向けに開発された日本語の明朝体で、Mac OS Xに標準搭載されることを前提に、画面表示と印刷の両立を強く意識して作られた書体である。従来の写植明朝の再現ではなく、アウトラインフォント時代の基準となる「標準的な明朝体」を構築する姿勢が貫かれている。
・縦画をやや太めに設計し、画面上でも線が消えにくい構造になっていること
・かなは整理された現代的な形状で、行内の均質性を優先していること
・漢字は骨格を明確にし、ふところを適度に確保することで小サイズでも視認性を保っていること
・ウロコやはらいは過度に誇張せず、デジタル出力での安定性を重視していること
・文字サイズやウェイト間の設計差が少なく、システムフォントとして扱いやすいこと
・ProNではJIS2004字形に対応し、現代日本語環境での標準性を担っていること
参考
HGS明朝E
HGS明朝Eは、リコー系のHGSフォントファミリーとして1990年代後半に整備された日本語の明朝体で、Windows環境での業務文書や帳票出力を主用途に設計された書体である。印刷結果の安定性と字形の標準性を最優先に据え、個性や表情を抑えた実務的な立場を明確にしている。
・縦横の線幅差を穏やかに保ち、レーザープリンタ出力でも線が破綻しにくいこと
・漢字は教科書的で保守的な骨格を採用し、誤読や違和感を生みにくいこと
・かなは装飾性を抑え、行全体の均質さを優先した設計であること
・ウロコやはらいは控えめで、濃度ムラが出にくいこと
・Eウェイトは本文用として想定され、長文でも疲労を招きにくい濃度に調整されていること
・創作や表現よりも、文書の「正確さ」と「無難さ」を担保する思想に立っていること
参考
コードブロック用フォント
Fira Code
Fira Codeは、MozillaのFira SansをベースにNikita Prokopovが設計し、2015年に公開されたオープンソースの等幅欧文フォントで、主にプログラミング用途を目的として開発された書体である。文字を「読む」ことよりも「構造として把握する」ことを重視し、記号列や演算子の意味が視覚的に即座に理解できる環境を整えるという思想に立っている。
・等幅フォントでありながら、字形のプロポーションを整え、長時間のコード読解でも疲れにくいこと
・!= や => などの記号列を合字(リガチャ)として統合表示し、構文の意味を一目で把握できること
・I/l/1、O/0 などの紛らわしい文字を明確に描き分けていること
・Fira Sans由来の開いた字形と高めのxハイトにより、小サイズでも可読性が高いこと
・リガチャはあくまで視覚表現であり、コードの実体を変更しない設計思想を持つこと
・オープンソースとして継続的に更新され、開発者の実務環境に最適化されていること
参考
Monaco
MonacoはSusan KareとKris Holmesらによって設計され、1984年に初代Macintoshとともに登場した等幅欧文フォントで、画面上でのプログラミングやテキスト編集を主用途として開発された書体である。低解像度のビットマップ環境を前提に、文字を「正確に識別できること」を最優先に据え、初期Macの計算機文化と密接に結びついた思想を持つ。
・等幅設計により、文字位置の把握やコードの整列が直感的であること
・ビットマップ起源の骨格を持ち、小さなサイズでも字形が崩れにくいこと
・I/l/1、O/0などの識別を明確にし、誤読を避ける設計であること
・ストロークは簡潔で、装飾性を極力排した構造になっていること
・現代的な可変性や合字は持たないが、視覚的な即物性と反応速度を重視していること
・macOSの開発環境や端末文化の記憶と結びつき、機能主義的等幅書体の原型として位置づけられること
参考