タイトル・見出しに使えるデザインまとめ

タイトルや見出し部分は、他の要素よりも少し目立たせたい部分ですよね。 本日は、そんなタイトルや見出し部分に使えそうなデザインをまとめてみました。

Typography For Headlines

約150種類もの見出し部分のサンプルが集められています。画像を見て、デザインの参考にするもよし。また、各画像をクリックすると、そのサイトにリンクされているので、CSSやHTMLを見て、実際にどのように設定されているのか見ることが出来ますね。

Typography For Headlines

Typography for Headlines Design Showcase | Elements of Design

こちらも、↑のサイトと同じドメインですが…。こちらは、現在118種類の見出しのサンプルが掲載されています。他にも、コメントやログインフォームなど各要素のデザインのサンプルが集められています。各パーツのデザインに迷った時は、とっても便利なサイトです。

Typography for Headlines Design Showcase | Elements of Design

10 Examples of Beautiful CSS Typography and how they did it…

こちらは、サンプルの画像と、CSSがセットで10種類掲載されています。CSSをコピーしてそのまま使えます。

10 Examples of Beautiful CSS Typography and how they did it…

Headline Element Styling

数も少なく、とてもシンプルですが、きれいなサンプルが紹介されています。

Headline Element Styling

Headline Elemente mit CSS stylen

↑ひとつ上で紹介したサンプルのCSSが公開されていました。コピペでそのままどうぞ。

Headline Elemente mit CSS stylen

BJKit(BeautifulJapaneseKit)

JavaScriptを使って、フォントをアンチエイリアスの効いたフォントに入れ替えてくれます。日本語が使えるのがうれしいですね。

BJKit(BeautifulJapaneseKit)

CSS Gradient Text Effect

テキストの上に半透明のPNG画像を重ねるテクニックです。これは覚えておくと便利ですね。

CSS Gradient Text Effect

50+ Fonts for Big, Bold Headlines

欧文フォントですが、見出しに最適なフリーフォントが50種類まとめられています。

50+ Fonts for Big, Bold Headlines

15 Amazingly Free Magazine and Headline Fonts

こちらもきれいな見出しに使えそうな15種類のフリーフォントです。

15 Amazingly Free Magazine and Headline Fonts

関連記事

3件のコメント

  1. 50+ Fonts for Big, Bold Headlinesと15 Amazingly Free Magazine and Headline Fonts、フリーフォントと書かれてますが、全部がフリーというわけじゃありませんよ。誤解を招く表現です。Frutigerが入っているあたりですぐ気付くと思いますが? リンク先には購入のためのカートもありますし。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です