コンテンツ
埋め込み可能なWebフォントは、特にレスポンシブWebデザインの時代において、Web上のデザインの開始以来最大の進歩の1つであることに誰もが同意できます。ある画面サイズから次の画面サイズに移動および変更する要素が非常に多いため、優れたタイポグラフィと明確な書体は、すべてのデバイス（Opera Miniブラウザを使用するデバイスを除く）で同等に機能する唯一の定数の1つです。
Webフォントを追加するだけでは、話の一部にすぎません。言葉には意味があるかもしれませんが、文字には感情があります。 OpenType（OT）は、AdobeとMicrosoftによって開発されたクロスプラットフォームのフォントファイル形式です。その機能は、OT対応書体の文字セットを拡張して、合字、スワッシュ、文体の代替、さらには実際のカーニングなどの活版印刷の喜びを含めることで、より深みと多様性を追加します。これらすべての素晴らしい機能を探索して、感情的な語彙を増やしてください。書体だけでやめる理由はありません。
このチュートリアルの独占スクリーンキャストをご覧ください。
これらすべての活版印刷の美しさは何ですか？さて、初心者のために合字があります（標準、裁量および文脈上の種類を含む）。これらは、ff、ffl、fi、fjなど、描画またはカット時に歴史的に混ざり合う傾向がある文字の組み合わせです。技術的には、これはfの「フード」が小文字のiまたはjの「タイトル」と組み合わされた場合ですが、トピックについて話し合うときに、真っ直ぐな顔を保つことがどのように難しくなるかがわかります。
私の個人的なお気に入りの1つは、Adobe Caslon Proなどで見られるように、ctとstのあまり一般的ではないリガチャーです。次に、Fairbank（Fonts.comから使用中）に見られるようなスワッシュがあります。これは、うまく使用すると真に独特のキャラクターを追加する素敵な急降下と装飾です。
その他の一般的な機能には、表形式の数字（等間隔で財務表に最適）、分数、古いスタイルの数字（大文字と小文字にうまく適合するようにアセンダーとディセンダーの両方を含む）、そしてもちろんカーニングを含む、スタイルの代替と数字のさまざまなオプションが含まれますテーブル。 （ブラウザは画面上でスペーシングタイプのかなり中途半端な仕事をする傾向があると私はいつも感じていたので、それだけでも入場料の価値があるかもしれません。）
- 自分のプロジェクトで試すことができるヒントやコツがたくさん含まれているサンプルページをダウンロードしてください。
ちょっとした裏話
これらのキャラクターと機能は何世紀にもわたって存在していましたが、Web上で使用できるようになったのはごく最近のことです。合字は、シュメールの写本とその後の多くの書道や書道で最初に見られました。活字の出現により、合字を使用して文字の間隔を改善し、別の種類のブロックが許可するよりも狭い間隔を可能にしました。これらの機能の多くは、写真ベース、次にコンピューターベースの植字の出現により支持されなくなりました。より優れたフォント形式で再び利用できるようになったのは近年のことであり、それらの使用が増えています。
デスクトップにOpenType（またはより正確にはOpen Font Format）とその派生Web Open Font Format（WOFF）が登場し、Webで使用できるようになり、ほぼ普遍的に使用できるフォント形式のペアがついに登場しました。ここでの重要性は、これらのフォーマットがこれまで以上に細かい活版印刷制御のためにはるかに幅広い文字と機能をサポートしていることです。すべてのWebと同様に、これらの機能の使用はすべての主要なブラウザでさまざまなレベルでサポートされていますが、今では十分に普及しているため、真剣に検討して使用する価値があります。
必要なCSSは数年前から存在しており、CSS3タイプモジュールの一部です。残念ながら、WOFF形式のサポートを十分に広めるには時間がかかっているため、ブラウザの実装とサポートもゆっくりと進化しています。ただし、すべての主要な出荷用ブラウザがOpenType機能をサポートしていることは注目に値します（Opera Miniを除く）。 Can I Useで、そのサポートがどこまで簡単に拡張されるかを確認できます。
ありがたいことに、サポートと構文は異なりますが、Sassなどのツールを使用すると、試してみるのがより実用的になります。構文が機能しない場合や機能がサポートされていない場合、ユーザーは通常のテキストで終了します。もちろん、常に問題があります。 OpenType機能を有効にするとファイルサイズが大きくなりますが、注意してキャッシュすれば、パフォーマンスを低下させる必要はありません。
では、なぜわざわざするのでしょうか。
デザインはコミュニケーションであり、人々は美学に基づいてユーザビリティについて判断します。したがって、活版印刷の選択とのコミュニケーション方法のすべての停止を引き出すことが私たちの義務です。さらに、個々の文字ではなく、図形のグループをスキャンして読んだことを覚えておく必要があります。そのため、流れがスムーズになり、文字のグループを把握して単語やフレーズとして理解しやすくなるほど、ユーザーはあなたが伝えようとしているメッセージをより早く理解し、スタイリッシュにそれを行うことができます。
詳細をお願いします
OpenType機能が有効になっているフォントをサイトに含めたら、CSSでそれらを使用するのはかなり簡単です。公式のCSS3構文は次のようになります。
p {font-feature-settings： "liga" 1、 "frac" 1; }
これらの機能が利用可能な場合、このコードは標準の合字と分数の両方をオンにします。構文が異なるため、それらを含めるための実際のより安全な方法は、次のようになります。
p {-moz-font-feature-settings： "liga = 1"、 "frac = 1"; -moz-font-feature-settings： "liga" 1、 "frac" 1; -webkit-font-feature-settings： "liga" 1、 "frac" 1; -ms-font-feature-settings： "liga = 1"、 "frac = 1"; -o-font-feature-settings： "liga" 1、 "frac" 1; font-feature-settings： "liga" 1、 "frac" 1; }
はい、Firefoxはここに2回あります。これは、Firefox 14のどこかで構文が変更されたためです。存在する機能とそれらを参照する方法のより完全なリストは、次のとおりです。
- 「c2sc」：キャップからのスモールキャップ
- 「calt」：コンテキストの代替
- 「clig」：文脈上の合字
- 「dlig」：任意の合字
- 「hist」：歴史的なキャラクターの選択肢
- 「hlig」：歴史的な合字
- 「カーニング」：埋め込まれたカーニングテーブルの使用を有効にします
- 「リガ」：一般的な合字
- 「nalt」：代替注釈
- 「塩」：文体の選択肢
- 「smcp」：スモールキャップス
- 「ss01」：代替文体セット1
- 「ss02」：代替文体セット2
- 「ss03」：代替文体セット3
- 「ss04」：代替文体セット4
- 「ss05」：代替文体セット5
- 「swsh」：スワッシュ
- 「ゼロ」：斜線付きゼロ
次のオプションでは、一度にこれらのペアの1つしか有効にできないため、（少なくとも自分の考えでは）一種の条件付きロジックが必要です。
- ナンバーケース： "lnum"：ライニング番号または "onum"：オールドスタイル番号
- 数字の間隔： "pnum"：比例または "tnum"：表形式（財務などの数値の行を並べるため）
- 分数： "frac"：通常の分数または "afrc"：代替分数
覚えたくないですか？ Sassを使用している場合は、Mixinを用意しています。上記のリストを提供し、すべてのコード記述を行います。より網羅的なリストについては、Adobeをお試しください。
合理的なアプローチ
デザインのすべての要素が理由でそこにある必要がありますが、場合によっては、正当な理由が単に美しさを高めるためであることを覚えておくことが重要です。そしてそれは大丈夫です。 OpenType機能の良いところは、すべて独自に通常のタイプにフォールバックするため、デザインに安全に追加でき、追加する洗練度が非常に目立つことです。読みやすさ、ピクセル密度の向上、画面品質に重点を置くことで、ますます多くのユーザーがより長いコンテンツをオンラインで読んでいます。つまり、より良いタイポグラフィによる読みやすさの利点は、すぐに忠誠心の向上、使いやすさの向上、さらにはユニコーンや子犬のパレードにつながる可能性があります（OK、最後の1つは誇張かもしれません）。
言葉：ジェイソン・パメンタル
この記事はもともとネットマガジン253号に掲載されました.
