厳選・オープン・無料

Hoefler&Co

エディトリアルなストーリーテリングとエレガントな見本表示を通じてタイプレットを紹介する、プレミアムタイプファウンドリー。

01

デザイン DNA

タイプレットのためのハイエンドデザインアトリエおよびエディトリアルショーケース

02

カラー

ダークなインターフェースとライトなコンテンツエリアの高いコントラスト。リンクやUI要素の機能的アクセントとして、明るいブルーを使用。

03

タイポグラフィ

transitional-serif · humanist-sans · monospace

• display56px · 400
• heading21px · 400
• body15px · 400
• caption10px · 400

ディスプレイおよび見出しタイポグラフィにはトランジショナルセリフを使用し、エディトリアルな優雅さを表現 · 本文テキストおよびUI要素にはヒューマニストサンスを使用し、可読性とモダンな印象を実現 · ディスプレイテキストには Tight な文字間隔を維持し、精巧で手作り感のある外観を実現

04

余白

一貫した4pxベース。コンテンツエリアには余裕のあるパディングを設け、タイポグラフィのための呼吸の余地を創出。

05

サーフェス (角丸 / 影 / 罫線)

ボーダーの使用は最小限。区切りには背景コントラストとスペーシングに依存。

rgba(255, 255, 255, 0.15) 0px 1px 0px 0px

06

レイアウト

タイポグラフィ見本用の大きなビジュアルエリアと明確なコンテンツ階層を備えたグリッドベースのレイアウト。

07

モーションとインタラクション

インタラクティブ要素上の滑らかなフィルトランジション · hover状態でのカラートランジション · コンテンツ表示のための不透明度フェード

インタラクティブ要素上の控えめな色の変化とフィルトランジション。 · 滑らかなトランジションフィードバックを伴う即座のレスポンス。

08

コンポーネント

• button ミニマルなスタイリング。主にテキストベースで、控えめなhoverトランジション。
• card 全面にわたる画像ブロックにテキストをオーバーレイ、もしくはビジュアルとコンテンツエリアをクリーンに分離。
• chip 目立っては使用しない。インターフェースはクリーンなナビゲーションリンクに依存。
• input ミニマルなアンダーラインのみの入力フィールドと控えめなプレースホルダーテキスト。
• hero ビューポートを埋め尽くす大きなタイポグラフィ見本が、大胆なビジュアルインパクトを提供。

09

文体と禁止事項

• トーン 知識豊かで洗練された、エディトリアルなトーン。タイポグラフィとデザインについて権威を持って語る。
• 見出し タイポグラフィ見本とデザイン哲学を示す、大胆で自信に満ちた宣言。
• CTA 控えめでエレガント。攻撃的なコンバージョンではなく、探索を促す。

• コンテンツブロックに角丸を使用しない — スクリーンショットではすべてのコンテナにシャープでクリーンなエッジが確認できます。
• カードやコンテンツエリアにドロップシャドウを追加しない — スクリーンショットではフラットでボーダーレスなデザインが確認できます。
• 本文テキストにボールドウェイトを使用しない — スクリーンショットでは全体を通して400ウェイトが維持されています。
• 装飾要素でインターフェースを散らかさない — スクリーンショットでは十分なホワイトスペースと共に克制が確認できます。
• ディスプレイ見出しにサンセリフを使用しない — スクリーンショットでは目立つタイポグラフィにトランジショナルセリフが使用されています。
• セクション区切りに重いボーダーを適用しない — スクリーンショットでは代わりに背景色コントラストに依存しています。
• 避ける: 過度にカジュアルまたは流行りの言葉
• 避ける: 攻撃的な販売メッセージ
• 避ける: 文脈のない複雑な技術用語

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko