恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

Webデザインとタイポグラフィ【フォントの基本】

投稿日:2018-04-25 更新日:




typography

サイトの作成において、コンセプトにあった書体を選択することや、文字の行間やレイアウトを調整してユーザーにとって読みやすい文章を心がけることは非常に大切です。

今回は、フォントの種類やルールについて書いていこうと思います。

 

フォントの種類

フォントは、和文と欧文の2種類があります。その中で、大きく分けて4つの種類に分別することができます。

和文

 

  • 行書体・・・フォーマル、和風、伝統的
    例):HGP行書体、HG行書体、DF行書体
  • 明朝体・・・女性的、繊細、上品、誠実、可読性が高い、本文に適している
    例):MS P明朝,游明朝
  • ゴシック体・・・男性的、力強さ、安定感、親近感、見出しやタイトルに適している
    例):游ゴシック、MS Pゴシック、ヒラギノ角ゴ
  • 手書き・・・若い、親しみ、個性的なデザインに適している
    例):しろくまフォント、えり字、りいもなか

 

欧文

  • スクリプト体・・・エレガント、おしゃれ、信頼感
    例):Edwardian Script、Zapfino、Chopin Script
  • セリフ体・・・女性的、繊細、可読性が高い、本文に適している
    例):Century、Garamond、Bodoni、Optima
  • サンセリフ体・・・男性的、力強い、安定感、親近感、見出しやタイトルに適している
    例):Arial、Helvetica、Futura、Verdana
  • 手書き・・・若い、親しみ、個性的なデザインに適している
    例):Leafy Free Brush Font、Lovinn、Prokopis

手書きを含む江戸書体やポップ体などの特殊書体は種類が数多くありますが、これらの書体はタイトルなどのデザイン性を重視する場所に使い、可読性を考慮して本文全体には使うことは避けたほうがいいでしょう。

次に、美しく読みやすいサイト作りのためのポイントを紹介します。

 

行間調整して文章を読みやすくする

一般的に、日本語では、line-height:1.5~2 欧文フォントでは1.2ほど行間を空けることが好ましいとされています。もちろんフォントの書体によって変える必要はありますが、ベースとしての考え方を覚えておきましょう。

line-heightにpx等の単位を指定すると、親要素で計算された値がそのまま子要素にも継承されるためあまりおすすめしません。また、ガイドラインでは1行内の文字は全角で40字以内を推奨しています。

 

Before

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。

 

After

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。

 

フォントサイズにメリハリをつける

一般的によく本文で使われるフォントのサイズは14~16pxで、見出しは本文の2倍以上のサイズを指定し、font-weightで太さを調整すると本文と見出しにコントラストができて視認性が向上します。

 

Before

徒然草
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。

 

After

徒然草

つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。

 

文字が大きいと可読性は上がりますが、全体的にのっぺりとした印象になります。
一方で、文字が小さいと可読性は下がるものの、スマートで引き締まった印象を与えることが出来ます。

 

均等配置で文章を揃える

CSSプロパティのtext-align:justifyを使うことによって、文章の均等配置をすることができます。均等配置をすることで、雑誌のような文章が揃った見せ方ができます。

 

Before

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mag2a aliqua.

 

After

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

IEではtext-align:justifyを指定すると自動的にtext-justify:autoが適用されるため、これを変更するためにtext-justifyプロパティにinter-ideographを指定する必要があります。

autoの値はinter-wordになっており、これは英単語用の値であるため日本語用のinter-ideographに変更する必要があるためです。

 

字間を調整する

letter-spacingを使うことによって字間を調整することができます。
デフォルトはnormalですが、0になることが多いので、数値+emと指定するとフォントサイズに応じて字間を調整してくれるのでおすすめです。

字間をはなすことでゆったりとした印象になり落ち着いて読むことが出来ます。
一方で、字間を詰めることでまとまった印象になり緊張感が生まれます。

 

Before

これも昨日とうとうその約束院においてののうちに叱るだます。いよいよ生涯に自白感は至極この病気ますだだけとできるて来でしょからは相違云っますたば、ある程度には行かたたうです。

 

After

これも昨日とうとうその約束院においてののうちに叱るだます。いよいよ生涯に自白感は至極この病気ますだだけとできるて来でしょからは相違云っますたば、ある程度には行かたたうです。

 

字間の間隔については下記のサイトでゲーム感覚で学ぶことができます。
遊び方は、単語が出てくるので、その単語の字詰めを自分の感覚で行うという非常にシンプルなゲームです。 字詰めの感覚を養うためにおすすめです。
http://type.method.ac/
 

長文は左寄せ

文章は、文字頭をそろえて左寄せにすると可読性があがります。
人は左から見るという傾向があるため、左に文字頭をそろえておくとすっきりとした印象を与えます。

 

Before

同じユーザのサーバによる、合衆国の公表権物や、被既存者(GFDL観点文献可否対象付フリー情報)の規定権法による書籍要求前記のものん、対話と可能ませませことに著作するばいない。

 

After

同じユーザのサーバによる、合衆国の公表権物や、被既存者(GFDL観点文献可否対象付フリー情報)の規定権法による書籍要求前記のものん、対話と可能ませませことに著作するばいない。

 

助詞や単位はフォントサイズを一回り小さくする

助詞や単位を一回り小さいサイズにするだけで読みやすい文章を作ることができます。たったこれだけでもだいぶ印象が変わるので是非活用していきましょう。

 

Before

月とすっぽん    「括弧」

 

After

すっぽん     括弧

 

このように、フォントの種類や使い方のみで様々な印象を与えることができます。
デザインを見直す時には、画像やボックスのレイアウトだけでなくフォントにも十分気をつけて見ることが大切です。




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。