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

2021.03.02

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

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

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

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

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

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

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

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

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

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

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

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

STUDIO横浜は駅直結の好立地で学習ができます！

渋谷駅 – 横浜駅　約30分

茅ヶ崎駅 – 横浜駅　約25分

横須賀駅 – 横浜駅　約45分

武蔵小杉駅 – 横浜駅　約10分

川崎駅 – 横浜駅　約10分

乗り継ぎなし！駅直結で雨に濡れる心配なしの好立地はSTUDIO横浜だけ！

神奈川県初のデジタルハリウッド STUDIOへどうぞお越しください♪