HTML&CSSとWebデザイン＃6 〜文字の装飾〜
お疲れ様です。コーヒーです。
第6回の勉強内容も引き続きHTML＆CSSです。
参考書はこちらです。
今回はCSSの文字装飾についてまとめていきます！！
文字の大きさ「font-size」
font-sizeプロパティでは文字サイズの指定が行えます。単位は複数存在し、「px」「rem」「％」等があります。CSSでの書き方は以下のようになります。
適切な文字サイズ
文字サイズは小さいほど読みにくくなります。文章主体のサイトでは一般的に14px〜18pxの文字サイズが使用されていることが多いです。
また、デザインの統一感を持たせるために、文字サイズのバリエーションは2〜5種類程度にした方が良いです。
見出し率とジャンプ率
見出しのデザインを考える上で重要になるものが、文字のジャンプ率です。ジャンプ率とは見出しと本文の文字サイズ比率のことです。文字サイズの大きさの比率が大きいとジャンプ率は高くなります。ジャンプ率が高いと躍動的で楽しい雰囲気になり、低いと上品で落ち着いた雰囲気になります。
フォントの種類「font-family」
font-familyプロパティではフォントの種類を指定できます。複数のフォントを指定することもでき、「,」で区切り、先に指定したものから順に適用されます。
フォントの種類
画面全体のイメージはフォントにより大きく変化します。代表的なフォントを紹介し、イメージを掴みましょう。
明朝体は太い線画や細い線画、「ウロコ」と呼ばれる三角形の装飾など、筆で書いたような特徴があります。デザインとして丁寧でかしこまった印象を持ち、和風のデザインでも使用されます。
明朝体は線画と横画で大きさの強弱があるため、長い文章には明朝体が適切です。
ゴシック体
ゴシック体は、横線と縦線の太さがほぼ同一で「ウロコ」等の装飾がほとんど存在しないことが特徴です。明朝体に比べ強い印象をあたえ、太字にしても読みやすい特徴があります。装飾がない分、どんなデザインにも合わせやすいという特徴があります。
見出しやタイトル等、短い文章にはゴシック体が適切です。
装飾系フォント
装飾を目的としたフォントの多くあります。「読ませる」ことより「見せる」ことに重きをおいたフォントで、デザインの一部としてとりいられることも多くあります。印象的なフォントである分、ユーザーが読み間違いをしてしまうこともあるフォントです。長文に使用してしまうと読みづらい文章になるため、本文には使用しないようにしましょう。
