実際の可変フォント

多数の例を含む可変フォントの実践ガイドを紹介します。

まだ可変フォントに詳しくない方は、Roman ShaminTravis TurnerRoman Shamin による記事「Variable fonts in real life」で、優れたユースケースと、次のプロジェクトで変更が必要な理由について説明しています。

可変フォントがブラウザ サポートに優れています。ブラウザはすべてのバリエーションに対して 1 つのフォント ファイルをダウンロードするだけで済むため、パフォーマンスが向上します。 ただし、この記事で示すように、ロゴなどの要素にフォントの太さを合わせたり、ライトモードとダークモードのコントラストの問題を解決したり、小さなテキストを読みやすくしたりすることもできます。

対応ブラウザ

  • 62
  • 17
  • 62
  • 11

ソース

ヒーロー画像: Florian Klauer