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

タイトルや見出し部分は、他の要素よりも少し目立たせたい部分ですよね。

本日は、そんなタイトルや見出し部分に使えそうなデザインをまとめてみました。

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

デザインblogランキング

コメント 3 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



3 Responses to “タイトル・見出しに使えるデザインまとめ”

  1. n-yuji Says:

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

  2. MTVが2万曲以上のPVを無料公開/ブログ貼り付け可能、他 | メシウマ状態 飯の旨いおかずがてんこ盛り Says:

    [...] タイトル・見出しに使えるデザインまとめ – DesignWalker どうせ外国のサイトの紹介だろ、アルファベットはフォントが綺麗だからそう見えるだけで日本語には使えないものが多いし…とか思うべからず。ちゃんと日本語フォント用のもあった。しかもコレ、凄く良さそう。このブログのテンプレを作り直すときに是非とも使いたい! [...]

  3. 簡単!シンプルで綺麗【見出しの作り方】 | WordPress【ワードプレス】初心者の部屋~使い方知っとこ? Says:

    [...] タイトル・見出しに使えるデザインまとめ | DesignWalker 見出しをCSSでシンプルに装飾するtips – EC studio デザインブログ [...]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ