写真上のデバイステキストを見やすくするためにtext-shadowがとっても便利

text-shadowはテキストに影をつけるためのプロパティです。数年前までは対応ブラウザの関係でなかなか使うのが難しかったのですが現在はすっかりスタンダードなプロパティとして定着している感があります。

text-shadowが活躍するケース

最近は文字を画像化することが以前に比べるとかなり少なくなってきています。
例えばメインビジュアルの写真の上に置くキャッチコピーの文言さえも画像化せずにデバイステキスト（画像化しないHTMLの文字のこと）でコーディングすることも多いです。

そのように写真の上に文字を置く時、写真によっては文字がとても見えづらくなってしまうことがあります。
そんな時は文言の下に座布団（背景色のあるボックス等）を敷いたり、文字に影をつけたりして視認性を向上させるわけですが、text-shadowプロパティを遠慮せず使える時代になったおかげでデバイステキストの視認性も簡単に確保できて大助かりです。

text-shadowの使い方

p {
    text-shadow: 4px 4px 4px #000;
}

ひとつめの値は横方向距離、ふたつめの値は縦方向の距離、三つ目のあたいはぼかし具合、四つ目は影の色です。
横方向と縦方向の距離はマイナスの値を指定することも可能です。マイナスの値だと、影は文字の左側や上側に表示されることになります。

上の値で表示された影がこちらです。とっても濃い影で視認性という意味では悪くはないかもしれません。
ただ、ここまで強烈な影をつけてしまうと、場合によっては見た目の印象が野暮ったくなりがち。

野暮ったくならない影にするには？

デバイスフォントにtext-shadowで影を付ける場合でも、例えばPhotoshopなどで文字画像にドロップシャドウを付ける場合でも同じなのですが、影を付ける時は出来るだけ最低限の控えめな表現に留めておいたほうがさりげなくて素敵。

p {
    text-shadow: 1px 1px 3px #444;
}

文字の下に写真を敷く場合、写真の内容によってはこんな薄い影では全然文字が見やすくならない場合も当然あります。
そんな場合は濃い影を付けるのでも仕方ないとは思いますが、もし可能なのであれば、写真をもっとすっきりしたものに変更するとか、写真の色調を補正して少し暗くしてみるとか、文字の影以外のところでも工夫して複合的な対策で視認性を向上させるのも良いでしょう。