プロポーショナル化雑感

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フォントとして提供されるのを待つべきでしょうか。

Lucida Grandeの退場

Lucida Grande、システムフォント止めちゃうってよ。

2014年の秋にリリースされるOS X Yosemiteでは、システムフォントのLucida GrandeがHelvetica Neueに変更になるそうです。

Yosemite.jpg

うわ、だっせぇ。(※1)

使い始めてしまえば慣れてしまうような気もしますが、今(2014年6月)のこの気持ちは書き留めておこうと思います。

パソコンもOSも所詮他人がデザインした物です。古いまま使いつづけるか新しいものを受け入れるしかありません。
あるいは自分で作るか。

自分が単なる「消費者」でしかないことを思い知らされます。

ChicagoもCharcoalもOsakaもOSXもLucida GrandeもAquaKanaも好きでしたが、新しい物はいつもさらに魅力的でした。ですが、今回の変更への違和感はちょっと半端ではありません。30代のJobs(とfrogdesign)が追い出された後に発表されたハードウェア群のがっかり感に近いものがあります。

がっかりだよ。

本当に書きたい事は以上ですが、関連してメモ。

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

ハードウェアの書体

ハードウェアの書体(≒コーポレート書体)はどうなるのでしょう。AppleギャラモンからMyriadへの変更が過去にありましたが、Yosemiteのリリースと同時期に発表になるハードウェア(iPhoneやMac)の製品ロゴもやはりHelvetica Neueになるのでしょうか。

とは言うものの、Lucida Grandeは元々ハードウェアには使われていなかったので、引き続きMyriadが使われる可能性もあります。

Webサイトの書体はどうなる。

Appleのサイトのcssのfont-familyはLucida Grandeが先頭に来ているので、(英語サイトの)欧文本文や、(日本語サイトの)英数字はLucida Grandeで表示されています。こちらもHelvetica Neueに変更になるのでしょうか。素直に判断すれば、なる、と考えるべきなのでしょう。

ただ、最近の米国サイトでは見出しがMyriadのWebフォントで表示されています。ハードウェアの書体が変更になるかどうかが分かれ道のような気がします。

MyriadとLucida Grandeは同じジャンルの書体なので、見出し:Myriad、本文:Lucida Grandeはけっこうなじんでいました(微妙に似すぎて気持ち悪いという考えもある)。見出し:Myriad、本文Helvetica Neueというのではどうも「暫定感」が強い。やはりハードウェアフォントの変更の有無にかかわらず、素直に見出し:Helvetica Neue、本文:Helvetica Neueでしょうか。

日本語はどうなる。

AquaKanaはお払い箱でしょうね……。

おそらくヒラギノ角ゴシックProNあたりがあてがわれるのでしょうが、ウェイト(太さ)が微妙に揃わないでしょう。専用のウェイト(W2.4とか)を用意するのかしないのかが気になります。

日本サイトで採用されているAXIS fontあたりが(カスタムチューンで)採用されたら楽しいですが、可能性は低そうです。

これで終了?

Appleクラスの大企業であれば専用の(2バイト言語含めた)ユニバーサルフォントを開発してもよいくらいです(※2)。ただ、Jobsはフォントにこだわりを持つ経営者と言われつつも、Adobeの(元)コーポーレート書体のMyriad(※3)を無邪気に採用しちゃうような性格でもありますし……。

独自に開発を進めていたが、SonyのSSTフォントの発表を見て、慌ててプロジェクトを凍結した、とかだったら愉快なのですがどうなのでしょう。

ただ、「みんな大好きでも古くさいHelveticaを機能的にするためにFrutigerのエッセンスを取り入れる」、といったコンセプトはわりと誰でも思いつきそうです。欧米の大企業と横並びにならないためにあえてエクスクルーシブフォントは開発しないとかの方針なのでしょうか。

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

※1 はてブのコメント、

ああ、これ、、BeOSだ

が素晴らしくいろいろを代弁してくれています。

※2 オリジナル書体「Apple Sans」の可能性について一部言及したギズモードの記事。

※3 フォントの開発自体もAdobeのデザイナーの内製です。

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

141025|追記 2014年9月初旬に米国サイトの本文はWebフォント「Myriad Set Pro」になりました。一方、日本サイトは「Apple TP」という名前のWebフォント版AXIS fontになりました。日本語なのにプロポーショナルです。