InDesignの「段落スタイル」

前回のエントリーの補足です。「段落スタイル」についてもう少し説明します。
約50秒の動画です。

段落スタイルの「編集」

InDesignではアートボード上のテキストに「段落スタイル」を適用した以降は、配置したテキストのプロパティを直接変更するのでなく、段落スタイルパレット側で(追加の)編集を続けます。
スタイルの編集を行う(動画内ではフォントの変更を行っています)と、ドキュメント内に配置された該当要素全てに即座に変更内容が反映されます。
スタイル「見出し(h2)」を編集すれば、ドキュメント内に複数ある見出しのスタイルは全て変更されます。

これにより、スタイルを適用する作業(=文書の構造化)と、(とりあえず作成・適用した)スタイルを精緻化する/デザインを推敲する作業を分けて行うことができます。

段落スタイルの「継承」

動画内のスタイルの編集作業では、適用しているスタイルとは別に、細かなフォント設定をまとめたものを「親」スタイル(正式名称は「基準」)として用意し、切り替えています。例えば、タイトル(h2)の親スタイルの「(ベタ打ちの)游ゴシック体」を別の親スタイル「(font-feature-settings : “palt”;を想定した)詰め設定の游ゴシック体」に変更することで、プロポーショナル表示に変更しています。

親スタイルを「Meiryo」に変更すればWindows7用表示、「ヒラギノ明朝Pro6N」に変更すればOSX用表示など、閲覧環境ごとの表示も簡単に検証することができます。

もちろん、「親スタイル」を使わず、個々のスタイルの内容を編集しても同じ結果は得られますが、「プロポーショナルの游ゴシック体」「ベタ打ちのNotoSans DemiLight」「欧文をMyriadにしたAxisフォント」など、デバイスフォント表示・Webフォント表示を前提にすると、設定はそれなりに限られるので、あらかじめ用意していた方が効率的です。

最新アプリの日本語環境

残念ながらSketchやAdobe XDは、細かなテキスト処理、特に日本語特有のフォント周りのWeb表現(の再現)をあまり得意としていません。そもそもメニューが日本語化していないアプリ(Sketch)に文句を言うのもアレですが、20世紀末、1990年代の1バイト語圏向けのアプリを使っているような感じです。
ビジュアル重視のWebサイトのデザインならともかく、テキスト要素を重視しようとするとなかなか厳しいものがあります。

Web上の日本語の表現力が着実に向上しているというのに、とても残念なことです。

プロポーショナル化雑感

blogのフォント表示をプロポーショナルにしました。

はてブで話題になっていた、文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング – ICS MEDIA や、Typekitヘルプ | CSS での OpenType 機能の構文を参考に、font-feature-settingsを記述してみました。その際に気づいたことをメモしています。

雑感

  • 色々試しましたが、結局 palt(全ての文字をプロポーショナル)にしました。(※1)
  • pkna(かなのみプロボーショナル)、halt(約物・句読点半角)なども試しましたが、やめました。本当は括弧類は半角、句読点は全角にしたいのですが、そのようなオプションはありません。
  • プロポーショナル(字幅に合わせた文字送り)にするのが目的で、たくさん文字を詰め込もうとしているわけではありません。試しに letter-spacing: 0.03em などを併記してみましたが、こんどは多用している三点リーダ二つ( …… )の間に隙間が出来てしまいました。やめました。
  • 項目の区切りに多用していた全角パイプ( | )の前後が詰まってしまいました。どうしよう。

あまりの融通の利かなさに、PageMakerの初期バージョン(30年近く前)を使用してる気分になりました。Web上でキレイなフォントをキレイに(かつ合理的に)組版できるようになるのはまだ数年ほどかかりそうです。

Webフォントのプロポーショナル化

  • Googleが用意したWebフォント(Noto Sans)にはfont-feature-settingsは適用されませんでした。軽量化のためにプロポーショナルメトリクス情報が削除されているようです。
  • 武蔵システムの「サブセットフォントメーカー」で軽量化するとやはりメトリクス情報は削除されてしまいます。ちなみに、ヒント情報なども削除されるので、表示も劣化してしまうようです(※2)。
  • (サブセット化・軽量化されていない)本来のNoto Sansを武蔵システムの「WOFFコンバータ」で変換するとメトリクス情報は削除されませんでした。ですが、容量が巨大なので、Webフォントとして使用するのは現実的ではありません。
  • メトリクス情報を残したままの合理的なサブセット化の方法はまだ見つけていません(※3)。アプリケーションFontForgeGlyphsなどを調べ始めています。

※1
OSXのSafariでは括弧類の挙動が変です。直後にリンクがあると特に文字詰めの崩れが激しいようです。バッドノウハウには関わりたくないのでとりあえず無視します。他にも制限・不具合はあるようで、こちらのページなどにもまとめられています。
「文字詰め」の使い方 – TypeSquare Blog

※2
武蔵システムさんのサブセットフォントメーカーを使うとフォントが劣化する件 | つめもよう

※3
源ノ角ゴシック(Source Han Sans)をサブセット化したい時にやったことまとめ – フロントエンド開発Blog | オレには鈍器がある 無料ゲーム公式サイト

CSSとJavaScriptで文章をメモ書き風に – ウェブログ – Hail2u.net

Webフォントの導入

blogのフォントを変更しました。

スマートフォンの表示が良くなかった(モトヤが好みでなかった)ので、Webフォントを導入しました。Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Accessで提供されているNoto Sansを使っています。

@font-faceの記述の際に、フォントファミリー「Coluli」を定義し、ローカルフォントとして游ゴシックを組み合わせました。変更後は、

OSX:游ゴシック体(ミディアムとボールド)
Windows10:游ゴシック(ミディアムとボールド)
Windows8.1:游ゴシック(レギュラーとボールド) ◎ミディアムが入っていないため。
Windows7:メイリオ ◎游ゴシックが入っていないため。
スマートフォン:Noto Sans(デミライトとボールド)

で表示されていると思います。

ZTE Blade V7 Lite (Dual-SIM V0720)で豆腐発生。

DSCN1095

Android 6.0のスマートフォンを使ってみたくて、ZTE Blade V7 Lite(Dual-SIM V0720)を購入してみました。
国内未発売の香港モデル(?)をEXPANSYSで購入しました。送料込みで14,585円でした。

ちょっと失敗だったかもしれません。

  • 日本語書体のNotoSansJPが1ウェイトしか搭載されていませんでした。

Screenshot_20160702-105716

  • 太字は擬似ボールドで表示しているようです。
  • 容量は3.05MB。かなりの軽量なので、記号など、特定のグリフが割愛(※3)されているような気がします。
  • Webページの表示で文字化け(豆腐)がそれなりに発生します(※1)。

まもなく国内仕様モデルが発売される(※2)ので、素直にそちらを購入するべきでした。典型的な「安物買いの銭失い」です。


※1 実用上はさほど問題ありません。精神衛生上は最悪です。このサイトのサイト名など、欧文のBoldが豆腐化しています。
※2 日本法人の商品サイトを見ると国内版はカメラの画素数が少なめ、Band19に対応しているなど、それなりに仕様が異なります。日本語環境はしっかりチューニングしてあると期待します。


※3 フォントファイルを調べてみたところ、「NotoSansJP-Regular.otf」は、ラテン文字非格納CJK共通文字一部非格納でした。Webページの言語設定によって、豆腐化の発生具合は変わるようです。「lang="en"」に変更すると、欧文文字の豆腐化は発生しませんでした。あるいは、system/etc内の「fonts.xml」の記述(順序?)を変更すれば直る可能性はありますが、ファイルの修正にはroot権限が必要になります。


160808|追記 コメントにもあるように国内発売のモデルでも豆腐が発生しているようです。これはさすがにアップデータを出すだろう、と考えたいところです。できれば、全グリフが揃ったタイプのNotoSansJPに変更することで、ワールドワイドにアップデートしていただけると私の海外モデルも生き返るのですが、果たしてどうなることやら。

Hiragino Kaku Gothic Interfaceを普通に使う。

以前の記事、AquaKanaを普通に使う。の再利用です。
Yosemite(OSX 10.10)限定です。

////////////////////////////

①まず、この文字列をコピーし、「テキストエディット」や「Mail」などのリッチテキストフォーマットを扱えるエディタ(※1)にペーストします。(W1)

①まず、この文字列をコピーし、「テキストエディット」や「Mail」などのリッチテキストフォーマットを扱えるエディタ(※1)にペーストします。(W2)

①まず、この文字列をコピーし、「テキストエディット」や「Mail」などのリッチテキストフォーマットを扱えるエディタ(※1)にペーストします。(W3|参考)

②次に、フォントパネルから[よく使う項目]に登録します。

③以後、いつでも使えるようになります。

////////////////////////////

※1 Pagesなどでも使えます。さらに、iOSにも搭載済みの書体なので、iCloudを経由してiOS版Pagesなどでも使用できます。

なんでできるの? と思った方は、上記の記事または、タグ:AquaKanaの記事などをお読みください。

源ノ角ゴシックとNoto Sansをcssで指定

源ノ角ゴシック(Source Han Sans)とNoto Sans内のメタデータを調べたので、cssのfont-familyとしてあてがってみました。

源ノ角ゴシックとNoto Sansをcssで指定してみるテスト

◎確認するにはあらかじめフォントをインストールしておく必要があります。

Preferred Family(日・英の2つ)だけが「ファミリー」でフォントを命名していますが、それ以外はウェイト込みの名称となります。源ノ角ゴシックは「Normal」、Noto Sansは「Regular」を使用しました。

異なるnameIDに対して同じ命名(文字列)をしている箇所も多いので、実際には数個(源ノ角ゴシック:5個)で済みました。Noto Sansは言語別の命名をしていないのでさらに少なく(Noto Sans:3個)なります。

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • NotoSansJp-Regular(Postscript name)

複数のOS、ブラウザで表示を確認してみていますが対応はバラバラです。昔からちっとも変わっていません。ざっくり調べてみたところ、

Macintosh Chrome:

  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • NotoSansJp-Regular(Postscript name)

Macintosh Safari:

  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • NotoSansJp-Regular(Postscript name)

Macintosh Firefox:

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • NotoSansJp-Regular(Postscript name)

Windows Crome:

  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • SourceHanSans-Normal(Postscript name)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • NotoSansJp-Regular(Postscript name)

Windows IE11:

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)
  • Noto Sans Japanese(Windows用・Preferred Family)

Windows Firefox:

  • 源ノ角ゴシック(Windows用・日本語・Preferred Family)
  • 源ノ角ゴシック Normal(Windows用・日本語・Full font name 兼 Family name)
  • Source Han Sans J Normal(英語・Full font name 兼 Family name)
  • Source Han Sans J(Windows用・英語・Preferred Family)
  • Noto Sans Japanese(Windows用・Preferred Family)
  • Noto Sans Japanese Regular(Full font name 兼 Family name)

の記述が有効でした。ただし、「Preferred Family」が機能してもその際に表示されるウェイトはまちまちです。

ウェイト含めて意図通り表示させようとするとさらにブラウザごとの表示が変わります。

源ノ角ゴシックExtraLightとNoto Sans Thinをcssで指定してみるテスト

実際に使う際には、複数の名称を重ねる必要があります。また、ユーザーが源ノ角ゴシック/Noto Sansのどちらをインストールしているかはわからないので、両方とも記述する必要があります。エラーの発生する(が反応してしまう)指定を先に記述すると、意図する表示が実現しません。

さらに、Bold(<strong>タグ)の再定義も必要だと思います。

源ノ角ゴシックとNoto Sans

Adobeの源ノ角ゴシック(Source Han Sans)とGoogleのNoto Sansをダウンロードしてみました。

取り急ぎ、フォント情報を調べてみました。アプリ「OTEdit」を使っています。

源ノ角ゴシック Normal

Noto Sans JP Regular

字形は同じでも、フォント情報は全く異なるようです。マシンにインストールしても、それぞれ独立したフォントとして認識されます。

おや、「ファミリーネーム」にウェイト名称がついてしまっています。これでは各ウェイトが別のフォントとして認識されてしまうのではないでしょうか。

FontBookで表示してみました。

源ノ角ゴシック FontBook

Noto Sans FontBook

きちんと「ファミリー」で表示されています。
どの情報を使って、同じ書体群であることを認識しているのでしょうか。

以前の投稿、「游ゴシック体/游明朝体をWebで利用する」内で紹介した記事をもう一度確認するとわかりました。

フォントファイル内のメタデータ、「Preferred Family」と「Preferred Subfamily」を使ってフォントファミリーとウェイトを定義しているようです。

記事内で使われていたアプリ、「OTMaster」のLight版(無料)でメタデータを表示してみました。

源ノ角ゴシック OTMaster

Noto Sans OTMaster

「Preferred Family」はありましたが、「Preferred Subfamily」は定義されていません。「Subfamily name」はあるのでこちらで代替しているのでしょうか。

いずれにせよ、これらの書体が普及して、いろんなマシンにインストールされたとしてもcssのfont-familyで指定するのはちょっと難しいかもしれません。出来たとしても、トリッキーな記述になってしまう気がします。

GoogleあたりからWebフォントとして提供されるのを待つべきでしょうか。