高品質なフォントから得られる利点

 (sinja.io)
9 ポイント 投稿者 GN⁺ 2024-09-11 | 4件のコメント | WhatsAppで共有
  • フォントの隠れた機能: 可変軸、代替グリフ、スタイル代替、スワッシュ、数字、スモールキャップ、文脈依存の代替

可変軸

  • OpenType フォントは1つ以上の軸を持つことができ、軸の値を変更してフォントの見た目を変えられる
  • 最も一般的な軸は wght で、フォントの太さを調整する
  • その他の一般的な軸には wdth（幅）、slnt（傾き）、ital（イタリック）、opsz（オプティカルサイズ）がある
  • CSS プロパティを使って軸を操作できる
  • font-variation-settings プロパティは継承の問題を引き起こす可能性があるため、可能であれば個別の CSS プロパティを使うのが望ましい

代替グリフ

  • フォントには特定の文字に対する代替グリフが含まれていることがある
  • 代替グリフには数字、スワッシュ、合字などさまざまなスタイルが含まれる

スタイル代替

  • スタイル代替は、特定の文字の別形を有効にする機能
  • salt はすべての文字のスタイル代替を有効にする
  • ss01、ss02 などのスタイルセットは特定の文字集合を置き換える
  • cv01、cv02 などの文字バリエーションは単一の文字を置き換える
  • CSS プロパティ font-feature-settings と font-variant-alternates を使って代替グリフを有効にできる

スワッシュ

  • 一部のフォントには、見出しに少し個性を加えるために使えるスワッシュが含まれている
  • スワッシュは、見出しに個性を加えられる装飾的な要素
  • font-feature-settings と font-variant-alternates を使ってスワッシュを有効にできる

数字

  • フォントにはさまざまな数字グリフセットが含まれていることがある
  • 数字はライニングまたはオールドスタイル、タブラーまたはプロポーショナルに分かれる
  • タブラー数字は同じ幅を持ち、プロポーショナル数字は幅が異なる
  • ライニング数字は大文字と同じ高さを持ち、オールドスタイル数字は小文字と同じ高さを持つ
  • font-variant-numeric プロパティを使って希望する数字スタイルを設定できる

スモールキャップ

  • スモールキャップは小文字を置き換える大文字の変形
  • font-variant-caps プロパティを使ってスモールキャップを有効にできる
  • フォントにスモールキャップがない場合、ブラウザがそれを合成することがある

文脈依存の代替

  • 文脈依存の代替は、周囲の文字に応じてグリフを自動的に置き換える機能
  • たとえば、-> を矢印に置き換えたり、大文字に挟まれているときに @ の位置を調整したりできる
  • 文脈依存の代替はデフォルトで有効になっており、font-variant-ligatures プロパティで無効化できる

GN⁺のまとめ

  • 高品質なフォントは多様な機能を提供し、それを活用することでタイポグラフィの品質を大きく向上させられる
  • OpenType フォントの可変軸と代替グリフ機能は特に有用
  • 文脈依存の代替のような機能は、開発者にもユーザーにも便利

関連記事

4件のコメント

 
halfenif 2024-09-13

フォント機能を正しくサポートすることが、なぜこれほど難しいのか疑問です
> 人類全体の歴史とともにある問題ですから……何かできることがどれほど多いことでしょう！
 
seunggi 2024-09-12

高品質なフォントから得られる利点

フォントレンダリングは難しい

https://faultlore.com/blah/text-hates-you/
 
wedding 2024-09-12

ligatureはどうしても慣れないですね..
 
GN⁺ 2024-09-11
Hacker Newsの意見
  • 数字が複数行にまたがって整列するときに便利
  • 時計やカウントダウンのようなものにも便利
  • 画面上で時刻が飛ぶのはとてもイライラする
  • フォントファイルを調べたいなら Wakamai Fondue の利用がおすすめ
  • 等幅数字はとても便利な機能
  • Google Fonts はファイルサイズを減らすために高度な OpenType 機能をほとんど削除している
    • 例: Google 版の Inter フォントは 11 個の機能を提供するが、完全版は 44 個の機能を提供する
  • このページのフォントは美しい
  • スモールキャップスの使用がかっこいい。もっと多くのウェブサイトで使われてほしい
  • Berkeley Mono v2 がリリースされたか確認したが、まだリリースされていない
  • wght（ウェイト）軸の動作が奇妙で、400 未満にスライドするとテキストが細くなりつつ圧縮されるが、400 を超えてスライドするとテキストは太くなるだけ
  • VSCode で別のフォントを使ってコメント、jsdocs、そのほかのシンタックスハイライトを適用するには vscode-custom-css 拡張を使う必要がある
    • 例: 
      .mtki {
  font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
  font-style: italic !important;
  color: #757575 !important;
}
.comment {
  font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
  font-style: italic !important;
  color: #757575 !important;
}
.comment:not(.punctuation) {
  font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
  font-style: italic !important;
  color: #757575 !important;
}
    • VSCode のフォント処理機能にはバグが多く、かなり試行錯誤が必要
  • フォント機能を正しくサポートすることがなぜこれほど難しいのか疑問
  • タイポグラフィに興味があるなら Butterick's Practical Typography がおすすめ
    • 印刷物やデジタル文書を美しくするための実用的な助言が満載
    • 彼のフォントライセンスは非常に寛大で、ページビュー数の制限がない
    • 彼のフォントはオープンソースではないが、美しい
    • Valkyrie と Concourse フォントを購入したが、Concourse は文脈依存の代替字形に非常に柔軟