文字を思い通りの大きさと位置で表示するCSS基本的に文字というものは、大文字・小文字など文字の種類によって目に見える大きさ(高さ)が異なります。100pxに指定した場合でも、文字がピッタリ100pxで表示されるわけではありません。これをCSSで思い通りに指定する方法を調べてみました。下に飛び出る小文字を除く)となるベースラインを基準に、デザイン上の指標となる高さがいくつか存在します。小文字の上端までの距離キャップハイト:ベースラインから大文字の上端までの距離。1467数字の大小はさておき、これらの値でまず意識しなければならないのは単位です。実はこの数字、単位はピクセルでもミリメートルでもありません。いう基準値を決め、それに対する相対値として定義されています。と直接関わってくる部分。16px約8.3pxとなります。2048)約139.6pxになります。その大きさで文字が表示されるわけではない、ということが分かって頂けたかと思います。文字の表示位置とline-heightここまでで表示したい大きさのfont-sizeは見いだせるようになったと思いますが、実際にこれをウェブのレイアウトで使うためには、表示位置も制御できねば意味がありません。値はあくまで距離の数値なので、そのまま位置算出に使うことはできなさそうです。設定値次第で文字の表示位置は大きく変わります。フォントによっては0なこともあります。文字の表示しうる範囲ですが、lineGapはその半分の数値がascenderの上とdescenderの下に割り振られるような表示になります。