｛font-size:62.5％｝が62.5％になったワケ

webのコーディングでは、デザイナーから指定されたpx単位で作ったデザインを正しく反映させつつ、ユーザーの環境に合わせて、それぞれの文字サイズの相対的なサイズ差が保たれるようにする必要があります。以前であればこの対応はブラウザ間の標示差や文字サイズ変更機能のためでしたが、近年はスマートフォンや端末ごとのレスポンシブ対応のために必要とされています。
そのために使われているのが{font-size: 62.5%;}です。どういった利点があるのでしょうか。

htmlのfont-sizeの計算

font-sizeの相対的なサイズ指定で使われる単位にemや%があります。前述の理由からwebサイトのfont-sizeはサイズ差が保たれている必要がありますので、デザイン的な特例がない限り、読ませるためのテキストは基準となるfont-sizeに対してこれらの単位で指定することになります。

特に指定をしていない場合、font-sizeのデフォルト値mediumは16pxに相当するサイズです。このサイズをそのまま基準にすると、14pxの文字を出力したい場合font-size:0.875emとなり、20pxの文字を出力する場合はfont-size:1.250emとなります。

では22pxの文字を出力したい場合は？
22÷16=1.375なので、font-size:1.375emとなります。

この計算、毎回するのも、文字サイズごとの数値を覚えるのも、ちょっと現実的ではないですね。

計算を平易にするために

そこで{font-size: 62.5%;}の登場です。htmlタグにこの数値を設定すると、基準値が16pxの62.5%、つまり10pxのサイズになります。
こうするとページ内の1emが10pxとなり、以降のcss記述がとても簡単になります。
14pxの文字を出力したいときはfont-size:1.4em、 22pxの文字を出力したいときはfont-size:2.2emの記述でよくなるので、計算の必要自体がなくなりましたね。

補足とまとめ

{font-size: 62.5%;}に設定されている経緯について、かなりざっくりとですが紹介しました。流れの中でemを使いましたが、ページ内の要素にfont-sizeを指定するときは、css3以降の場合サイズの継承を避けられるremが使われるようになりました。これでサイズ差を維持したままどんなコーディングの都合上でも基準値に対するfont-sizeを直接指定すれば正しく表示させることができるようになりました。

もしfont-sizeのコントロールに困る事態になったら、サイトの基準値の設定も確認してみましょう。