タイポグラフィ～書体が魅せるWebデザイン～

『Webデザインの基本～きちんと入門～』を読んで学んだことを
アウトプットしていきます。
今回は、「タイポグラフィについて」です。

文字の役割について。

文字の役割は情報の記録と伝達です。
書体に意識がいかずに、内容や印象が自然に伝わるのがいいデザインです。

文字に関するデザインは3つに分けて考えます。
1.ナビゲーション（視認性）
2.見出し　　　　（協調性）
3.本文　　　　　（可読性）
この3つを意識して書体を選んでいきましょう！

欧文書体と和文書体

★欧文書体はセリフ書体とサンセリフ書体に分けられます。
セリフ書体（ローマン体）
横線が細く文字の端に小さな飾り（セリフ）がつくものです。
※可読性が高く書籍の本文などで使われます。

サンセリフ書体
セリフがなく太さが均一であるものです。
19世紀初頭に主に広告用の書体として作られました。
※小さくても可読性が高いことから、ナビゲーションや本文で使われます。

★和文書体は明朝体とゴシック体に分けられます。
明朝体はセリフ書体同様に書籍の本文や見出しで使われます。
（ヒラギノ明朝・游明朝体・MS明朝）

ゴシック体は普遍性があり力強さ・柔らかさ・やさしさと
様々な印象を持ちます。
主に、広告や看板、スクリーン表示などに向きます。
（ヒラギノ角ゴ・游ゴシック体・メイリオ・MSゴシック）

書体ファミリーについて

同じコンセプトのデザインで、主にウェイト（太い・細い・中間）
のバリエーションをもった書体をまとめてファミリーといいます。

コンデンスやイタリック

コンデンス（平体）
横幅が狭く設計された書体で、
狭い領域で長い文章を表示させたいときに有効です。

イタリック（斜体）
セリフ書体を斜めにしたもので、斜めにしつつも
見やすくデザインされたものをいいます。
※サンセリフ書体ではただ斜めにしただけでオブリークと呼ばれます。

書体の選び方について

サイトのコンセプトから考えましょう。
サイトの目的・情報量などを考慮して書体を選びます。

例えば・・・・
・信頼感のあるデザインなら、明朝体。
・歴史や和をイメージするなら、行書体や楷書体。
・優しい雰囲気のデザインなら、丸ゴシック。

同じゴシック体でもサイズやウェイトが異なれば印象は変わります。
デザインの用途に合わせて組み合わせてみてください。

ちなみに、Webサイトのナビゲーションにはゴシック体が多く使われます。
理由は、視認性が高く小さな文字でも見やすいためです。
ユーザーに意識させずに文章を読ませたいときは
ゴシック体が向いています。

本文の組版

Webサイトでは一行あたり35～45文字が見やすいといわれます。
文字サイズはブログなら16～18px。
スマホでは行間をPCより少し狭くした方が読みやすいです。

ユーザーの使うデバイスや目線を考えることが大切です。

文字コード

コンピューター上で文字を扱うために、個別に割り当てれた数字
のことを文字コードといいます。（Shift－JISやUTF－8など）

Webフォントサービス

・Type Square（モリサワによるフォントサービス）
・FONTPLUS （ＳＢテクノロジーが提供するサービス）
・Fonts.com　（MonotypeによるECサイト）

最後に・・・。

Webサイトにおいて文字はとても重要で、見栄えにも影響を与えることから
細かく作りこんでいくことが必要だと感じました。
日ごろから様々な書体に触れていきたいと思います。

次回は「HTML5とCSSについて」勉強していきます。
難しそうですが頑張りたいと思います。

Yuka.