タイトル・見出しに使えるデザインまとめ
タイトルや見出し部分は、他の要素よりも少し目立たせたい部分ですよね。
本日は、そんなタイトルや見出し部分に使えそうなデザインをまとめてみました。
Typography For Headlines
約150種類もの見出し部分のサンプルが集められています。画像を見て、デザインの参考にするもよし。また、各画像をクリックすると、そのサイトにリンクされているので、CSSやHTMLを見て、実際にどのように設定されているのか見ることが出来ますね。
Typography for Headlines Design Showcase | Elements of Design
こちらも、↑のサイトと同じドメインですが…。こちらは、現在118種類の見出しのサンプルが掲載されています。他にも、コメントやログインフォームなど各要素のデザインのサンプルが集められています。各パーツのデザインに迷った時は、とっても便利なサイトです。
10 Examples of Beautiful CSS Typography and how they did it…
こちらは、サンプルの画像と、CSSがセットで10種類掲載されています。CSSをコピーしてそのまま使えます。
Headline Element Styling
数も少なく、とてもシンプルですが、きれいなサンプルが紹介されています。
Headline Elemente mit CSS stylen
↑ひとつ上で紹介したサンプルのCSSが公開されていました。コピペでそのままどうぞ。
BJKit(BeautifulJapaneseKit)
JavaScriptを使って、フォントをアンチエイリアスの効いたフォントに入れ替えてくれます。日本語が使えるのがうれしいですね。
CSS Gradient Text Effect
テキストの上に半透明のPNG画像を重ねるテクニックです。これは覚えておくと便利ですね。
50+ Fonts for Big, Bold Headlines
欧文フォントですが、見出しに最適なフリーフォントが５０種類まとめられています。
15 Amazingly Free Magazine and Headline Fonts
こちらもきれいな見出しに使えそうな１５種類のフリーフォントです。
|
|
|
October 28th, 2008 at 4:40 pm
50+ Fonts for Big, Bold Headlinesと15 Amazingly Free Magazine and Headline Fonts、フリーフォントと書かれてますが、全部がフリーというわけじゃありませんよ。誤解を招く表現です。Frutigerが入っているあたりですぐ気付くと思いますが？ リンク先には購入のためのカートもありますし。
October 31st, 2008 at 2:16 pm
[...] タイトル・見出しに使えるデザインまとめ – DesignWalker どうせ外国のサイトの紹介だろ、アルファベットはフォントが綺麗だからそう見えるだけで日本語には使えないものが多いし…とか思うべからず。ちゃんと日本語フォント用のもあった。しかもコレ、凄く良さそう。このブログのテンプレを作り直すときに是非とも使いたい！ [...]