ウェブサイトのフォントサイズはどこまで小さくできるのか？
今日は、そんな素朴な疑問に挑戦します。
スタイルシートで指定できるフォントサイズの限界
通常、CSSではフォントサイズを指定する際に font-size:12px; などと記述します。
もしフォントサイズを変えたければ、この数値を増減させて font-size:8px; や font-size:15px; と記述します。
単位は「px」の他に「%」や「em」、最近流行の「rem」を使うことになります。
ここまでは基礎なので問題はありませんね。
問題となるのは font-size:3px; と極小のフォントサイズの値を記述したときです。
実はブラウザ側では『最小のフォントサイズ』が設定されているために、その値より小さい数値を指定しても反映されない仕様になっています。
例えば Safari では『9px』に、Google Chrome では『10px』が最小単位になっています。
もちろん、ユーザーがブラウザの設定画面から最小フォントサイズの値を変更することも可能です。
しかしこれでは根本的な解決策にはなっていません。
どんなブラウザでも、意図したサイズの『極小フォント』を表示させるにはどうしたらよいのでしょうか？
ブラウザの設定を回避して極小フォントサイズを実現！
各ブラウザで設定されている『最小フォント』の値。
これより小さいフォントサイズで文字を表示させるために、CSS3から実装された「transform」プロパティを利用することができます。
このプロパティ「transform」は要素の回転や拡大・縮小を司っています。
つまり「transform:scale();」で縮小させてしまおうというワケです。
具体的には次のように記述することができますね。
.sample {
font-size:10px
-webkit-transform:scale(0.5);
transform:scale(0.5);
}
この例では、一度フォントサイズを「10px」と指定したうえで transform:scale(0.5); と縮小させて、おおよそ「5px」で表示させることに成功しています。
サンプルは下記URLからご覧ください。
限界突破して極小サイズのフォントを表示：実装サンプル
縮小の割合を変えて transform:scale(0.4); → transform:scale(0.2); といった具合で記述していけばブラウザの設定は無視して、限界突破した極小サイズのフォントを描画可能です。
実際にこれだけ小さい文字になってくと可読性はゼロ。
まったく何が書いてあるのかわかりません。
ちょっとした豆知識として、頭の片隅に入れておくのがいいかもしれませんね。
ウェブサイトでお困りのときはオンズにお任せください！
