「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野...

アップルストア銀座 3Fシアター

Webデザイナーのためのタイポグラフィと文字組版鷹野 雅弘（スイッチ）

このスライドは、2013年11月21日にアップルストア銀座で開催されたCSS Nite in Ginza, Vol.72のものです。

私は、1996年から都内で「スイッチ」という制作会社を営んでいます。

当初、DTP（グラフィックデザイン）からスタートし、

Webのフィールドと両輪で制作を行っています。

グラフィックデザインの人間からは、Webは文字に関して“甘い”と言われます。

今回は「Reloaded」とついているように「続編」です。

前編をご覧になっていない方は、ぜひご覧ください。http://www.slideshare.net/swwwitch/web-10114816

3つのパート（+1）で構成します。

今年4月に青森は弘前（ひろさき）にお邪魔したとき、

こんな看板がありました。

あまり美味しそうじゃないですよね...

っていうか、「世にも奇妙な...」？

ホテルを予約して、実際に行ってみると印象が違うという経験はありませんか？

実店舗、サイト、それぞれのパーソナリティがありますが、これらが一致していないと不自然に感じてしまいます。

こちらの「キャッチ」のフォントを考えてみましょう

=

「AXIS B」：無難な印象ですが、クールやセクシーというニュアンスが出ません。

=

ウエイトを落として、軽めに「AXIS L」：悪くない感じです。

=

さらに細く「AXIS UL」。悪くないですが、可読性という面で難があります。

=

助詞の文字サイズを下げてメリハリを付けるとよさそうですが、あまり変わりません。

=

「りょう」は、かな部分がやさしい印象となりますが、柔すぎるかも...

=

「ロゴアールStd」は遊びすぎで、そぐわない感じが残ります。

=

使い古されつつありますが「A1明朝」がはまるかもしれません。

こちらは「ヒラギノ角ゴW6」で組んだもの

英数字（たとえばM）を見ると、筆文字っぽいニュアンスになっています。

下のサンプルは英数字にMyriadを設定。こちらの方がしっくりきませんか？

和文フォント 欧文フォント

英数字

ひらがな漢字全角記号類

半角記号類英数字半角記号類

和文フォント、欧文フォントは、英数字と半角記号類が共通しています。

和文フォント 欧文フォント

英数字

ひらがな漢字全角記号類

半角記号類英数字半角記号類

和文フォント内の英数字と半角記号類を「従属欧文」と呼びます。

2013年6月30日(日)

2013年6月30日(日)

たとえば、日付を組むとき、英数字には欧文フォントを設定し、

2013年6月30日(日)

2013年6月30日(日)

さらにメリハリを付けて仕上げます。

=

少なくてもグラフィックデザインの分野では混植が常識です。

=

ただし、フォントのメカニズムそのものが異なりますので、

=

英数字には、サイズやベースラインの調整が不可欠です。

=

ご参考までに、Appleのコーポレートフォントはこのように変遷しています。

=

こちらは、アドビ。

25 Adobe Corporate Brand Guidelines | Adobe Con!dential | 25 October 2010

Primary typeface - Adobe Clean

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz "1#$%&'()*" =~!@#$%^&*()+[]\{}|:;’:”<>?,./

Adobe Clean should be used for headlines and may be used for copy. Short headlines or labels can be all caps, otherwise headlines and subheads are sentence case.

+e introduction of the proprietary typeface Adobe Clean in April 2009 was to help di,erentiate Adobe in the marketplace. It replaces the previous sans serif corporate font, Myriad Pro. It will not be available for license to the general public.

To use Adobe Clean well along side the corporate logo, which continues to use Myriad Pro, avoid condensed or extended type.

Adobe Clean Light Adobe Clean Light Italic Adobe Clean Regular Adobe Clean Italic Adobe Clean Bold Adobe Clean Bold Italic Adobe Clean SemiCondensed Adobe Clean SemiCondensed Italic Adobe Clean Bold SemiCondensed Adobe Clean Bold SemiCondensed Italic

Note: Alternate glyphs are available for the le-er “g” and number “1” in Adobe Clean Regular.

Secondary type face - Minion Pro

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz !1"#$%&'()! =~!@#$%^&*()+[]\{}|:;’:”<>?,./Minion Pro should be used primarily for extended running body copy in longer, multiple-page documents, such as brochures and datasheets.

Avoid using weights other than Minion Pro Regular. Use Minion Pro SemiCondensed Bold for emphasis when needed. Avoid using Minion smaller than 9pt. Use standard numerals; do not use Minion’s Old Style numerals.Minion Pro Semibold Condensed Minion Pro Semibold Condensed ItalicMinion Pro Regular Minion Pro ItalicMinion Pro Semibold Minion Pro Semibold ItalicMinion Pro Bold Minion Pro Bold Italic

Typography: Corporate typefaces

As with our logo, consistent use of our corporate typefaces—Adobe Clean and Minion® Pro—reinforces Adobe’s brand identity. Both are OpenType™, a cross-platform format that provides richer linguistic support through widely expanded character sets and advanced layout features.

Both fonts are available for download from Marketing Hub under Corporate > Corporate Fonts.

アドビは現在「Adobe Clean」を使用しています。

具体的な組み合わせ例を教えてください！

どのように混植（組み合わせ）のか、という質問を多くいただきますので解説します。

新ゴ

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、Typekitを使ったWeb Fontsの実装を解説。

こちらは「新ゴ」。

新ゴ

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、Typekitを使ったWeb Fontsの実装を解説。新ゴ ＋ MO ClearTone SG

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、Typekitを使ったWeb Fontsの実装を解説。英数字部分に異なるフォントを与えると、ずいぶん印象が変わります。

AXIS

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、Typekitを使ったWeb Fontsの実装を解説。

AXISフォントは、従属欧文を使うことを前提に制作されていますが、

AXIS

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、Typekitを使ったWeb Fontsの実装を解説。

AXIS ＋ MO ClearTone SG

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、Typekitを使ったWeb Fontsの実装を解説。

「MO ClearTone SG」と組み合わせると、今っぽい感じです。

ただし、拡大してみると...

MO ClearTone SG

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、Typekitを使ったWeb Fontsの実装を解説。

MO ClearTone SG

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、Typekitを使ったWeb Fontsの実装を解説。

英数字部分のベースラインの調整が必要です。

小塚ゴシック

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、Typekitを使ったWeb Fontsの実装を解説。

アドビCS/CCなどをインストールすると必ず入る「小塚」フォントですが、

小塚ゴシック

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、Typekitを使ったWeb Fontsの実装を解説。

＋ りょう小塚ゴシック

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

「な」など、かな部分にクセがありすぎます...

小塚ゴシック

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、Typekitを使ったWeb Fontsの実装を解説。

＋ りょう小塚ゴシック ＋ Myriad

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

＋ りょう小塚ゴシック

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

また、英数字はMyriadをベースにしていますが、若干細めなので再指定します。

ヒラギノ明朝「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

Mac OS Xのデフォルトフォントのひとつ「ヒラギノ明朝」

ヒラギノ明朝「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

ヒラギノ明朝 ＋ Garamond

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

やはり英数字が少し野暮ったいので「Garamond」などを組み合わせるとベター。

ヒラギノ明朝「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

ヒラギノ明朝 ＋ Garamond

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

ヒラギノ明朝 ＋ Garamond ＋ りょう

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

「りょう」の明朝版もいい感じです。

A1明朝「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

ここ数年、イヤというほど見かける「A1明朝」

A1明朝「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

A1明朝 ＋ Georgia

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

こちらも英数字が野暮ったい印象...

Georgiaは、Mac/Windowsに入っているフォントですが、

オールドスタイルと呼ばれる形状をしています。

http://blog.petitboys.com/archives/georgiaverdana.html

A1明朝「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

A1明朝 ＋ Georgia

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

A1明朝 ＋ Warnock

「画像をなるべく使わずにWebをレイアウトするテクニック」と題して、CSS3のプロパティ、

オールドスタイルはクセがありすぎるので、日本語では避けるとよさそうです。

=

合成フォントの組み合わせ（ゴシック系）

ヒラギノ角ゴ

小塚ゴシック

新ゴ

AXIS

ゴシックMB

メイリオ

Helvetica

Myriad

Verdana

MO ClearTone SG

Frutiger

りょう

ベース 英数字 かな

ネオツデイ

鴨野かな

ゴシック系では、これらを組み合わせるとよいでしょう。

=

ヒラギノ明朝

小塚明朝

リュウミン

A1明朝

Garamond

Minion

Warnock

Georgia

りょう

リュウミン小がな

リュウミンオールドがな

アンチック

ベース 英数字 かな

合成フォントの組み合わせ（明朝系）

明朝系では、これらを組み合わせるとよいでしょう。

ところで、「Helvetica」と、それに似た「Arial」というフォントがあります。

http://www.ironicsans.com/helvarialquiz/「どっちがHelveticaか？」というクイズがあったり...

http://ragbag.tumblr.com/post/187708731/arial-helvetica-on-friday-i-hosted-a-screeningその形状の違いを解説されたりしています。

ちなみに「Arial」をどう読むのか、については

http://tosche.net/2012/09/arial_j.htmlなんと、正解がない！とのこと。

と、海外で活躍される大曲都市さんがブログで解説されています。

=

上と下では、ずいぶん印象が変わります。

「する事が出来る」を

「することができる」のように表現することを

“ひらく”と呼びます。

http://coliss.com/articles/build-websites/operation/writing/288.htmlどの文字を“ひらく”かについては、colissの記事を参考にしてみてください。

俺俺ルールではなく、ガイドラインがあります。

bizYouの「エキスパートコラム」の

Web文章入門「わかりやすい文章の10大原則」も、ぜひ、ご一読ください。

スクロールしていくと

8番目に「ひらがなを多く」というセクションがあります。

「ひらがなを多く」したサンプル

さらに下、9番目に「カタカナを効果的に」というセクションがあります。

「カタカナを効果的に」使ったサンプル

あるコンビニのウインドウで、こんな掲示がありました。

始開カイスモスパ

一瞬、悩みますよね...

イカ？？

始開カイスモスパ

こちらは...

始開カイスモスパ

これが正解

始開カイスモスパ

スペース的に厳しいのであれば、

始開カイスモ ・スパ

たとえば「・」（中黒）を入れるとよかったですよね。

とあるプレゼンのスライドから拝借したものですが、

インフラエンジニアに相談しておくことをおすすめします

インフラエンジニアに相談しておくことをおすすめします

インフラエンジニアに相談しておくことをおすすめします

改行位置を変えるだけで、理解できるスピードが変わることを理解できるでしょう。

2013年6月30日(日)

さきほども出てきた日付ですが、

2013年6月30日(日)2013年6月30日(日)

英数字のフォントを変えたり、

2013年6月30日(日)2013年6月30日(日)

重要でない文字の大きさを変えて

2013年6月30日(日)2013年6月30日(日)

ベースラインを調整します。

2013年6月30日(日)

Before/Afterを

2013年6月30日(日)

このように並べると、その差は歴然です。

次は「値組み」です。

数字は位取りのカンマを付けた方が理解しやすいですよね。

日付と同様、「円」の文字サイズを下げた方が理解度が増します。

重要度に応じて、適切に文字サイズを変更すると、伝わりやすさに反映します。

つまり、入力したままでなく、適切に手を入れようよ、ということです。

これもとあるプレゼンのスライドから拝借したものですが、

段落間のスペースを変更するだけで、構造の理解度が大きく変わります。

箇条書きを「・」（中黒）で入力されてしまう方がいますが、

ワープロ系なら箇条書き機能、HTMLならul/li要素でマークアップします。

さらに項目間にスペースを入れると見やすいですよね。

こちらも、あるプレゼンのスライドから拝借。

パッと見た目、

3つの項目があるように見えてしまいませんか？

行間は広げればいいというものではなく、

適切にすべきです。

入力したままにせず、

ツメ（カーニング処理）を行うのがセオリーですが、

そもそも、なぜ、詰める必要があるのでしょうか？

以前、話題になったもので、

「なぜか読めてしまうコピペ文章」というものがありました。

文字単位での順番が適当でも、読めてしまうというものです（日本語/英語ともに）

たとえば、電話番号も、数字だけの羅列よりも

ハイフンで区切ると、読みやすさに差が出ます。

私たちは文字単位でなく、「まとまり」で認識しているということです。

先の例を出しますと、

日本語では「仮想ボディ」と呼ばれる正方形で文字が並びます。

下のようにツメ処理をすることで、単語やフレーズが“まとまり”になります。

そういう意味では、最近のトレンドとして「アケ組み」がありますが

「まとまり」として認識しにくくなるので、読ませたい場所には不適切です。

アプリケーションでの自動カーニングについて解説します。

Illustratorには「自動」「オプティカル」「和文等幅」などの自動カーニングがあります。

Photoshopにも「メトリクス」「オプティカル」の自動カーニングがあります。

InDesignには「メトリクス」「オプティカル」「和文等幅」と呼びます。

自動（メトリクス） 自動 メトリクス メトリクス

オプティカル

和文等幅

アプリケーションによって、名称が異なることがあります。

「自動/メトリクス」を使い、ツメが効かない場合に「オプティカル」を使用します。

アルファベットの場合、文字ごとに固有の横幅を持っています。

前の文字に食い込んで組むことを「ペアカーニング」と呼びます。

文字ごとに決まっており、「自動/メトリクス」ではフォントが持っている値を参照します。

自動カーニングで終了ではなく、若干の調整は必要です。

しかし、このとき、致命的なバグがあります...

これを回避するには、［プロポーショナルメトリクス］をオンにします。

Photoshopでは、

［文字］パネルメニューにあります。

http://d.hatena.ne.jp/works014/20110827

この回避方法は、大石さんという方が発見されました。

=

カーニングに興味を持たれた方は、KERNTYPEで遊んでみてください。http://type.method.ac/

パーレン（丸括弧）を半角で入力するか、全角で入力するか…

実際(に近い)画面

実際（に近い）画面

ベースラインを引いてみると、半角の方は下がっていることがわかります。

実際(に近い)画面

実際（に近い）画面

=

これは、フォントの設計が異なることが原因です。

=

このようにパーレンやブラケットが混じる場合....

=

全角を使った方が、上下のズレは生じません。

住所を例に考えてみましょう。

数字やハイフンの前後はカーニングの調整の必要があります。

さらにハイフンを見てみると、このように下がっています。

文字サイズを調整したり、

ベースラインを調整すると、このようになります。

比べてみると、その差は歴然です。

電話番号も同様です。

中心線を引いてみるとわかりますが、

ハイフンの調整が必要です。

= 巴里の咏「巴里の咏」

女性誌などでは、カギ括弧を罫線で表現しています。

=

このセッションでは「画像をなるべく使わずにWebをレイアウトするテクニック」と題して

「新ゴ」などのフォントでは、ウエイトの太い場合、カギ括弧も太くなってしまいます。

=

このセッションでは「画像をなるべく使わずにWebをレイアウトするテクニック」と題して

このセッションでは「画像をなるべく使わずにWebをレイアウトするテクニック」と題して

これをウエイトを下げ、軽めのものにするとスッキリします。

=

このセッションでは「画像をなるべく使わずにWebをレイアウトするテクニック」と題して

このセッションでは「画像をなるべく使わずにWebをレイアウトするテクニック」と題して

このセッションでは「画像をなるべく使わずにWebをレイアウトするテクニック」と題して

ヒラギノなどを使って「小かぎ」にすると、さらにスッキリします。

=

「テクニック」

「テクニック」

「テクニック」好みもありますが、ずいぶん印象が変わります。

こちらはIllustratorで入力しただけのキャッチです。

下は少し加工したものですが、違いがわかりますでしょうか？

背面に帯を敷くとわかりますが、上の方は1-2行目が引っ込んでいます。

captionこれを「面（ツラ）が合っていない」と表現しますが、これも手を加えておきたいです。

画像化

OS X Mavericks（10.9）と

Windows 8.1では

はじめて同じフォントがプリインストールされています。

http://blog.petitboys.com/archives/yugothic-yumincho-jiyukobo.html

Google Fontsがポピュラーですが、

現在、629フォントもあります。

http://mojidepa.com/login

http://decomoji.jp/

http://webfont.fontplus.jp/

http://typesquare.com/

Web Fontsを使うと、ウエイトの太いフォントに、さらに太字設定されてしまうなど、

現在では、問題山積みです。

http://takanomasahiro.tumblr.com/post/33520166004/web-fonts-2012-10

本日は、フォント（選び）の大切さについて触れてきましたが、

http://www.linelabo.com/gtmincho.htm

ある意味、フォントやその他の配慮は、適切に行われるほど存在感が消えます。

その結果、実現したいのは、この2つです。

こだわりポイントを知って、こだわりましょう。