あなたのサイト、テキストは読みやすいですか?|text-shadow

最近のWebサイトを読むときに感じることです。どちらかというとブログでの遭遇率が高いです。企業系のサイトなどでは様子見となってるCSS3が絡んでいるということと、長めのテキストが多いのは主にブログである、というのが理由でしょう。

読むときはテキストを選択する派

最近はtwitterなんかとの差別化なのかなんなのか、文章をぎっしり詰め込んだ読み応えのあるエントリーが多いですよね。
僕はそういうブログを読む時、「今どこを読んでるのか」「このあとどこに目を運べばいいのか」そんな目印のためにだいたい読んでる付近のテキストを選択する人です。

ぼやっとする

問題はここから。
少し前から、黒文字に白いシャドーエフェクトが掛かっているようなテキストのビジュアル表現を見かけるようになりました、背景は薄めのグレーとかね。白シャドーのお陰で黒文字が浮き出て読みやすいですよね。メリハリがついててとてもよろしい。CSS3を少しずつ取り入れている人が増えている証拠です。良い事です。ところが…。
そんな一見読みやすそうなテキストを「さぁ読もう!」と思って選択すると、黒い文字色が反転して白に、一方、テキストについてる白いシャドーはそのまま、という状態に変わります。「白文字+白シャドー」でバーチャル乱視状態。これが読みにくい。まばたきの回数が3倍くらいになります。

直してみる

直してみるというか僕はそもそもこの実装はしていないので、どこかの誰かがコレを見て直してくれるといいなという期待、願望、切なる願い。


追伸:Opera(12.12)だとtext-shadow:noneにしてもシャドーが消えません。何でだろ?助けて偉い人。

text-shadowで白を指定している皆様。
ご面倒かと思いますが、上記処理を追加してもらえると僕が幸せになれます。
僕以外にも結構これに悩まされている人いると思うんだけどなぁ…。

コメントを残してみる

コメント