文字サイズの表記と大きさ

2018年8月28日 2018年8月29日

akinori

文字サイズの指示タイプ

文字のサイズ指定には様々な方法がある。
ついつい忘れてpx指定ばかりになるとページによってバラつきが出て統一感がなくなる事も...。
実際のサイズを見るためにも備忘録としてまとめる。

文字サイズの記載方法

CSSでの指示と呼出し(外部CSSファイル size.css に記載した場合)

スタイルシート外部ファイル　size.css
span.fsize {
 font-size: 12px;
}

HTMLソース
<html>
<head>
<link rel="stylesheet" type="text/css" href="size.css">
</head>
<body>
<span class="fsize">文字の大きさ 調整</span>
</body>
</html>

文字サイズの指示は以下の方法がある。

〇〇px：モニタの最小単位。モニタによって表示されるサイズが変わる。（高解像度のディスプレイでは小さく表示される）
〇〇em：相対的にサイズを決める方法。サイズ指定無しのフォントの大きさを 1em として、数値を小さくすれば縮小、大きくすれば拡大表記になる。
〇〇ex：欧文の小文字のxの高さを基準(1ex)として、相対的にサイズを決める方法。em同様に1よりも大きいか否かで拡大縮小を行う。
〇〇%：emに似たして方法でサイズ指定無しのフォントの大きさを100％として倍率で大きさを指示する。
xx-small：相対的にフォントを一回り小さくする。と同じ。
x-small：相対的にフォントを一回り小さくする。と同じ。
small：相対的にフォントを一回り小さくする。と同じ。
medium：相対的にフォントを基準サイズにする。
large：相対的にフォントを一回り小さくする。と同じ。
x-large：相対的にフォントを一回り小さくする。と同じ。
xx-large：相対的にフォントを一回り小さくする。と同じ。

実際に大きさを比べてみる

文字の大きさ12px
文字の大きさ12pt
文字の大きさ2em
文字の大きさ2ex
文字の大きさ80%
文字の大きさ100%
文字の大きさ120%
文字の大きさxx-small
文字の大きさx-small
文字の大きさsmall
文字の大きさmedium
文字の大きさlarge
文字の大きさx-large
文字の大きさxx-large

＼最新情報をチェック／