webデザイン|フォントサイズ参考

webデザインをするときに、毎回悩むのが画面サイズ(横幅)とフォントサイズ。大まかなセオリーはあれども、実際画面で見るときに何が適切なのか毎度悩むので、実際のフォントサイズのイメージがすぐつかめるページを作ってみました。

見出しや説明については、私が調べ尽くしてできた、個人的なルールのようなものです。「絶対これが正しい!というわけではないですが参考までに。

ルビや注意書きにおすすめサイズ|最小10pt

webでは、10px以下の文字はCSSで指定しても、ブラウザ上では10pxで表示されるそうです。そもそも10pxよりも小さいサイズだと、とても読みづらいのでデザインで使う頻度は少なそうです。

これは10ptです。これは10pt(太字)です。

これは11ptです。これは11pt(太字)です。

ベースサイズ|本文には14~16ptが一般的

この記事の本文は、何も設定していない状態で16pxです。デザインのテイストや書体、ターゲット層に合わせてこの辺りからサイズ選定していくといいと思います。

これは12ptです。これは12pt(太字)です。

これは13ptです。これは13pt(太字)です。

これは14ptです。これは14pt(太字)です。

これは15ptです。これは15pt(太字)です。

これは16ptです。これは16pt(太字)です。

これは17ptです。これは17pt(太字)です。

これは18ptです。これは18pt(太字)です。

本文以外のフォントサイズについて

本文以外の文字サイズについては、大まかなルールなどが見当たりませんでした。普段私がデザインする時は「いいな、真似したいな」と思ったデザインを参考に決めることが多いです。
以下、バナーを作るときや本文以外の文字サイズを決める際の参考になればと。

これは19ptです。これは19pt(太字)です。

これは20ptです。これは20pt(太字)です。

このブログの見出し<h5>は20pxです。

このブログの見出し<h4>は20pxです。

これは21ptです。これは21pt(太字)です。

これは22ptです。これは22pt(太字)です。

このブログの見出し<h3>は22pxです。

これは23ptです。これは23pt(太字)です。

これは24ptです。これは24pt(太字)です。

このブログの見出し<h1>は24pxです。

このブログの見出し<h2>も24pxです。

これは25ptです。これは25pt(太字)です。

これは26ptです。これは26pt(太字)です。

これは27ptです。これは27pt(太字)です。

これは28ptです。これは28pt(太字)です。

これは29ptです。これは29pt(太字)です。

これは30ptです。これは30pt(太字)です。

これは31ptです。これは31pt(太字)です。

これは32ptです。これは32pt(太字)です。

これは33ptです。これは33pt(太字)です。

これは34ptです。これは34pt(太字)です。

これは35ptです。これは35pt(太字)です。

これは36ptです。これは36pt(太字)です。

これは33ptです。これは37pt(太字)です。

これは38ptです。これは38pt(太字)です。

これは39ptです。これは39pt(太字)です。

これは40ptです。これは40pt(太字)です。

さて、キリがないのでこの辺で。