文字や文章の扱い

文字サイズ 14pxから18px程度が一般的 (P98)。

サイズバリエーション 2から5種類程度にとどめる。

本文で使う文字サイズを決めた後、これを基準に見出しや注釈などの文字サイズを決める。

ジャンプ率見出しと本文の文字サイズ比率をジャンプ率という。

ジャンプ率大躍動的で楽しい雰囲気
ジャンプ率小上品で落ち着いた雰囲気

段落の文字数

スマートフォンを前提に段落の文字数を決める。2行から3行または約100文字程度で改行する。同じ文字数でもデバイスにより長文に感じられるそうです。

詳しくは【Web文章の改行ルール】ブログを読みやすくする適切な改行とは？を参照のこと。

フォントの指定

font-family プロパティでフォントの種類を指定する(P99)。 , (カンマ)区切りで先に指定したフォントから順に適用される。

.case1 {
  font-size: 20px;
  font-family: 'ヒラギノ丸ゴ Pro W4', 'Hiragino Maru Gothic pro', sans-serif;
}
.case2 {
  font-size: 1.25rem;
  font-family: '遊ゴシック体', 'Yu Gothic', YuGothic, serif;
}

フォントの種類と統一

代表的なフォントは次の通り。 (P100)

明朝体:長い文章に適切
ゴシック体: 見出しやタイトルに向いている

本文はシンプルなフォントを選ぶ。 (P101) 使用するフォントは1から3種類までにとどめる。

文章を揃える

textalign プロパティで文章を揃える。 (P103)中央揃えは行のスタートが一致しないので短文に使う。 (P103)

left: 左揃え
right: 右揃え
center: 中央揃え
justify: 両端揃え

すぐ使えるダミーテキスト日本語 Lorem ipsumでダミー文書を作成。 textalign プロパティの装飾効果を確認。

...
    <p class="aligin1">left<br>私も事実ぷんぷんそういう学習院によってののためからきまっであり。とにかく生涯をお話家はいくらこの話ですうかもへしていないをは講演するたたで、どうには存じですでなけれた。国家が擡げだっものも大分今をむくむくませですらし。<br>ちゃんと嘉納さんが応用口上さっそく解釈がおっしゃれで権力この人格私か徴をという皆返事ですでしうまして、その九月はあなたか人興味に見つかりば、久原さんののを利器のそれでいくらご講演とすれからここ比喩にご専攻が移れようにもっとご活動にしないでしょから、まあむくむく［＃「がもっないばいるでしのへ積んなくず。すなわちただご精神と云っ事も多少不都合と押したて、その自信がは云わますてという貧民で繰り返しているなな。</p>
    <p class="aligin2">right<br><!-- 同文 --></p>
    <p class="aligin3">center<br><!-- 同文 --></p>
    <p class="aligin4">justify<br><!-- 同文 --></p>

.aligin1 {
  text-align: left;
}
.aligin2 {
  text-align: right;
}
.aligin3 {
  text-align: center;
}
.aligin4 {
  text-align: justify;
}

left は右端が不揃いだが、 `justify* なら両端がきちっと揃う　(P103)。私には違いがわからなかった。iPnone X 表示に切り替えてスクロールを繰り返すうちに不揃いであることが確認できた。