ジョッパリ・ワールド

フォントをtext-shadowで綺麗な太字にする方法!

      2016/05/27

font-layout

2015-9-22:追記

この記事ではフォントの太さの調整に”text-shadow”を使う方法を提案していますが、最近WEBフォントの存在を知りこちらがより有意義な方法かもしれないと思い始めています。

従来のbold指定部分を、書体の美しいWEBフォント “Noto Sans Japanese” などに置き換えるのです。

参考Google 日本語WEBフォント “Noto Sans Japanese”の太字がかなり綺麗!

ブログなどで太文字表現をする際に、 font-weight:bold; っていう指定方法があります。個別記事タイトルやh2(みだし)などを強調してメリハリをつける事が出来ます。

ただこの”bold”ですが、フォントにメイリオを指定している場合とても野暮ったく見えて仕方ありません;;ダサイを通り越して馬鹿っぽく見えます、、、個人的見解ですけど。

text-shadowで太字表現!?

綺麗な太字が表示できない、、、過去に文字に影をつけるCSSである text-shadow を試してみたけどイマイチな仕上がりで妥協して”bold”を使い続けていました。

ところが最近ふと閃(ひらめ)きましたw

その結果がこちらです。

※この方法(text-shadow)は使用するフォントによっては見難くなってしまう事があります。”メイリオ” や “MS Pゴシック” なら行ける気がします。

従来の"bold"表示の場合
text-shadowを指定したスマートな太文字

記事タイトルの部分です。

太文字Aは、 font-weight:bold; 指定。

太文字Bは、 text-shadow: 0.1px 0.5px 0 #333; 指定。

どうでしょうか見た感じ?

まあ、好みの問題かも。

text-shadowの値は、
「横のずれpx 縦のずれpx ほかしpx #色」となります。

さきほど閃いた_と言った部分は”text-shadow”の各値に1px以下の数値を適用させてみた点です。ブラウザ上(firefox・ie・chrome)で表示が確認出来ました。正直スマートフォンでは怪しいです;;とくにAndroidでは、text-shadow自体は問題なく使用出来るようですが、ぼかし値に0を指定するとtext-shadowが無効になってしまうという情報がありましたので;;

このへんの詳細は未確認で御座います;;ただ仮にtext-shadowが適用されない場合でも通常のフォント表示になるだけですから、「まっいいか」_って思っています。

あとディスプレイの解像度なども関係するかもしれません。いろいろ問題はあるわけですが、bold表示が好きではない私はあえて諸々のリスクを冒してでも「影による太字」を採用してみたわけです!

それにしても、text-shadowに1px以下の指定が有効だったとは、、、;;

boldとtext-shadowを併用する…

kiji-futomoji-2
kiji-futomoji

記事中の太文字がすべて bold指定 によるもになってしまうと正直暑苦しい感じがします。私の場合文字サイズで100%以上を指定する太文字に関しては、従来通りbold指定でいいかなと思っています。

一部の文脈をちょっとだけ強調したい程度であれば、 text-shadow がクールであると。

chromeのデベロッパーツール上では、Android端末でも大丈夫みたいですけど実際の端末では未確認です。

そもそもbold表示になんの不満もない人には無縁の話ではあります。

なにか問題があればぜひご指摘下さい~。

※WordPressで Gush2 などのレスポンシブテーマを使っている場合は、スマホ表示では従来通り”bold”を使ってタブレット以上で”text-shadow”を使うという手もある。