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になりました。日本語なのにプロポーショナルです。

サブピクセルレンダリングその後

サブピクセルレンダリング、いよいよ本当に終わりそうです。

以前「サブピクセルレンダリングはオワコン」とエントリーしましたが、相変わらず自分の環境ではサブピクセルレンダリングを有効化して使っています。

その後、OSをアップデートしたりMacBook Pro Retinaディスプレイモデルを購入したりと、プライベートの状況も変わってきたので、関連して調べた事を備忘録としてエントリーしておきます。
////////////////////////////

Marvericksでも一応使える

OSX 10.9(Marvericks)になっても、ターミナルによるサブピクセルレンダリングの設定変更は可能です。

設定後、~/ライブラリ/Preferences/ByHost/.GlobalPreferences.XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX.plist

に項目「AppleFontSmoothing」が追加されます(途中の16進数の数字はユーザーにより異なる?)。

旧来は、~/ライブラリ/Preferences/.GlobalPreferences.plistに書き込まれていました。

一度設定した後は、このファイルをXcodeで直接操作(設定値の変更)することも可能です。
////////////////////////////

便利ツールが撤退

システムの隠し設定を有効化するアプリ「Tinkertool」のver.5(10.9対応版)では、「なめらかな文字」項目がなくなってしまいました。

Tinkertool 5.1

Tinkertool 5.1
ver.4(10.6〜10.8対応版)までは、このアプリを利用して簡単に設定できたのでちょっとがっかりです。

Tinkertool 4.96

Tinkertool 4.96
////////////////////////////

Retinaだと文字が太る

(外部モニタを利用しないのであれば)OSX 10.9[システム環境設定]→[一般]の「使用可能な場合は LCD で滑らかな文字を使用」をチェックするとサブピクセルレンダリングが有効化されます。ですが、Retinaディスプレイではフォントがかなり太い印象(※)になります。1ウェイト太くなったように見えます。比較してみました。
◎以下、通常のディスプレイでは違いがよくわからないかもしれません。ご了承ください。
Retinaディスプレイでサブピクセルレンダリング有効化

Subpixel Rendering: on
サブピクセルレンダリング無効(通常のアンチエイリアシング)

Subpixel Rendering: off
比較してみたところ、環境設定パネルでの有効化は、ターミナルでの設定[int 3]に相当しました。Leopard時代の「強」と同じです。
サブピクセルレンダリング「強(int 3)」

Subpixel Rendering: int 3
Marvericks環境で引き続きサブピクセルレンダリングを有効化する際には、デフォルトの環境設定パネルではなく、ターミナルを使って[int 1][int 2]あたりをチョイスすることをお勧めします。
サブピクセルレンダリング「弱(int 1)」

Subpixel Rendering: int 1
サブピクセルレンダリング「中 – フラットパネルに最適(int 2)」

Subpixel Rendering: int 2
※むしろ、Retinaディスプレイでは全般的にフォントが細く見える、といった方が正確かもしれません。
////////////////////////////

Chromeで制限あり

(設定値問わず)サブピクセルレンダリングを有効化していると、Retinaディスプレイ(HiDPIモードでの表示)とGoogle Chromeの最新バージョン(検証時は32.0.1700.77)の組み合わせで、Webページ内のテキスト表示に影響があります。

12px(9pt)を超える文字サイズでサブピクセルレンダリングが無効化されます。

小さい文字と大きい文字で異なる描画となります。描画が混在します。

Safariでは設定した通りの描画となります。混在は発生しません。
////////////////////////////

サブピクセルレンダリングもだんだん使いづらくなってきました。オワコン化方針がいよいよ具体的になってきたようです。

游ゴシック体/游明朝体をWebで利用する

游ゴシック体/游明朝をWebで使う方法。OSX版。

新しいOSX Mavericks(10.9)には「游ゴシック体」と「游明朝体」が搭載されました。
font-family: の指定でhtmlにも使えます。

(游ゴシック体html表示サンプル|OS 10.9以降で表示)

イオンPBは「責任は全てイオンがもちます」を大前提に、製造元も原産国も記載していなかった筈なのに、いざ食品偽装が起きた途端、納入業者に責任丸投げとかなかなか清々しいクズ

(游明朝体html表示サンプル|OS 10.9以降で表示)

イオンPBは「責任は全てイオンがもちます」を大前提に、製造元も原産国も記載していなかった筈なのに、いざ食品偽装が起きた途端、納入業者に責任丸投げとかなかなか清々しいクズ

css記述時には、游ゴシック体は「YuGothic」、游明朝体は「YuMincho」となります。
英語用の「ファミリーネーム」を利用しています。

游ゴシック体 ミディアム

游明朝体 ミディアム

<strong>タグも機能しますが、游明朝体の太字はデミボールドなので差がわかりづらく、強調表現としては使えないかもしれません。

ちなみに、Windows 8.1にも游ゴシック体/游明朝体が搭載されましたが、ウェイトが微妙に異なるようです。そのようなつぶやきを見つけました。游ゴシック体 ボールドと游明朝体 デミボールドのみ、同じウェイトです。

デバイス文字のMac/Win統一のためにこの書体を利用できるかと思いましたが、ちょっと難しそうです。

131031|追記 Windows環境やブラウザの対応を考慮した記述方法についてはこちらが詳しいです。
131101|追記 Dutch Type LibraryのOTMasterというソフトでフォント情報を調べてcssの指定方法を詳しく解説した記事を見つけました。

迷走する(?)AquaKana

アプリのフォント指定の仕組みがわからない事には、調べようがありません。

twitterで「AquaKana」を検索していたら、芋づる式に次のようなつぶやきを見つけました。

紹介されている記事をみると、OSXのアップデート後にFinderのツールバーのアイコン下のテキストのフォントが変更されています。10.8.3ではヒラギノ角ゴシックだったものが、10.8.4ではAquaKanaに変更されているようです。

おや、と思い手元のデスクトップで確認してみました。

Finder10.6.8

おやおや? 2世代前のOSX、Snow Leopard(10.6.8)ですが既にAquaKanaで表示されています。

Finder10.7.5

別のマシンのLion(10.7.5)を確認してみると、こちらは確かにヒラギノです。いつ戻したのでしょう。
OSXがLionになったとき、AquaKanaの適用範囲が変わったのは気付いていましたが、その際はアイコン下のテキストまでは確認していませんでした。

ユーザーに気付かれないよう、密かに/少しずつ適用範囲の試行錯誤をしているのでしょうか……。

////////////////////////////
他にもいろいろ調べてみると、

純正アプリの「App Store」は、

AppStore1.0.2
Snow Leopard+バージョン1.0.2ではヒラギノ、

AppStore1.1.2
Lion+バージョン1.1.2ではAquaKanaでした。

さらに、テキストエディタ「CotEditor」は、バージョンが同じ(1.3.1)でも対象OSごとに別配布で表示も異なり、

CotEditor1.3.1
Snow Leopardではヒラギノ、

CotEditor_Lion
LionではAquaKanaで表示されます。

またtwitterクライアントの「夜フクロウ」は、

夜フクロウ2.78

ツールバーや入力欄はAquaKana、タイムラインはヒラギノです(OSはLion)。

アプリの横展開を見ても整合性やルールが感じられないので、単に開発者の方々が無頓着なだけかもしれません。少なくとも「デザイン方針」ではない気がしてきました。

このようなつぶやきもあるので、これ以上はXcode開発でのアプリ内のフォント指定の仕組みを調べるしかないようです。
自分はMountain Lionのマシンを持っていないので、サンプル収集にも限界があります。

謎のまま一旦終了です。

サブピクセルレンダリングはオワコン

サブピクセルレンダリングは終了モードでした。3年遅れて気づきました。

サブピクセルレンダリングは2010年頃からオワコンだったのですね。
3年以上のタイムラグですが、気がつきました。

2010年末にtweetした方が「今さら」とおっしゃっています。

改めてAppleのサイトを見たところ、base.cssのなかに通常のアンチエイリアスで表示するための記述、

-webkit-font-smoothing: antialiased;

を見つけました(※1)。

iPad(※2)の発売が2010年1月なので、その頃にはすでに準備はできていたのでしょう。

文字のなめらかさの追求はretinaディスプレイにまかせ、トリッキーなサブピクセルレンダリング表示はいずれやめてしまうつもりだったのですね。現行モデルのMacBook Pro Retinaディスプレイモデルはまだサブピクセルレンダリングが有効ですが、デフォルト値も変わるかもしれません。

そのオワコンの仕様を使い続ける(※3)ためのこちらの記事「Snow Leopardのサブピクセルレンダリングの設定」がいまだにアクセスが多かったりするのですが……。

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

※1 webkitでサブピクセルレンダリングを含むアンチエイリアスの制御方法については以下のサイトがわかりやすいと思います。
Test page for -webkit-font-smoothing | Christoph Zillgens
こちらのサイトの記事(2011年頭の記事……)からたどって見つけました。

※2 iOSはディスプレイを回転させるのが前提なので、もとからサブピクセルレンダリングには非対応です。

※3 サードパーティ製外部ディスプレイへのサブピクセルレンダリング表示の停止は、てっきり純正購入への囲い込みかと思っていました。

サイト内の関連記事についてはタグ「サブピクセルレンダリング」をご覧下さい。

しがらみフォント

もうビットマップフォントは不要。「しがらみフォント」を削除する方法。

しがらみフォントを削除しました。

「しがらみフォント」とはアンチエイリアス無しの表示に最適化したビットマップフォントを持つフォントのことです(※1)。古いOS向けの古いフォントです。Macintoshであれば「Osaka」、Windowsであれば「MS Pゴシック」などがあたります。

PCやタブレット、スマホ画面の高解像度化、iOSやAndroidなど新しいOSの普及、既存OSのアップデートなどにより、テキストのアンチエイリアス表示はすっかりデフォルトになりました。
一般のサイトもClearType対応の日本語書体「メイリオ」を前提にしたcssを使うようになり、Windows日本語版特有の、貧相な見えのサイトは減ってきました。

「始めて使うOS」がスマホのOSの人も増えたと思います。最初から綺麗なアンチエイリアス表示に慣れた人はわざわざ「アンチエイリアスなしの方が見やすい」などとは言いません。

「しがらみフォント」は役割を終えたと考えるので、自分の環境からは削除します。

////////////////////////////
OSXの場合

システムから「Osaka.ttf」「OsakaMono.ttf」

/Library/Fonts/Osaka.ttf
/Library/Fonts/OsakaMono.ttf

を管理者権限で削除します。

古いサイトでは未だにOsakaをfont-family指定の最初に持ってきているものがありますが、ヒラギノ角ゴシックProNなどで表示されるようになります(ブラウザの設定によります)。

下は、私がよく見に行くサイト「デジカメジン」さんのとあるページです(引用箇所に他意はありません)。

cssにOsakaが含まれています。

osx_osaka

Osakaを削除することでヒラギノ角ゴシックになります。やや細く・大きくなります。

osx_hiragino

Osakaの品質が高ければ/好みであればそのまま放置してもよいのですが、アウトラインフォントとしてのOsakaは単なる「平成角ゴシック」です。平成角ゴシックはアウトラインフォントの普及を主目的としたもので、表示品質を最優先して開発されたフォントではありません。また、「レギュラー」のウェイトがやや太めで本文サイズでは画数の多い漢字がつぶれがちです。

////////////////////////////
Windowsの場合

「ClearTypeを有効」にし、ブラウザの書体設定を「メイリオ(Meiryo)」にしておけば概ね問題ないのですが、font-familyの先頭を「MS Pゴシック」にしているサイトはまだまだ多いので、アンチエイリアス無し表示の排除はなかなか実現しません。
力技(ちからわざ)ですが、MS Pゴシック(MSゴシックファミリー)からビットマップフォントを削除します。

作り方:(※2) フォント作成ソフト「TTEdit(有償)」を使ってシステムからMS Pゴシック、MS Pゴシック、MS UIゴシックを「一括コピー」することで、ビットマップフォントの削除を行ないます(コピー時にビットマップフォントをコピーしない)。その上で、オリジナルのフォント情報をそのまま書き写すことで、ビットマップフォントを含まないMSゴシックのクローンが出来上がります。仕上げに、フリーウェア「UniteTTC」を利用しttfファイルをttcファイルに統合し、Windowsのシステムに上書きします。

通常、本文サイズではMS Pゴシック内蔵のビットマップフォントがアンチエイリアスなしで表示されます。

win_noanti

ビットマップフォントを削除すると、アウトラインフォントをベースにClearTypeでレンダリングされます。

win_anti

今後、画面の高解像度化が進めば文字サイズは「大きく(=高精細に)」扱われるでしょう。ビットマップフォントでの小サイズ表示は不要になると考えています。

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

※1 いま私が名付けました。

※2 フリーウェアだけで作業したい場合は、こちらのサイト(MSゴシックとMS明朝で、ClearTypeを有効にする)が参考になると思います。あるいは、FontForgeを使える環境であれば同じく作業可能だと思います(未検証)。その他、「ビットマップフォント 削除」でググると2000年代(XP〜Vista時代)の役に立つ記事が出てくるようです。

三点リーダ 他

三点リーダ、欧文書体をあてがうと、ベースラインまで下がります。あ、記事作成中に解決方法を見つけた。他のキャラクターはどうしよう。

(Windowsやrssのフィードだと記事内容がわかりづらいと思います。OSX上のブラウザでご覧ください)

このブログのfont-family設定ですが、Lucida Grandeを先頭に持ってきています。

font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN'……(以下略)

OSXでご覧の方は英数字がLucida Grande、和文がヒラギノ角ゴシックProNの和欧混植になっているはずです。Appleのサイトをまねています。

残念ながら、こちらはAdobeアプリで言うところの「合成フォント」とは異なり、先頭で指定した欧文書体(Lucida Grande)に含まれないキャラクターを、次に指定した和文書体(ヒラギノ角ゴシックProN)で埋めていく、あくまでも擬似的なものです。いわゆるハックです。

文字種単位での指定ができないため、いくつかのキャラクターが意図しない表示になります。

  • 文末でよく使う 「三点リーダ」[ ]がLucida Grande[ … ]で表示されてしまいます。ボディ中央でなくベースラインまで下がってしまいます。
  • ][ ]などの「まる」が小さく[ ● ][ ○ ]なってしまいます。欧文のバレット[•(option+8で入力)]に近いサイズまで縮小してしまいます。
  • 同じく[ ][ ]などの「しかく」も小さく[ ■ ][ □ ]なります。
  • 註釈の頭などに付ける[ ]「こめじるし」も小さく[ ※ ]なります。 アスタリスクのような大きさになります。

「ハック」なのであきらめるのが基本です(※3)。半角ピリオド三つ[ … ]のように見えますが、気にしてはいけません。行頭のバレットは素直に<li>を使います。めんどくさい方は[ ◎ ]や[ ◉ ]を使いましょう。こちらは縮小しません。

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

font-familyの先頭に欧文書体を置いて和欧混植風な文字組みを行うのはポピュラーなテクニックですが、その際にどの文字種が和文書体と異なる表示になるかを調べる(※1)には、メニューバーの入力メニュー「文字ビューア」を使うと一目瞭然です。「三点リーダ」は英語では「HORIZONTAL ELLIPSIS(省略記号:水平)」と記載(※2)されています。

文字ビューア

※1
とは言うものの、欧文の三点リーダは基本、ベースラインに揃うタイプです。このエントリーを書くきっかけになったブログ小粋空間の記事、三点リーダが真ん中に表示されない理由の記事、に例示されている「三点リーダが真ん中に表示されるフォント」は汎用ファミリー(generic-family)やシステムフォントでフォント名ではありません。Lucida Grandeが含まれているのは単なる間違いと思われます。また、MS UI Gothicは和文フォントです。

※2
厳密には異なるようです。テクニカルな解説としては、エリプシス(ellipsis)と三点リーダ – Mac OS Xの文字コード問題に関するメモが大変参考になりました。

※3
三点リーダだけならば、

(U+22EF)の「⋯」を使うだけ

で解決するようです。「三点リーダの表示位置」問題を完全かつ最終的に解決する – めもおきばに方法が記載されていました。辞書登録しなくては。丸や四角など、他のキャラクターは見つけることができるでしょうか。「文字ビューア」で探してみることにします。あ、Androidだとダメですね。表示されません。グリフが用意されていないようです。