フォントサイズの基本を学ぶ!ウェブサイトでの重要性

サイトデザインにおいて見落とされがちですが、フォントサイズは重要です。

フォントサイズ一覧

以下は、よく使われるfont-sizeの値の一覧とそれぞれの説明です。
記述 種類 説明
12px Absolute Size (絶対サイズ) ピクセル単位で指定されるフォントサイズ。画面上の実際の大きさが一定。
1em Relative Size (相対サイズ) 親要素のフォントサイズに対する相対的なサイズ。親が16pxなら、1emも16pxになる。
1rem Root em ルート要素(通常は``要素)のフォントサイズに基づく。ルートが16pxなら、1remも16pxになる。
100% Percentage Size (パーセンテージサイズ) 親要素のフォントサイズに対するパーセンテージでのサイズ。親が16pxなら、100%も16pxになる。
1vw Viewport Width ビューポートの幅の1%に相当するサイズ。
1vh Viewport Height ビューポートの高さの1%に相当するサイズ。
1vmin Viewport Minimum vwとvhのうち、小さい方の1%に相当するサイズ。
1vmax Viewport Maximum vwとvhのうち、大きい方の1%に相当するサイズ。
small、medium、etc. Keyword Sizes (キーワードサイズ) ブラウザによって事前に定義されたキーワード。’medium’はデフォルトサイズ。
calc(1em + 2px) Calc Function 計算関数を使用してサイズを動的に算出。例えば、親要素のフォントサイズに2pxを足したサイズを指定する場合などに使用します。

実際の表示

基準フォント 実際の表示
ふぉんと これは絶対サイズ(24px)での文字表示です。
ふぉんと (12px) これは相対サイズ(2em)での文字表示です。
ふぉんと これはroot em(1.5rem)での文字表示です。
ふぉんと これはパーセンテージサイズ(150%)での文字表示です。
ふぉんと これはビューポートの幅(5vw)での文字表示です。
ふぉんと これはビューポートの高さ(5vh)での文字表示です。
ふぉんと これはビューポートの最小値(5vmin)での文字表示です。
ふぉんと これはビューポートの最大値(5vmax)での文字表示です。
ふぉんと これはキーワードサイズ(large)での文字表示です。
ふぉんと (20px) これはcalc関数を使ったサイズ(1em + 10px)での文字表示です。

種類別用途

Absolute Size (絶対サイズ) – 例: px

ピクセル単位で指定されるフォントサイズ。
デザインの特定の要件に基づいて、一定のピクセルで文字サイズを指定する場合に使用。

Relative Size (相対サイズ) – 例: em

親要素のフォントサイズに対する相対的なサイズ。
親要素のサイズに基づいて柔軟にサイズを変更したい場合や、コンポーネントの再利用性を高めたい場合に使用。

Root em – rem

ルート要素(通常は<html>要素)のフォントサイズに基づく。
サイト全体の基本的なフォントサイズを基準として、一貫性を持たせたい場合に使用。

Percentage Size (パーセンテージサイズ) – %

親要素のフォントサイズに対するパーセンテージでのサイズ。
親要素に対する割合でサイズを指定したい場合に使用。

Viewport Width – vw

ビューポートの幅の1%に相当するサイズ。
画面の幅に応じて文字サイズを動的に変更したい場合に使用。

Viewport Height – vh

ビューポートの高さの1%に相当するサイズ。
画面の高さに応じて文字サイズを動的に変更したい場合に使用。

Viewport Minimum – vmin

vwとvhのうち、小さい方の1%に相当するサイズ。
画面の幅や高さのどちらかが狭い場合に、文字サイズを動的に調整したい場合に使用。

Viewport Maximum – vmax

vwとvhのうち、大きい方の1%に相当するサイズ。
画面の幅や高さのどちらかが広い場合に、文字サイズを動的に調整したい場合に使用。

Keyword Sizes (キーワードサイズ) – 例: medium

ブラウザによって事前に定義されたキーワード。
ブラウザのデフォルトのサイズをベースに、標準的なサイズを指定したい場合に使用。

Calc Function – calc()

計算関数を使用してサイズを動的に算出。
複数の単位や数値を組み合わせて、動的なフォントサイズを計算したい場合に使用。

これらのfont-sizeの種類を理解し、適切な場面で使用することで、レスポンシブデザインやユーザビリティの向上に寄与することができる。

適材適所でフォントサイズを使用しましょう。

YouTubeのチャンネル登録はこちら!!
( *ˊᵕˋ)σ 凸ポチッと応援よろしくね!!
開発・運営ランキング にほんブログ村 IT技術ブログ IT技術情報へ
記事を書いてる人
病根のバグ

ガラケー時代からWEB開発やってるバツイチ自宅SEです。不眠不休で働くので、ブログのブックマークとYouTubeのチャンネル登録とXのフォローお願いします。デスマ上等!!

「○○を知りたい!!」「○○が分からない!!」などありましたら、Twitterでもブログでもコメントいただければ、ご期待に添えるように頑張ります!

病根のバグのSNSを覗く!!
CSS
病根のバグのSNSを覗く!!
ITkagyo

コメント

タイトルとURLをコピーしました