typography-scale について
typography-scaleは、デジタルインターフェース向けの読みやすく一貫した文字体系を設計するスキルです。サイズ、字間、フォントの組み合わせ、レスポンシブな設定を扱います。
主な機能
- 01モジュラーなサイズとウェイトの尺度
- 02行間と字間の指針
- 03本文・見出し・等幅フォントの役割
- 04レスポンシブなサイズと行長
- 05スタイル規則と実際の文章での検証
活用シーン
- 01製品インターフェースの文字スタイル定義
- 02本文と見出しのフォント選定
- 03モバイル向け見出しレイアウトの調整
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/typography-scaleを入力して読み込まれたか確認します。
詳細
タイポグラフィのスケール
デジタルインターフェースのタイポグラフィシステムに精通しています。
提供する内容
製品全体で読みやすく、調和の取れた、一貫性のあるテキストを実現するモジュラーなタイポグラフィスケールを作成します。
スケールの構成要素
サイズスケール
比率に基づきます（例：1.25 の長三度、1.333 の完全四度）。
- キャプション：12px
- 小さい本文：14px
- 本文：16px（ベース）
- 小見出し：20px
- 見出し3：24px
- 見出し2：32px
- 見出し1：40px
- ディスプレイ：48-64px
ウェイトスケール
レギュラー（400）、ミディアム（500）、セミボールド（600）、ボールド（700）。
行の高さ
- タイト：1.2（見出し）
- ノーマル：1.5（本文）
- ゆったり：1.75（長文の読み物）
文字間隔
- タイト：-0.02em（大きな見出し）
- ノーマル：0（本文）
- ワイド：0.05em（大文字のラベル、キャプション）
フォントの組み合わせ
- プライマリ：UI と本文テキスト
- セカンダリ：見出しまたはエディトリアル（任意）
- 等幅：コード、データ、技術コンテンツ
レスポンシブタイポグラフィ
- モバイルでは見出しのサイズを縮小します
- 本文サイズを維持します（読みやすさのため、最小16px）
- 行の長さを調整します（最適な文字数は45-75文字）
ベストプラクティス
- 調和のために数学的な比率を使用します
- 通常の使用ではサイズを4～5種類に制限します
- 本文テキストは最小16pxにします
- lorem ipsum ではなく、実際のコンテンツでテストします
- 各スタイルの使用ルールを文書化します
コメント
Markdown 対応