ウェブ時代のデザイナーのための文字組入門 第一回 「Illustrator / Photoshop文字組 一日集中入門」(第3日程)

ウェブ時代のデザイナーのための文字組入門 第一回 「Illustrator / Photoshop文字組 一日集中入門」(第3日程)
7
モビッチ(・3・) @yulymobitch

行ってきます!参加者見てると女子率高そうな。【日程追加】ウェブ時代のデザイナーのための文字組入門 第一回 「Illustrator / Photoshop文字組 一日集中入門」(第3日程) #moji_for_webya

2014-10-18 09:34:29
モビッチ(・3・) @yulymobitch

ベタ組み→文字が同じピッチで並んでいること。テキストエリアのサイズは文字サイズの整数倍で。単位は使いやすいのを使えばいいが、Qがおすすめ。 #moji_for_webya

2014-10-18 10:33:09
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

ベタ組みで組むときは、原則テキストエリアは文字サイズの整数倍でなければキレイに組むことはできないです。 #moji_for_webya

2014-10-18 10:59:58
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

ですが、テキストエリアのサイズをどうしても文字サイズの整数倍にできない場合は、トラッキングで文字を均等に詰めて(またはあけて)調整することが可能です。 #moji_for_webya

2014-10-18 11:01:31
モビッチ(・3・) @yulymobitch

Illustratorカーニングの大事な話。「オプティカル」はアプリケーションが前後の文字の並び方(関係性)をひろってツメる量を判断している。行頭行末はスルー。 #moji_for_webya

2014-10-18 11:20:58
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

フォントにはペアカーニングの情報が入っている。たとえばWとAが並んだらいくら詰めましょう、という情報が予め入っている。メトリクス(自動)は文字のプロポーショナル情報(文字幅の情報)と、このペアカーニング情報を読み、自動的に詰めるものである #moji_for_webya

2014-10-18 11:21:21
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

対してオプティカルカーニングはフォントに入っている情報をよまず、Illustratorなどのソフトウェアレベルで判断し詰める機能。 #moji_for_webya

2014-10-18 11:25:24
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

「プロポーショナルメトリクス」はプロポーショナル情報(文字幅)の情報を読み、それに従って詰める機能。メトリクス(自動)はこれにペアカーニング情報を加味して詰める。ただしメトリクス(自動)を使う場合「プロポーショナルメトリクス」もONにするべし #moji_for_webya

2014-10-18 11:28:09
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

「トラッキング」による詰め・「文字ツメ」による詰め、「アキを挿入」による詰めの挙動の違いについて #moji_for_webya

2014-10-18 11:35:34
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

「トラッキング」でアケるのと「アキを挿入」でアケることの違い…約物などで差が出る。約物の前後のアキ量の設定を生かしたまま、さらにアキを加えるのがトラッキング。約物前後のアキ量を上書きするのが「アキを挿入」の挙動。 #moji_for_webya

2014-10-18 11:44:11
モビッチ(・3・) @yulymobitch

「四分はしぶしぶ残ったわけです」 あ…ここ、笑いが起こるべきところですが…みんな頭の中が必死すぎて、壮絶な静けさ…!

2014-10-18 11:44:53
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

オプティカル・カーニング(フォント内蔵の情報を利用せず、隣り合う文字の形からソフトウェアレベルで詰める)のメリット。フォントメーカーの設定よりキレイに詰まることがある。OpenTypeフォントでなくても詰めることができる。 #moji_for_webya

2014-10-18 12:35:58
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

前にもつぶやきましたが、モリサワのフォントには現在、ペアカーニングの情報が入っていません。とはいえ最近ようやくペアカーニング情報をもつものをひとつだけリリースしました。2014年版モリパスから入った「AP-OTF 凸版文久明朝」がそれです #moji_for_webya

2014-10-18 12:40:20
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

今後モリサワは新ゴやリュウミンなどのフォントについても、ペアカーニングをもつAP-OTFフォントとしてリリースする予定。 / AP OTFフォントとペアカーニングについて | 株式会社モリサワ morisawa.co.jp/font/about/kno… #moji_for_webya

2014-10-18 12:43:43
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

メトリクス(自動)で詰めたのちに、もう少し全体的にアけたいなー、というときは…トラッキングで均等にあけていけばOK。詰めのバランスは保たれたまま全体がアく。 #moji_for_webya

2014-10-18 12:46:49
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

三回聞いてようやく細かいことまで理解できるようになってきた。人数の都合上、みなさんには1回ずつしか受講していただけないけれど、確かにこれは何度でも聞いて咀嚼してもらいたい内容 #moji_for_webya

2014-10-18 12:49:23
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

文字組みアキ量設定のお話。約物や英数字と日本語が隣り合った時に、そのアキ量をどのように調整するかを指定する。行頭行末揃えなどのときに、どのように余計なアキを捌くかもここで定義する。 #moji_for_webya

2014-10-18 14:26:42
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

括弧の前後や中点の前後・英数字と日本語の間にできるアキが気持ち悪いというあなた、この文字組みアキ量設定というやつでまとめて処理する(詰める)ことができるんです。 #moji_for_webya

2014-10-18 14:31:03
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

ベタ組みを選択する時は行中の約物は全角とってしっかりアキを確保するのが原則。適切なアキをとることで可読性が確保される。「行末約物全角」をベースに考える。 #moji_for_webya

2014-10-18 14:38:24
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

逆に詰組みの時は「約物半角」をベースに考える。理由は…理解できなかったのであとで聞く #moji_for_webya

2014-10-18 14:42:55
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

三点リーダなどの分離禁止文字が行末に連続するなどの関係で行中の約物が詰まる場合、中点類>読点類>括弧類>句点類の順に詰めが適用される。Aiで、この順番は変えることができるのかな? #moji_for_webya

2014-10-18 14:49:50
深沢幸治郎|ウェブデザイナー・UIデザイナー @kojirofukazawa

あ、約物の詰め・延ばしの適用優先度はイラレでは変更できないそうで… #イラレ文字組の限界 #moji_for_webya

2014-10-18 14:53:33