CSS Nite in KOBE, Vol.2
「Webデザイナーのためのタイポグラフィと文字組版」
フォローアップ

2013年7月9日 3:45 pm

ご参加ありがとうございました。

スライド

スライド（PDF、4.9MB）

追記（1）

見出しと本文のコントラストの付け方について、プリントメディア（DTP）とWebでまとめてみました。

	プリントメディア	Web	Web Fonts
太さ	ウエイトで表現ただし、フォントによってはウエイトがないものがある	font-weight: boldで表現ただし、MSゴシックなど、boldを表現しにくいフォントがあるほか、ブラウザーによって、太字のレンダリング品質が異なることに注意また、Android環境でのDroidSansは太字がNG	ウエイトで表現すべきだが、font-weight: boldがかかってしまい、フォントのデザインが崩れてしまう
大きさ	よく行われる方法（例：新聞）この手法を「ジャンプ率を高くする」と表現する	ジャンプ率は高くしない方が望ましい
色の濃淡	文字色に薄いカラーを使うとかすれがち特に細めのフォントでは注意	アップルのサイトなどでよく使われる
フォント	見出しにゴシック系、本文に明朝系など、フォントを変更する手法はよく使われる	デバイスフォントそのもののバリエーションがないので、実用的とはいえない	アリといえばアリだが、文字は「無色透明が望ましい」

追記（2）

質疑応答時、「フラットデザイン時代のフォントはどうなる？」というご質問をいただきました。

装飾的な要素が簡素化される分、フォントがしめる役割が増す
フラットデザインにマッチしたフォントが求められる
- Mac OS X 10.9では「Helvetica Neue Ultra Light」という極細フォントが主流に

Windows 8.1、および、Mac OS X 10.9には「游ゴシック/游明朝」が標準搭載されるとの噂です（Windows Phoneにはすでに搭載済み）。

游ゴシックは、ヒラギノ、こぶりなゴシックなど高品位なフォントをリリースしている字游工房によるものです。これが実現すると、Mac OS X、Windowsで同じフォントがバンドルされる、という稀有な状況が生まれます。

参照リンク

アンケートでいただいたご質問へのお答え

リュウミンや新ゴ、じゅん、A1明朝とかはよく使用しているのですが、これらに代わる今オススメのフォントを教えてほしかった。

リュウミン：モリサワであれば秀英、フォントワークスでしたら筑紫明朝。現在、入手できないのですが、アドビのコーポレートフォントに使われている「りょう」がクセがなく、しかし、オールド系の雰囲気が残っていて今っぽい感じがします。なお、かなのみ異なるフォントに変更すると、ずいぶん印象が変わります。モリサワからも、たくさんのかなフォントがリリースされています。
新ゴ：英数字に従属欧文を使わず、異なるフォントを与えることで表現の幅がでます。Helvetica、Myriad、Frutigerなどが定番。現在、モリサワからリリースされている「ClearTone SG」が超オススメです。サイズやベースラインなどの調整の手間もかからず、新ゴにはまります！
じゅん：字形的にかなりアウトです。「新丸ゴ」（モリサワ）や、今でしたら「筑紫A丸ゴシック」がトレンドです。
A1明朝：まだセーフといえばセーフですが、英数字に異なるフォントを組み合わせることで、雰囲気を変えるとよいでしょう。また、ウエイトがないこともあり、ちょっと使いにくいかも（線に、塗りと同じ色を設定することで太さを表現します）。ウエイトがある「筑紫Aオールド明朝」という選択肢もあります。

フォントの流行を追いかけるには何を参考にすればいいでしょうか？（トレンドフォントって、いろんなサイトを見て、見つけていくしかないでしょうか？）

はい、こればかりはどこにも書いてありませんので、書籍のタイトル、広告（電車の中吊りなど）、チラシ、もちろん、Webなどなど、たくさん見ながらつかんでいくしかありません。その前に、どれがなんという書体か、知っていなければなりませんよね。『デザイン事典文字・フォント』がオススメなのですが、絶版になっています...

書籍でなく、Webで見てしっていく方法もアリですよね。モリサワ、フォントワークスなど、書体見本を配布していることがあるので、折りにふれて入手しておくとよいでしょう。過去にワークスコーポレーションから『フォントスタイルブック』という書籍が毎年リリースされていました。古くてもベーシックなフォントはカバーしていますので、安く出ているときに購入しておくとよいでしょう。

どのくらい調整しなければいけないのか、やはり本で学ぶしかないでしょうか？

この手のものは、書籍には載っていません。なお、ゲーム的なものですが、Kern Type, the kerning gameというものがあります。

フォントや文字組みの参考になる書籍を教えてください。

小林章さんの『フォントのふしぎブランドのロゴはなぜ高そうに見えるのか？』が超オススメです。

ひらく（ひらがなにする）基準

セミナーでご紹介した「こと、もの、とき」のほか、副詞，接続詞はすべてひらきます。コリスさんのこちらの記事が参考になります。その他、こちらなど。

『記者ハンドブック』、『日本語表記ルールブック』、『朝日新聞の用語の手引』などを1冊持っておくとよいでしょう。

スクールの教材して活用したい（社内教育で使いたい）

ご自由にどうぞ。どのようにお使いいただいても結構です。事前の確認などのご連絡も不要です。

年月日は全角で入力した方がいいですか？

いえいえ、英数字はすべて半角にすべきです。和文と欧文を混植する場合、全角と半角でフォントが代わってしまう事態が発生してしまいます。

PhotoshopにはIllustratorのような文字ツメ機能はないんですよね。

Photoshop CS3以降、［文字］パネルの［文字間のカーニングを設定］に「メトリクス」、「オプティカル」の設定があります。また、Illustratorと同様、option+←（→）キーを使ってのマニュアルカーニング（＝手動カーニング）にも対応しています。

Web Fontsについての話を聞きたかった

現在、日本語対応のWeb Fontsには、次のようなサービスがあります。

Web FontsについてはWeb Fontsに関して思っていること（2012年10月）にてまとめました。

カギ括弧を罫線で表現すると、移動の際に忘れてしまうなど、トラブルの元になりそうで心配です...

ウエイトを持っているフォントでしたら一番細いものに、ない場合には、カギ括弧のみ、違うフォントでもよいので細めのフォントに設定するとよいでしょう（Mac OS Xでしたらヒラギノ明朝W3など）。

罫線で作るカギ括弧の作り方（Illustrator）

コンタクト

Facebookの友達申請の際には、ひとことメッセージをいただけると助かります。

セミナー情報などは、下記が早いです。

鷹野雅弘

CSS Nite in KOBE, Vol.2 「Webデザイナーのためのタイポグラフィと文字組版」 フォローアップ