ブラウザによって最小サイズが決められている
Internet Explorerや、Firefox、Google Chrome、Safariなどのインターネットブラウザにはそれぞれ「最小のフォントサイズ」が設定されています。
ブラウザ毎によっては10px以下が最小のサイズとなる場合もありますが、大体のブラウザで最小のフォントサイズが10px程度なのです。
その値よりも小さい数値を指定しても、最小の値と自動で置き換わってしまい、反映されません。
「なんでそんな事をするの？」「デザイン的に小さくしたいのに余計だ」などと思うでしょう。
実際デザインをしていて、一部を8pxなどの小さな値で設定したくなる場面はよくあるものです。
私も実際にWebデザインをしていて、日本語を大きく出して、その下に小さな英語を載せたい場合、英語の方は10pxだと大きすぎると思う事がよくあります。
そもそも、なぜブラウザ毎に最小のフォントサイズが設定されているのでしょうか。
閲覧者（ユーザー）が読みやすいように気を使っている
もしも文字の大きさに最小値がなかったらどうなるでしょうか・・・
以前（第3回：ホームページ制作で使われる単位「px」について）紹介したように、パソコンや液晶は小さな点の集まりで画面を表示しています。
ですので、文字をドットで書く事をイメージしてみてください。
2pxに設定されてしまったら、文字を表示するための点が縦横2つづつ、計4つにしかならないので、文字として表示させることができません。ましてや1pxになんて設定してしまったら、点にしかならないので、文字にすらなりませんね。
このように文字として読めるレベルを保つための配慮として、ブラウザ毎に文字サイズが決められているんです。
「ユーザビリティが高い・低い」なんて言葉をどこかで聞いたことはありませんか？
「ユーザビリティが高い」とは、見やすい、扱いやすい、操作しやすいなど、扱う方（ユーザー）への配慮が行き届いる場合に使われます
逆に「ユーザビリティが低い」とは、見ずらい、扱いにくい、など、扱う方（ユーザー）への配慮が足りない場合に使われます。
最小の文字サイズは、このユーザビリティを少しでも高めるために設定されています。
美しく素晴らしいデザインがされていても、画面にきちんと表示されなかったり、思ったより汚く表示されてしまったら台無しですよね。
ユーザビリティにも配慮しつつ、ホームページのデザインをするように心がけてください。
どうしても最小サイズ以下にしたい場合には
デザイン上、どうしても譲れない場面や、お客様からの要望にどうしても応えたい！といったこともあると思います。
そんな時はCSSを使って、要素を縮小してみましょう。
縮小させるには以下のCSSを使います。
-moz-transform: scale(0.5);
0.5となっているので、半分に縮小されます。
縮小率を変えたい場合は数値の部分を変更してみてください。
これはあくまでCSSでの指定です。
縮小したからといって、文字としての形を保ったまま縮小される。ということではありませんので、その点はご注意ください。
また、拡大もできます。その場合は、2.0としてあげれば、2倍に表示されます。
読んでもらうためには、10pxが最低ライン
文字として正しく「読める」「わかる」のは体感的に10pxが最低ラインだと、私は思っています。
英文なら8px程度でも読めますが、漢字はどうしてもつぶれて読めなくなってしまいます。
ホームページに情報を「載せる」「公開する」ということは、多くの人に「見てもらいたい」「読んでもらいたい」という思いが根本にあるはずです。
いくら素晴らしいコンテンツを作っても、もしそこに掲載されている文字が読めなければ意味がありませんよね。
文字をデザインする時には表示をきちんと確認して、読める文字か、それとも読めない文字になっているのかをチェックしてください。
まとめ
・インターネットブラウザ毎に文字の最小サイズが決まっている
・大体10px程度が文字として読める最低ライン
・10px以下にしたい場合にはCSSを使って縮小する
・文字サイズが小さすぎると読めなくなる
・ユーザビリティを高めるために、ある程度の文字サイズは必要
