｜ Notes

Webデザインにおけるタイポグラフィの考察

の を と

2016年5月16日（月）に社内勉強会でWebにおけるタイポグラフィについて発表しました。このエントリーはその発表資料です。なおこのエントリー中の例はMacのOS X El CapitanのChromeで確認しています。画像を使わずにどこまで出来るかトライしてみたかったので他のブラウザでは意図した表示をしていないです。画面サイズはPCのサイズを想定しています。

「の」「を」「と」はTypography 09の「組版上級者になるためのメソッド　工藤強勝さんのスタッフ指導」より

うちでは独自でまとめた書体の見本帳があるんです。仮名の中でも書体の特徴が出やすく使用頻度も高い「の」「を」「と」などを拡大し、縦、横、それぞれの本文組の例や見出し使用例なども載せてあるので、スタッフは常にそれを見て勉強しています。

とあったので、「の」「を」「と」をTP明朝でつくってみました。

目的

紙のタイポグラフィのノウハウを参考に、WebタイポグラフィとしてCSSでどこまで表現可能なのか理解を深めることを目的としています。

タイポグラフィ（英: typography）は、活字（あるいは一定の文字の形状を複製し反復使用して印刷するための媒体）を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸である。
タイポグラフィ - Wikipedia

Wikipediaには印刷物と書かれていますが、Webフォントをはじめとした環境の変化で、私たちが普段制作をしているWebサイトやデジタルサイネージなどでもタイポグラフィによる表現力があがっていると感じています。しかしながら、紙のデザイナーの方に比べると私自身があまりにもタイポグラフィについての知識が不足していると感じたため、エディトリアルデザインに関する書籍なども参考にしながら調べました。

タイポグラフィによって得られる効果

  1. 文章が読みやすくなり、内容が伝わる
  2. 表現力が上がり、ブランディングが伝わる

調べてきた内容

  1. 文字サイズ（font-size）
  2. 行間（line-height）
  3. 字間（letter-spacing）
  4. 文字詰め
  5. 段落
  6. フォント
  7. 約物
  8. 縦書き

文字サイズ、行間

ニュースサイト、新聞社、雑誌社、グローバル企業から5サイトずつピックアップし、テキスト周りのCSSの設定を調べました。

リサーチの量が少なく、ピックアップをしている時点でバイアスがかかっているかと思いますが、ニュースサイトと新聞社は検索結果の上位に出てきたもの、雑誌とグローバル企業はいくつか見た中で、特徴があったものをピックアップしました。調査方法はスマホサイトで指定すべき最適なフォントサイズとは？（モバイルフレンドリー対応） | ブログ | SINAP - 株式会社シナップを参考にしました。

本文フォントサイズ

  • 14px—4サイト
  • 15px—4サイト
  • 16px—8サイト
  • 17px—1サイト
  • 18px—3サイト

本文行間

  • 1.4—1サイト
  • 1.5—4サイト
  • 1.6—8サイト
  • 1.7—1サイト
  • 1.8—4サイト
  • 1.9—1サイト
  • 2.2—1サイト

ジャンルによって偏りはありますが、本文はフォントサイズ16px、行間1.6が一番多かったです。

タイトルフォントサイズ

  • 14px—1サイト
  • 18px—2サイト
  • 19px—1サイト
  • 22px—4サイト
  • 24px—3サイト
  • 26px—2サイト
  • 27px—1サイト
  • 28px—1サイト
  • 29px—1サイト
  • 30px—3サイト
  • 32px—1サイト

タイトル行間

  • 1—1サイト
  • 1.1—1サイト
  • 1.2—2サイト
  • 1.3—2サイト
  • 1.4—2サイト
  • 1.5—5サイト
  • 1.6—2サイト
  • 設定なし—5サイト

タイトルは22px、24px、30pxなどサイトによって様々、行間は1.5が多かったです。本文のフォントサイズを大きく変えると読みやすさに大きく影響がでるため、タイトルや見出しで変化をつけて、それぞれのサイトらしさを表現しているのではないかと思いました。

line-height: 1.2emについて

欧文は文字の構造上行間を詰めても読みやすい、Googleも1.2emを推奨しています。しかしながら、例えばアップルでは複数の言語のサイトを持っているため、英語とサイトと日本語サイトではline-height :1.4446で統一されていました。

和文と欧文の構造の違いは、Webデザイナーのためのタイポグラフィと文字組版 が参考になります。

行間による印象の違い

松田行正さんの「マネするだけでエディトリアルデザインが上手くなるはじめてのレイアウト」によると

編集デザインの業界には理想的な行間を表す「四分二分アキ」という言葉があります。（中略）マツダオフィスでは13Q行送り10Hアキがスタンダード。10Hを基準に、少しハードルを下げたいときは11H、小説など改行が多いときは8Hというふうに調整します。 — p.026 行間と行長の黄金比より

行間を広めにとると文章のハードルが下がったような印象をあたえようです。

line-height: 1.9の例

アニュアルレポートとは一般的には企業の年次報告書のことなのですが、NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。2005年に1年の総括として、撮った写真、旅行先、聞いた音楽、読んだ本などを手作業でまとめたそうです。2006年は行動をもっと詳細に記録して、レストランで何を好んで食べて飲んだかなどが記録されたそうです。2006年からリクエストが多かった理由から印刷物として発行し、2007年は更に詳細に消費したカフェインの量やニューヨークの地図でどこの通りを歩いたかなどを視覚化しています。2007年まではより詳細にという流れだったのですが、2008年からテーマを決めてある軸を基準にデータを分析するというアプローチになったようです。

line-height: 1.5の例

アニュアルレポートとは一般的には企業の年次報告書のことなのですが、NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。2005年に1年の総括として、撮った写真、旅行先、聞いた音楽、読んだ本などを手作業でまとめたそうです。2006年は行動をもっと詳細に記録して、レストランで何を好んで食べて飲んだかなどが記録されたそうです。2006年からリクエストが多かった理由から印刷物として発行し、2007年は更に詳細に消費したカフェインの量やニューヨークの地図でどこの通りを歩いたかなどを視覚化しています。2007年まではより詳細にという流れだったのですが、2008年からテーマを決めてある軸を基準にデータを分析するというアプローチになったようです。

ニュースなど硬めの文章は狭め、エッセイなどは柔らかめの文章は広めがいいのではないかと思います。

字間による印象の違い

前述のリサーチで本文のletter-spaceを調整しているサイトがいくつかありました。

  • NHK NEWS WEB — letter-spacing: 0.6pt;
  • 東洋経済ONLINE — letter-spacing: 0.05em;
  • ダイヤモンド・オンライン — letter-spacing: 0.06em;
  • 現代ビジネス — letter-spacing: 0.1em;
  • VOGUE — letter-spacing: 0.1em;

letter-spacing指定なし

アニュアルレポートとは一般的には企業の年次報告書のことなのですが、NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。2005年に1年の総括として、撮った写真、旅行先、聞いた音楽、読んだ本などを手作業でまとめたそうです。2006年は行動をもっと詳細に記録して、レストランで何を好んで食べて飲んだかなどが記録されたそうです。2006年からリクエストが多かった理由から印刷物として発行し、2007年は更に詳細に消費したカフェインの量やニューヨークの地図でどこの通りを歩いたかなどを視覚化しています。2007年まではより詳細にという流れだったのですが、2008年からテーマを決めてある軸を基準にデータを分析するというアプローチになったようです。

letter-spacing: 0.05em

アニュアルレポートとは一般的には企業の年次報告書のことなのですが、NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。2005年に1年の総括として、撮った写真、旅行先、聞いた音楽、読んだ本などを手作業でまとめたそうです。2006年は行動をもっと詳細に記録して、レストランで何を好んで食べて飲んだかなどが記録されたそうです。2006年からリクエストが多かった理由から印刷物として発行し、2007年は更に詳細に消費したカフェインの量やニューヨークの地図でどこの通りを歩いたかなどを視覚化しています。2007年まではより詳細にという流れだったのですが、2008年からテーマを決めてある軸を基準にデータを分析するというアプローチになったようです。

letter-spacing: 0.05emのほうが少しゆったりとした印象があります。

文字詰め

ベタ組み

ウ ェ ブ デ ザ イ ン
ウ ェ ブ デ ザ イ ン

詰め組み

ウ ェ ブ デ ザ イ ン
ウ ェ ブ デ ザ イ ン

字間を広げる

ウ ェ ブ デ ザ イ ン
ウ ェ ブ デ ザ イ ン

1文字づつspanタグで囲っているため実際にはベタではないのですが、比較しやすいようにしました。letter-spacingは文字の後ろを調整することができます。文字を詰めると力強さや緊張感、字間を広げると優しい印象になります。

CSSの文字詰めには、以下のパラメータもあるようですが、意図した形にしたい場合は一文字ずつ詰めるしか無いかなと思いました。JSで処理する方法もあるようです。

  • text-rendering: optimizeLegibility
  • font-variant-east-asian: proportional-width

Webサイトではありませんが、細かすぎるが効果的なSmartNewsのUI/UX「文字とスクロールと色相環」 | Find Job! StartupによるとSmartNewsはタイトルの形態素解析をして字詰めをしているようです。記事は古いですが、現在ダンロードできるアプリも実現されていました。

段落

テキストが中央寄せの時の工夫

設定なし

2005年に1年の総括として、撮った写真、旅行先、聞いた音楽、読んだ本などを手作業でまとめたそうです。

文節ごとにspanで囲ってdisplay:inline-blockを指定した場合

2005年に1年の総括として、撮った写真、旅行先、聞いた音楽、読んだ本などを手作業でまとめたそうです。

2005年に1年の総括として、撮った写真、旅行先、聞いた音楽、読んだ本などを手作業でまとめたそうです。

レスポンシブ対応がされている場合に、ウィンドウ幅によっては1文字だけ落ちているケースがありますが、spanで調整することにより、意図しない改行を防ぎ、リズム感も生まれます。

均等配置（行頭行末揃え／ジャスティファイ）

行頭行末揃えなし

アニュアルレポートとは一般的には企業の年次報告書のことなのですが、NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。2005年に1年の総括として、撮った写真、旅行先、聞いた音楽、読んだ本などを手作業でまとめたそうです。2006年は行動をもっと詳細に記録して、レストランで何を好んで食べて飲んだかなどが記録されたそうです。2006年からリクエストが多かった理由から印刷物として発行し、2007年は更に詳細に消費したカフェインの量やニューヨークの地図でどこの通りを歩いたかなどを視覚化しています。2007年まではより詳細にという流れだったのですが、2008年からテーマを決めてある軸を基準にデータを分析するというアプローチになったようです。

行頭行末揃え

アニュアルレポートとは一般的には企業の年次報告書のことなのですが、NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。2005年に1年の総括として、撮った写真、旅行先、聞いた音楽、読んだ本などを手作業でまとめたそうです。2006年は行動をもっと詳細に記録して、レストランで何を好んで食べて飲んだかなどが記録されたそうです。2006年からリクエストが多かった理由から印刷物として発行し、2007年は更に詳細に消費したカフェインの量やニューヨークの地図でどこの通りを歩いたかなどを視覚化しています。2007年まではより詳細にという流れだったのですが、2008年からテーマを決めてある軸を基準にデータを分析するというアプローチになったようです。

アクセシビリティのガイドラインでは行頭行末揃えは推奨されていないようです。

c) テキストが、均等割付けされていない[両端そろ（揃）えではない。]。
1.4.8　視覚的提示の達成基準より

しかしながら日本語中心の本文であれば、text-align:justifyを使ったほうがグリットが整っている印象があっていいのではないかと思いました。

行長

松田行正さんの「マネするだけでエディトリアルデザインが上手くなるはじめてのレイアウト」によると

行長は、現実にはページ数の関係上40〜43字が中心ですが、理想をいえば、目を上下に動かさなくても読める32〜36文字くらいがベスト。皆さんも読みやすいと感じる文字組があれば、文字を数えてみましょう。
p.026 行間と行長の黄金比より

アクセシビリティのガイドラインでは全角文字の場合40文字とされています。

b) 幅が80字を越えない（全角文字の場合は、40字）。
1.4.8　視覚的提示の達成基準より

フォント

Mac El Capitanに追加された日本語フォント

  • クレー（font-family:klee;）
  • 游明朝体+36ポかな（font-family:'YuMincho +36p Kana';）
  • 筑紫A丸ゴシック（font-family:'Tsukushi A Round Gothic';）
  • 筑紫B丸ゴシック（font-family:'Tsukushi B Round Gothic';）
  • ヒラギノ角ゴシック 10種類（font-family:'Hiragino Sans';font-weight:normal;）

Hiragino Sansについて

  • ヒラギノ角ゴシック W0（font-family:'Hiragino Sans W0';）
  • ヒラギノ角ゴシック W1（font-family:'Hiragino Sans W1';）
  • ヒラギノ角ゴシック W2（font-family:'Hiragino Sans W2';）
  • ヒラギノ角ゴシック W3（font-family:'Hiragino Sans W3';）
  • ヒラギノ角ゴシック W4（font-family:'Hiragino Sans W4';）
  • ヒラギノ角ゴシック W5（font-family:'Hiragino Sans W5';）
  • ヒラギノ角ゴシック W6（font-family:'Hiragino Sans W6';）
  • ヒラギノ角ゴシック W7（font-family:'Hiragino Sans W7';）
  • ヒラギノ角ゴシック W8（font-family:'Hiragino Sans W8';）
  • ヒラギノ角ゴシック W9（font-family:'Hiragino Sans W9';）

ヒラギノ角ゴシックは10ウェイトあるが、CSSでは9つ（100から900まで100間隔）までしか指定できないことや、font-weightで指定すると、どのウェイトが表示されるかはブラウザによって異なること、またヒラギノ角ゴではW3とW6を使ってきたので、Hiragino SansではW4とW7が使われるのでいままでより若干太くなることなどがあるようです。上記は@font-faceを使って指定しました。CSSでヒラギノ角ゴシックのウェイトを指定する方法 - Ryusei’s Notes (a.k.a. M59のブログ)を参考にしました。

Windows 10 日本語フォント

  • メイリオ
  • MS P ゴシック
  • MS P 明朝
  • 游ゴシック
  • 游明朝

游ゴシック、游明朝がデバイスフォントに追加されたことにより、PCだけですが游ゴシック、游明朝を指定すれば、Webフォントを使わないでもMacと同じフォントが出せるようになりました。

iOS 日本語フォント

  • Hiragino Sans
  • Hiragino Mincho ProN
  • Hiragino Kaku Gothic ProN

Android 日本語フォント

  • モトヤマルベリ（4〜5）
  • Noto Sans CJK（6〜）

Android 6（Marshmallow）からNoto Sans CKJがデバイスフォントとして追加されました。

Noto Sans CJKについて

  • NotoSansJP-Thin あいうえお（font-family:'NotoSansJP-Thin';）
  • NotoSansJP-Light あいうえお（font-family:'NotoSansJP-Light';）
  • NotoSansJP-DemiLight あいうえお（font-family:'NotoSansJP-DemiLight';）
  • NotoSansJP-Regular あいうえお（font-family:'NotoSansJP-Regular';）
  • NotoSansJP-Medium あいうえお（font-family:'NotoSansJP-Medium';）
  • NotoSansJP-Bold あいうえお（font-family:'NotoSansJP-Bold';）
  • NotoSansJP-Black あいうえお（font-family:'NotoSansJP-Black';）

Noto Sans JPはGoogle FontsのEarly AccessにNoto Sans JPもありますが、1つのウェイト例えばRegularで1.6MBもデータを落としてくるので、日本語WebフォントにNoto Sans CJK JPを指定する時に気を付けたこと – 零弐壱蜂などを参考に「第一水準漢字」の文字だけをサブセット化して使っています。

font-familyの指定について

font-familyの設定の仕方で表情の違いを検証してみました。例えば日本語フォントをメインとしたオーソドックスな書き方としては以下のような感じです。

NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。 

font-family:'Hiragino Sans', ヒラギノ角ゴシック, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, 'ＭＳ Ｐゴシック', sans-serif;

font-familyの指定で欧文の指定を先に書けば欧文のみフォントを変えられます。以下はHelvetica Neueをあてた例。

NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。 

font-family:HelveticaNeue, 'Helvetica Neue', 'Hiragino Sans', ヒラギノ角ゴシック, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, 'ＭＳ Ｐゴシック', sans-serif;

わかりやすく欧文をserifのGeorgiaにしてみました。

NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。 

font-family:Georgia, 'Hiragino Sans', ヒラギノ角ゴシック, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, 'ＭＳ Ｐゴシック', sans-serif;

欧文と和文の組み合わせで気をつけたいのは、欧文と和文で文字の太さが揃っていないと読みづらいと思います。

NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。 

font-family:HelveticaNeue, 'Helvetica Neue', 'Hiragino Sans W6', sans-serif;

欧文をWebフォントで組み合わせるのも面白いと思います。Noto SansとGoogle FontsのMontserratというフォントと組み合わせてみました。欧文が気持ち可愛くなりました。

NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。

NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。 

<style>
.fontFamilySample6{
  font-family:'NotoSansJP-Medium', sans-serif;
}
.fontFamilySample7{
  font-family:'Montserrat','NotoSansJP-Medium', sans-serif;
}
</style>
<p class="fontFamilySample6">
NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。
</p>
<p class="fontFamilySample7">
NicholasさんのAnnual Reportは、彼自身の様々な個人的なデータを視覚化してまとめたものです。
</p>

フッターのコピーライトで良くやってしまうのですが、©がヒラギノだと大きさと位置がズレるので欧文のみの指定のほうがいいのではないかと思います。

Copyright © dotgraphy.com All rights reserved

欧文のみのしていだと以下の様な感じです。

Copyright © dotgraphy.com All rights reserved 

font-family:HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;

約物

約物は使い分けなど注意しないといけないものがたくさんありそうですが、本日は括弧とハイフン・ダーシについて。

全角括弧と半角括弧

半角括弧は欧文用の括弧で下にずれるので、和文の場合は全角括弧を使いたいのですが、Webの場合細かく字詰めができない事が多いので、全角括弧か半角括弧かはその都度見た目で判断というかんじでしょうか。

（Webデザイン）

(Webデザイン)

ハイフンとダーシ（ダッシュ）

ついついハイフンを使ってしまいがちですが、ハイフンは改行で長い単語を区切る際に用いたり、複数の単語を組み合わせて1つの単語にする際につかわれるそうです。特に欧文では違いがわかりやすいです。以下はダーシを使う例。

○1900—1910
○9:00—18:00
○Tokyo—Paris

×1900-1910
×9:00-18:00
×Tokyo-Paris

縦書き

CSSのwriting-modeプロパティを使えば、縦書きも比較的簡単に実装できることを知りませんでした。縦書き実装の今 | CodeGridを参考にしました。やっぱり「かづらき」は縦書きが美しいと思います。

いちねんのそうかつとして、
とったしゃしんやりょこうさき、
きいたおんがくやよんだほんなどを
てさぎょうでまとめたそうです。

本日のまとめ

  • 行間や字間だけでも文章の雰囲気が変わる
  • 毎回同じCSSのセットを使うではなく、Webサイトの個性に合わせて文字の見せ方を工夫する
  • Webではどうせできないという考えは一度忘れる

参考書籍

参考スライド

参考サイト

Webタイポグラフィ

文字サイズ

文字詰め

フォント

フォントファミリー

縦書き

約物

yamada takuo

有限会社アップルップル デザイナー

カメラと自転車と本屋が好きです。