WEBサイトの文字デザインについて

見出しとジャンプ率について

文章の見出しをデザインする時は、文字のジャンプ率についても考えておきましょう。ジャンプ率とは見出しと本文の文字サイズの比率のことです。

文字サイズの大きさの違いが大きいと『ジャンプ率が高い』違いが少ないと『ジャンプ率が低い』といいます。

ジャンプ率が高いと躍動的で楽しい雰囲気になり、低くなると上品で落ち着いたような雰囲気になります。

フォントの種類を変えよう

「font-family」プロパティをカスタムcssでフォントの種類を設定します。

指定したフォントをユーザーがインストールしていない場合は、ブラウザーで設定しているデフォルトのフォントが表示されます。

font-familyの値には、文字フォントの名前(フォントファミリー名)を全角、半角、スペース含み正しく記述します。フォント名にスペースがある場合は、ダブルクォーテーション(” “)、もしくはシングルクォーテーション(‘ ‘)で囲みます。ブラウザーに指定のフォントが入っている前提で指定しますので、WindowsやMac、モバイルで使用するブラウザーに普及しているフォントを複数指定することが推奨されています。”font-family”は、左から優先的に適用されます。

記述方法

body { font-family: "游ゴシック", "YuGothic", "メイリオ", meiryo, sans-serif; }

「Windows 8.1」、「OS X Mavericks」から、”游ゴシック”というフォントが搭載されるようになり、Macとwindows OS共通のフォント指定が可能になりました。

上記のコード一番最初に「游ゴシック」と「Yu Gothic」を指定しています。日本語とアルファベットを使用している理由は、OSやブラウザーなどの環境により、日本語の指示を無視してしまう環境があるためです。その次にwindows OSに搭載されている「メイリオ」と「meiryo」、一番最後に最も汎用的に使える総称ファミリー名で「sans-serif」を指定しています。こうする事で、比較的新しいOSや環境には、「游ゴシック」が適用され、それ以外のWindows系のOSには「メイリオ」、古いバージョンのOSなどには総称ファミリー名の「sans-serif」が適用されます。

フォントの種類

明朝体

明朝体の文字は、太い線画や細い横画「ウロコ」と呼ばれる三角形の装飾など、筆で書いたような文字の特徴があります。

デザインとして丁寧でかしこまった印象になります。筆で書かれたような特徴もあるため、和風のデザインで使われることも多くあります。明朝体は一般的に太さの強弱がありゴシック隊に比べて細い書体なので、長い文章には明朝体が適切です。

ゴシック体

ゴシック体は、横線と縦線の太さがほぼ同じでウロコなどの装飾がほとんどない書体です。

明朝体よりも強く、太文字にしても読みやすい特徴があります。装飾がない分、どんなデザインにも合わせやすい特徴があります。見出しやタイトルなどの短い文章はゴシック体が向いています。要点だけを端的に説明するような場面では全体の読みやすさよりも遠くからでもしっかりと文字を認識できることが求められるからです。

装飾系フォント

装飾を目的としたフォントは「読ませる」よりも「見せる」ことを目的として製作されているためデザインの一部と考えた方がよいでしょう。印象的な書体は特徴がある分ユーザーの読み間違えも誘発する可能性があるので長文に使うのは向いていません。

見出しや短文に使い視覚効果を与えることができますが、本文には使用しない方が無難です。

文章をそろえる「text-align」プロパティ

text-alignプロパティでテキストを揃える位置を指定します。

日本語の場合デフォルトで左揃えになっています。

中央揃えは短文に

デザインの中で中央揃えにしたい場合は多々あると思いますが、中央揃えは行のスタートの位置がバラバラになり段落や文章が認識しづらくなりあまり良いデザインにならないことがあります。

２、３行の短文なら中央揃えでもうまくみせることができますがそれより長くなる場合は両端揃えや左揃えにした方が読みやすいでしょう。