Webサイトの文字サイズについて考える。

ナレッジ

今回はWebサイトを作る過程でのお話です。

Webサイトのデザインを考えるときの大きな要素として、配色やレイアウトのほかに文字構成があります。書体については色々と悩むけれども、文字サイズについては何気なく設定している人が多いのではないかと思います。

フォントサイズについては傾向として、小さいと読みにくくなる反面、すっきりとまとままった雰囲気となり、逆に大きいと読みやすい分、野暮ったさが出てきます(あくまで傾向です)。

基準となるフォントサイズについては、色々な文献や考察がWeb上に出回っているので、主だったところをご紹介いたします。

特にモバイルファーストとか、モバイルフレンドリーなどスマートフォンを中心としたサイト制作を意識するようになった現在では、見やすさ、読みやすさについての大きな要素となりますので、今一度しっかり考えてみましょう。

基準とされる文字サイズ

基準として考えるのは、GoogleやAppleで推奨されているフォントです。
多くの方が検索をはじめとしてしてGoogleのサービスを利用し、Webではないですが、Appleから提供されるアプリを利用されていると思います。

多くの方が利用するこれらのサービスが推奨するフォントサイズが、現在私たちの見るWebサイトが目安として採用しています。
モバイルフレンドリー対応 第2回:「GoogleとAppleの推奨フォントは?」

読みやすい=多くの人が読んでいる=有名・人気サイト30サイトのフォントサイズを検証した記事なども読み応えがあります。
<株式会社ペコプラ様>【検証】スマートフォンで読み易いfont-sizeとは?

最初の記事が書かれたのは2015年、あとの記事が書かれたのが今年です。
このあたりのフォントサイズがスタンダードになっていることが伺えます。

ただ「漠然とこのあたりのサイズにした方がいいよ」という事ではなく、運営するWebサイトの目的や対象となる年齢層によって異なってきます。
一番大切なのは【なぜこのフォントサイズ/行間にしたのか】ちゃんとした理由付けができていることではないかと思います。

STUDIO札幌の場合…

ちなみに
今ご覧いただいているデジタルハリウッドSTUDIO札幌のサイトは、PC・スマホが16px、行間は1.8emです。Webをこれから学ぶ方がご覧になるWebサイトなので、サイズはごくごく標準値、ゆったりとして見ていただけるように、行間はちょっとゆとりを持たせています。

Webサイトを作る(デザインする)上で参考にしていただけたらと思います。
もっと幅広く、もっといろいろとWebの事を学びたい!という方は、ぜひデジハリへ!

授業見学&体験してみよう!

気になることはなんでも聞いてくださいね!まずは気軽に無料体験!

無料説明会のお申し込みはこちら