センター大型ヒーロー（巨大タイポ）
中央に巨大なタイポグラフィを据え、短い言葉で強く訴えるブランドヒーローです。 flex の縦並びで全要素を画面中央に集め、見出しは clamp(56px,14vw,140px) という大胆な可変サイズで、画面幅いっぱいに文字が伸び縮みします。
解説
中央に巨大なタイポグラフィを据え、短い言葉で強く訴えるブランドヒーローです。flex の縦並びで全要素を画面中央に集め、見出しは clamp(56px,14vw,140px) という大胆な可変サイズで、画面幅いっぱいに文字が伸び縮みします。行間を line-height:.95 と詰め、letter-spacing をわずかにマイナスにして塊感を出しています。上に等幅フォントの小さなアイブロウ、下に一文を添える構成で、装飾はほぼ文字だけです。
使う場面
- ファッション・アート系ブランドのトップ
- アートディレクション重視のポートフォリオ
- 強いキャッチコピーを主役にしたい告知ページ
濃紺の背景に白文字、差し色のピンクという最小構成なので、配色を変えるだけで雰囲気を作り直せます。<br> で意図的に改行している箇所を調整すると、文字の塊の見え方が変わります。注意点として、巨大な文字は迫力がある反面、長い文章には向きません。1〜数語の短いメッセージに絞るのがこの型の使いどころです。文字サイズは vw 連動で自動縮小するため、スマホでも見切れにくくなっています。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
見出しの文字が大きすぎる場合は調整できますか。
見出しに使っている clamp の 3 つの数値を下げれば最大サイズを抑えられます。中央の vw の値が画面幅への追従度なので、ここで拡大の勢いを調整します。
長い文章を見出しに入れても大丈夫ですか。
向きません。この型は巨大文字で短い言葉を見せる設計です。長文を入れると画面に収まりにくくなるため、1 語から数語のキャッチコピーに絞ってください。