【ウェブサイト】ブログ記事1行の読みやすさは視界

ウェブサイトの読みやすい1行文字数
  • PC、タブレット:40〜50文字
  • スマホ:20〜25文字

 わたしは読みやすさの第一基準は、視界に収まる範囲だと思っている。
 まずは、眼球をさほど動かさない、視界に収まる範囲を1行の記事コンテンツ幅にして、上記の文字数に収まる文字サイズ、文字間隔、行間を決めるのがいいだろう。

ニュースサイト

  • 1行の文字数:33〜47文字
  • フォントサイズ(font-size):16〜18px
  • 行間(line-height):22.4〜32.4px
  • 1行の記事コンテンツ幅:600〜840px

参考:Yahoo!ニュース、日本経済新聞、朝日新聞、東洋経済ONLINE、NHKニュース、毎日新聞デジタル、TBS NEWS DIG、産経ニュース、livedoor News、mixiニュース、中央日報

当サイト

  • PC1行の文字数:42文字
  • スマホ1行の文字数:23文字
  • PCフォントサイズ:font-size: 18px;
  • スマホフォントサイズ(可変):font-size: medium;
  • 文字間隔:letter-spacing: normal;
  • 行間:line-height: 32.4px;
  • サイト幅:1200px(padding: 0 48px 0 48px;)
  • 1行の記事コンテンツ幅:800px(padding: 0 32px 0 32px)

補足:視野と視界の違い 

  • 視野:眼球を1点に注視して動かさずに見える範囲のこと
  • 視界:眼球を上下左右に動かして見える範囲のこと
目次