Perl Web開発者のHTML・CSS入門

font-size - フォントサイズを設定する - CSS入門【CSS3対応】

フォントサイズを設定にするには「font-size」をスタイルシート(CSS)で設定します。

<div style="font-size:20px">フォントサイズ20px</div>

<div style="font-size:30px">フォントサイズ30px</div>

フォントを大きくする効果

Webデザインにおいてフォントを大きくする効果について、書いておきます。

当たり前と言えば当たり前なのですが、画面を見続けていると錯覚してきます。

大きなフォントは、ユーザーの目に入りやすい

大きなフォントの部分は、ユーザーが一番最初に見ます。大きなフォントと写真のセットであれば、最もよく目に入ります。

見出しのフォントをは大きく

見出しのフォントをは大きくします。見出しは、ユーザーが一番最初に見る部分です。

大きなフォントは前面に、小さなフォントは背面に

Webデザインでは、画面の奥行きを意識してみてください。大きなフォントは前面に出る、小さなフォントは背面に潜るというイメージです。

これは、フォントサイズ以外でも、色や面積やフォントの太さを考えるときも同じです。

デフォルトのフォントサイズは16pxがお勧め

現代的なWebサイトは、スマートフォンから見られることが、当然と考えておいた方が良いので、フォントサイズは、大き目が望ましいと考えます。

お勧めは、デフォルト16pxです。

また、フォントサイズを、16px以上にしておくと、iphone/safariでのフォーム入力時の拡大を防ぐこともできます。

iphone/safariでフォーム入力時に自動的に拡大するのを防ぐ

px, em, rem, %などフォントサイズを指定する単位がたくさんあるけど何がいいの?

Perlゼミ HTML・CSS入門のお勧めはpxです。

1. わかりやすい

2. スマートフォン対応では、結局のところ、必要に応じて、フォントサイズを部分的に指定しなおすことになる

スマートフォンで十分読めるフォントサイズにしておいて、パソコンの画面では、少し大きく感じるのが、手軽だと思います。その上で、部分的に、フォントサイズを調整みたいな。