画像不要CSSだけで作るテキストロゴデザインのTips

WebサイトのロゴタイプといえばPhotoShopを初めとした画像ソフトを用いて作るのが一般的な気もしますが、シンプルなものならCSSのプロパティを指定するだけでも作れたりします。今回はそのサンプルとフォント関係で使うCSSプロパティいくつかのおさらいなどを。

行間・字間で印象はぐっと変わる
簡単に効果を得られるけど加減が難しいドロップシャドウ
まとめ

行間・字間で印象はぐっと変わる

サイトトップのタイトルを画像ではなくh1タグなどで表示して文字として扱うのはSEO的効果がある！…とは限りませんが、ユニークな人名や店名、フレーズなどをサイトのタイトルとしたときには競合少ないんでタイトル+他のワードなどで検索されたときに多少の効果はあるんじゃないでしょうか。

Web fontもいちいちロードするのに時間がかかるというデメリットもありますが、日本語使わない英数字だけなら比較的ストレスなく使いやすいと思います。というわけで今回のサンプルに使うフォントは過去記事に書いたGoogle web fonts APIの「Vidaloka」ってフォントを使ってます。

今回お題となるのは以下のようなHTML。


<h1><span class="maintitle">56DOC blog</span><span class="description">Fun chat for tomorrow</span></h1>

h1の中に主題（56DOC blog）と副題（Fun chat for tomorrow）的なものをspanで区切ってclassつけて書いてます。

あとGoogle web fonts使う場合はhead内に


<link href='http://fonts.googleapis.com/css?family=Vidaloka' rel='stylesheet' type='text/css'>

こういうタグを入れときます。詳しくは過去記事参照。

さて基本のCSSを以下のように定義します。


h1{
font-family: 'Vidaloka', serif;
text-align:center;
font-weight:normal;
color:#444;
}
.maintitle{
display:block;
font-size:72px;
}
.description{
display:block;
font-size:24px;
}

h1の最初の【font-family】で前述のweb fontを指定してますね。

これだけの指定だと以下のように表示されます。

サンプルページ

フォントはそれなりに綺麗なんですけどね。行間が広すぎたりしてなんだかマヌケな感じもします。で、行間を調整するために以下のように書いて見ます。


h1{
font-family: 'Vidaloka', serif;
text-align:center;
font-weight:normal;
color:#444;
}
.maintitle{
display:block;
font-size:72px;
line-height:72px;
}
.description{
display:block;
font-size:24px;
line-height:10px;
}

サンプルページ

主題、副題のスパンのクラスにそれぞれ【line-height】プロパティを追加しました。これは行送りを指定するプロパティです。指定しなければブラウザのデフォルト値が適用されると思います。

ここでフォントサイズと同じ行送りを指定すると行間は0になります。フォントサイズ以上の行送りを指定した場合は差の1/2ずつがフォントの上下に余白として挿入されます。フォントサイズより行送りの方が小さい場合は差の1/2ずつが「マイナスの余白」として設定され、その結果行と行が重なって表示されます。

この例では主題のほうをフォントサイズ=行送りとして余白なし、副題の方はフォント24px＞行送り10pxですから差の半分（（24-10）/2=7px）だけ行間が詰まります。

結果的に主題のベースラインに副題が近づいて若干全体としての一体感が出ました。

しかしまだ間延びした感じがあるので今度は字間を調整してみましょう。


h1{
font-family: 'Vidaloka', serif;
text-align:center;
font-weight:normal;
color:#444;
}
.maintitle{
display:block;
font-size:72px;
line-height:72px;
letter-spacing:-4px;
}
.description{
display:block;
font-size:24px;
line-height:10px;
letter-spacing:1px;
}

サンプルページ

次に追加されたのは【letter-spacing】プロパティです。これは単純に字と字の間隔を幾らにするかを指定すればよいだけです。マイナスも指定できます。

この例では主題に-4pxを指定して時間をかっちり詰めてます。これでだいぶ締まった感じになります。逆に副題は1pxの間隔を指定して若干広げることで全体の収まり（主題の「g」がベースラインの下に飛び出してるのでこれにちょうど良く納める）を調整してます。この辺は完全に渡し個人の感覚ですけど。

以上のように【line-height】と【letter-spacing】使うと単純なテキストでもそれなりにバランス調整はできます。spanで文字単位で区切って多少トリッキーな文字配列とかもできるかもしれませんね。でWebフォント使っておけば、ほぼ閲覧環境に左右されず意図したロゴタイプが表示される、という。

簡単に効果を得られるけど加減が難しいドロップシャドウ

続いてちょっとエフェクト的なものを加えてみましょうか。


h1{
font-family: 'Vidaloka', serif;
text-align:center;
font-weight:normal;
color:#444;
}
.maintitle{
display:block;
font-size:72px;
line-height:72px;
letter-spacing:-4px;
text-shadow:3px 3px 6px #888;
}
.description{
display:block;
font-size:24px;
line-height:10px;
letter-spacing:1px;
text-shadow:5px 5px 10px #888;
}

サンプルページ

これもそこそこ良く使われてると思うんですが【text-shadow】プロパティです。値の指定の仕方は【影の右へのオフセット量、影の下へのオフセット量、影輪郭のぼかしの強さ、影の色】と指定します。オフセット量はマイナス値を指定する方向でそれぞれ左、上へ逆方向に指定することもできます。

どれくらいの値が自然な影になるかは元のフォントのサイズにもよるので適宜調整が必要ですが、いずれにしても効果強すぎると「でしゃばり感」がハンパないので程々にしておきましょう。あと影色も真っ黒の#000などを指定するよりも明度上げたグレー系の無彩色のほうがより自然な雰囲気になる場合が多いと思います。

シャドウを指定するとこうして「文字が浮かんだ」ように見せることができますがちょっと文字本体の輪郭がぼやけてしまってます。こんな時は


h1{
font-family: 'Vidaloka', serif;
text-align:center;
font-weight:normal;
color:#444;
}
.maintitle{
display:block;
font-size:72px;
line-height:72px;
letter-spacing:-4px;
text-shadow:1px 1px 3px #fff,3px 3px 6px #888;
}
.description{
display:block;
font-size:24px;
line-height:10px;
letter-spacing:1px;
text-shadow:1px 1px 5px #fff,5px 5px 10px #888;
}

サンプルページ

このように【text-shadow】はコロン(,)で区切って複数指定することもできます。ここでは右下へ1pxずらした白のシャドウを入れることでフォントの輪郭を明瞭にしています。

【text-shadow】を重ねがけするときの注意点ですが、基本的に「先に書いたものが上に表示される」というルールがありますので、間違えて黒シャドウの後に白シャドウ入れちゃうと意味なくなっちゃったりしますから気をつけましょう。

続いてこんな例。


h1{
padding:10px;
font-family: 'Vidaloka', serif;
text-align:center;
font-weight:normal;
color:#666;
background-color:#888;
}
.maintitle{
display:block;
font-size:72px;
line-height:72px;
letter-spacing:-4px;
text-shadow:-1px -1px #222,1px 1px #aaa;
}
.description{
display:block;
font-size:24px;
line-height:10px;
letter-spacing:1px;
text-shadow:-1px -1px #222,1px 1px #aaa;
}

サンプルページ

背景色を文字色に近い色にした上で、【text-shadow】で右上に文字色より若干くらいシャドウ色、左上に文字色より若干明るいハイライト色をぼかしなし、1pxズレで指定するとレタープレス（紙に型押し）っぽい表現ができます。

またシャドウを何重にも重ねるとこんなこともできます。


h1{
padding:10px;
font-family: 'Vidaloka', serif;
text-align:center;
font-weight:normal;
color:#fff;
background-color:#000;
}
.maintitle{
display:block;
font-size:72px;
line-height:72px;
letter-spacing:-4px;
text-shadow:0px 0px 3px #fff,
0px 0px 6px #fff,
0px 0px 9px #fff,
0px 0px 12px #f0a,
0px 0px 21px #f0a;
0px 0px 24px #f0a;
0px 0px 30px #f0a;
0px 0px 45px #f0a;
}
.description{
display:block;
font-size:24px;
line-height:10px;
letter-spacing:1px;
text-shadow:0px 0px 2px #fff,
0px 0px 4px #fff,
0px 0px 6px #fff,
0px 0px 8px #f0a,
0px 0px 14px #f0a;
0px 0px 16px #f0a;
0px 0px 20px #f0a;
0px 0px 30px #f0a;
}

サンプルページ

背景を黒、文字色を白にして、テキストには白、及び青みを帯びた赤のシャドウを複数回重ねてみるとネオン光彩を放ったような表現ができます。全体に光を放ってるように見せたいのでオフセットは縦横ともゼロ。いきなり光彩色でシャドウをつけずに文字の近くは文字色と同じ白でシャドウをつけてるのがボンヤリ光ってるように見せるミソだと思います。

ちょっとこれは効果としては派手すぎるので、使いどころを相当選びそうですけどね。

逆にもっとシンプルな例としては


h1{
padding:10px;
font-family: 'Vidaloka', serif;
text-align:center;
font-weight:normal;
color:#fff;
}
.maintitle{
display:block;
font-size:72px;
line-height:72px;
letter-spacing:-4px;
text-shadow:1px 1px 3px #ccc,
1px -1px 3px #ccc,
-1px 1px 3px #ccc,
-1px -1px 3px #ccc;
}
.description{
display:block;
font-size:24px;
line-height:10px;
letter-spacing:1px;
text-shadow:1px 1px 3px #ccc,
1px -1px 3px #ccc,
-1px 1px 3px #ccc,
-1px -1px 3px #ccc;
}