brandfy-tipografia-web

Webフォントの準備

運用プロトコル

• 計画と進捗： 選定、ライセンス、ファイル、CSS、テストを計画します。
• 信頼できる情報源： ビジュアルガイド、ライセンス、 webfonts.mdを確認します。
• 範囲と冪等性： 互換性のあるライセンスなしにフォントをダウンロードまたは再配布しません。 ハッシュが同一の既存ファイルは保持します。
• 検証： ライセンス、MIME、太さ、スタイル、読み込み、フォールバック、 可読性を確認します。
• 最終概要： ファミリー、入手元、ライセンス、ファイル、CSS、未解決事項を 記録します。

フロー

1. 言語、必要な字形の範囲、用途に基づいて、見出し、本文、インターフェース、 コード用のファミリーを選びます。

2. サポート状況とライセンスが許せば、可変WOFF2を優先します。静的ファイルは 実際に使用する太さのみ保持します。

3. 各ファイルについて、直接URL、ライセンス、作者、太さ、スタイル、任意のハッシュを含めて .brandfy/fonts.jsonに記録します。

4. 次を実行します。

   node <caminho-da-skill>/scripts/download-fonts.mjs \
     --manifest .brandfy/fonts.json \
     --output brand/fonts
   

5. @font-face、font-display: swap、フォールバック、ファミリーのトークンを含む brand/fonts/fonts.cssを生成します。

6. マニュアルで、スケール、line-height、字間、行の長さ、用途ごとの使い分けを定義します。

7. アクセント記号、数字、記号、太字、斜体、オフライン時の読み込みをテストします。

フォントがプロプライエタリである場合、または外部サービスでホストされている場合は、 ファイルをリポジトリにコピーせず、連携用CSSを生成します。

専門家の考え方

用途に応じてタイポグラフィを選びます。長文の読み物、インターフェース、見出し、数字、 コード、言語、個性には、それぞれ異なるパラメーターが必要です。文字のカバレッジ、 可読性、有用な太さ、メトリクス、パフォーマンス、ライセンス、フォールバック、 メンテナンス性を比較します。参考資料に見た目が似ていても、ライセンスのないファイルや、 アクセント記号や小さな画面で問題が起きるファミリーを選ぶ理由にはなりません。