2013.7.9 Tuesday - 20:21

GothamがWebフォントとして使える！ Hoefler & Co.のWebフォントサービスCloud.typographyがついに開始

書体やタイポグラフィ関係者から絶大な信頼を寄せる著名なフォントブランドHoefler & Co. （旧Hoefler & Frere-Jones）が、ついにWebフォントサービスCloud.typographyの提供を開始しました。

H&FJは、2人のタイプデザイナーJonathan HoeflerとTobias Frere-Jonesによって立ち上げられたフォントブランドです。アメリカのオバマ大統領が使用したことで話題を呼んだGothamをはじめArcher、Sentinel、Whitneyなど高品質な書体を数多くリリースしています。

2014年3月、共に歩んできたTobias Frere-Jonesが脱退したため、ブランド名がHoefler & Co.へ変更となりました。

Cloud.typographyの契約を解除したため、書体サンプルは全て画像文字となっています。ご了承ください。

Cloud.typography

GothamがついにWebフォントとして使える

時間を要したHoefler & Co. （旧Hoefler & Frere-Jones）のWebフォント

海外でTypekitやFonts.comなどのWebフォントサービスが次々と立ち上がり、欧米のWebサイトではWebフォントが当たり前になる中、Hoefler & Co. （旧Hoefler & Frere-Jones）はWebフォントとしての利用を禁止しており、Webフォントデータの販売も行われていませんでした。

そんな中、（いつ頃だったかうろ覚えですが、）アメリカのオバマ大統領のサイトでHoefler & Co. （旧Hoefler & Frere-Jones）の書体が、画像文字ではなくWebフォントとして使われ始め、H&FJがWebフォントをひそかにテストしていると話題になりました。その後も中々詳細が明らかになりませんでしたが、おそらく納得のいくまで検証に検証を重ねていたと思われます。

Cloud.typography

2013年現在もHoefler & Co. （旧Hoefler & Frere-Jones）の書体が随所に使われている

スクリーン表示に最適化したScreenSmart®フォント

Cloud.typographyでは、小さいフォントサイズでも文字が潰れないように最適化したScreenSmart®フォントを提供しています。本文用に9px–18pxあたりがベストフォントサイズとなっており、Webフォントが汚いと話題のWindowsのInternet Explorerにおいても、書体のデザインをしっかりと判別できるようになっています。

スクリーン表示に最適化したScreenSmart®フォント

ブラウザ別表示イメージのサンプル

OpenType機能にも対応！洗練された管理画面から簡単に設定できる

Cloud.typographyは、JSを使わずCSSコードを1行追加するだけ簡単に導入できます。Web制作の知識があれば、問題もなく導入できます。さらにリガチャ（合字）や、スモールキャップ、スワッシュなどのOpenType機能にも対応。管理画面から簡単に設定できるようになっています。

OpenType機能への対応は、現時点で他のWebフォントサービスには無い素晴らしい機能です。紙媒体では当たり前にできる欧文組版を、スクリーン上でも徹底的に実現しようという意気込みを感じますね。

Cloud.typographyのOpenType機能

Archerの例。OpenType機能の対応は書体ごとに異なる

また各ブラウザに対応させるためのCSSやベンダープレフィックス(-moz-、-webkit-など）を記述する必要はありません。管理画面のFont ToolsのDuplicate Fontからフォントセットを複製し、配信するフォントデータを分けることで、場面に応じたOpenType機能を擬似的に使い分けることもできます。

・・・

スモールキャップの表示サンプル。使用書体はChronicle Text。場面に応じて細かに使い分けることができます。CSSで適用する擬似的なスモールキャップではなく、本物のスモールキャップです。

本文に適したオールドスタイル数字と、表計算などに適したライニング数字の表示サンプル。使用書体はArcher。こちらも同様使い分けることができます。

リガチャ（合字）の表示サンプル。使用書体はDidot。Firefoxでは不要ですが、SafariやChromeでリガチャを実現するには、CSSにtext-rendering: optimizeLegibility;の記述が必要です。

5つのフォントパッケージを追加料金不要で選べて$99/年〜
購入済デスクトップフォントはそのままWebフォントして利用可能

月250,000までのページビューであれば、$99/年〜でCloud.typographyを利用することができます。一般的なサイトであればこれで十分ですが、大規模サイト向けにページビュー数に応じた各種プランが用意されています。ドメイン単位での追加費用は不要。登録すると追加料金不要でフォントパッケージを5つまで選ぶことができます。

フォントを選ぶ際の注意点

5つのフォントが選べるのではなく、5つのフォントパッケージが選べるという点に注意してください。例えばGothamだとウェイト別にまとまったGotham 1とGotham 2という2つのパッケージがあります。この両方を選択した場合、5つ中、2つを選んだことになります。全ウェイトが入ったBundleは無料では基本的に選択できません。

またOpenType機能を使いたいのであれば、Basic版ではなく、OpenType機能が入ったPro版を選ぶようにしてください。後から選び直すことはできないようので、慎重に選びましょう。

さらにWebフォントを追加したい場合は、ライセンスを追加購入します。Webフォントのみのライセンスも販売されていますが、デスクトップ用フォントを購入すれば追加料金不要でWebフォントとして利用できます。

過去にHoefler & Co.で購入したデスクトップ用フォントがあれば、追加料金不要でそのままWebフォントとして利用できるようになっています。（※購入時と同じアカウントでCloud.typographyに登録してください。）

GothamのファミリーをWebフォントとして使いたい場合

  • Webフォントのみ：$149
  • デスクトップフォント+Webフォント（1コンピュータ）：$299

【2013.7.18追記】Development ModeとProduction Modeについて
開発テスト用のDevelopment Modeと、本番公開用のProduction Modeの2種類があります。

最初は前者のDevelopment Modeになっています。所定の容量の範囲内であれば、手軽にWebフォントを試すことができます。この間ページビュー数はカウントされませんが、お試し分の容量を超えるとメールで通知が送られてきます。

後者のProduction Modeは、本番公開用のモードです。まず本番サーバ上のどこにWebフォントデータを置くのかを指定し、Webフォント生成されたデータをアップロードして認証させます。配信するフォントに変更があった場合は、再度この作業を行います。最終的には必ずProduction Modeに切り替えるようにしましょう。

Production Mode

実は当ブログの記事公開後、ずっとDevelopment Modeのままになっていたため、
容量オーバーで通知が来てしまい、Webフォントが表示されなくなってしまいました。

…というわけで、Hoefler & Co. （旧Hoefler & Frere-Jones）のWebフォントサービスCloud.typographyは完全自社サービスなので、他の書体を使いたい場合は、他のWebフォントサービスと併用することになります。

ランニングコスト的に厳しい面もありますが、Hoefler & Co. （旧Hoefler & Frere-Jones）にはバラエティ豊かな高品質書体ばかり。是非書体だけでなく、洗練された管理画面やOpenType機能なども含めて導入する価値はあると言えます。おすすめです！

Hoefler & Co. （旧Hoefler & Frere-Jones） – Cloud.typography
http://www.typography.com/

PAGE TOP