ウェブタイポグラフィ

ウェブ タイポグラフィは、一般的なタイポグラフィと同様に、ページのデザイン、つまりレイアウトと書体の選択です。従来の印刷ベースのタイポグラフィ (ページは一度タイプセットされると固定されます) とは異なり、ワールド ワイド ウェブでの表示を目的としたページには追加の技術的課題があり、プレゼンテーションを動的に変更できるため、追加の機会があります。初期のウェブ ページ デザインは、技術的な制限により非常に単純でしたが、最新のデザインでは、カスケーディング スタイル シート(CSS)、JavaScript、およびその他のテクニックを使用して、タイポグラファーとクライアントのビジョンを実現します。

HTMLが最初に作成されたとき、書体とスタイルは各Web ブラウザの設定によってのみ制御されていました。Netscape が1995 年に 要素を導入しfont、その後 HTML 3.2 仕様で標準化されるまで、個々の Web ページでフォントの表示を制御するメカニズムはありませんでした。ただし、要素で指定されたコンピュータ フォントはfont、ユーザーのコンピュータにインストールされているか、ブラウザのデフォルトのサンセリフフォントや等幅フォントなどのフォールバックフォントが使用される必要がありました。最初の CSS 仕様は 1996 年に公開され、同じ機能を提供しました。

CSS2仕様は1998年にリリースされ、フォントのマッチング、合成、ダウンロードを追加することでフォント選択プロセスの改善を試みました。これらの技術はあまり使用されなかったので、CSS2.1仕様では削除されました。しかし、Internet Explorerは1997年にリリースされたバージョン4.0でフォントダウンロード機能のサポートを追加しました。^{[1]フォントのダウンロードは後にCSS3フォントモジュールに含まれ、} Safari 3.1、Opera 10、Mozilla Firefox 3.5に実装されました。これにより、Webタイポグラフィへの関心が高まり、フォントダウンロードの使用も増加しました。

最初のCSS仕様では、^[2]著者は一連のプロパティを通じてフォントの特性を指定しました。

• font-family
• font-style
• font-variant
• font-weight
• font-size

すべてのフォントは名前だけで識別されていました。上記のプロパティ以外に、デザイナーがフォントのスタイルを設定する方法はなく、クライアント システムに存在しないフォントを選択するメカニズムもありませんでした。

Web セーフ フォントは、幅広いコンピュータシステムに存在することが合理的に期待できるコンピュータ フォントであり、Webコンテンツの作成者が、コンテンツが選択したフォントで表示される可能性を高めるために使用します。Web サイトの訪問者が指定されたフォントを持っていない場合、ブラウザは、作成者が指定したフォールバック フォントと汎用ファミリに基づいて類似の代替フォントを選択しようとするか、訪問者のオペレーティング システムで定義されている フォントの代替を使用します。

すべての Web ユーザーが基本的なフォント セットを利用できるようにするために、Microsoft は1996 年にCore fonts for the Webイニシアチブを開始しました(2002 年に終了)。リリースされたフォントには、 Arial、Courier New、Times New Roman、Comic Sans、Impact、Georgia、Trebuchet、Webdings、Verdanaなどがあります。EULAでは、これらのフォントは自由に配布できるものの、使用権が一部制限されていました。これらのフォントは普及率が高いため、Web デザイナーにとって欠かせないものとなっています。ただし、ほとんどのLinux ディストリビューションには、これらのフォントがデフォルトで含まれていません。

CSS2は、フォント合成、フォントマッチングの改善、リモートフォントのダウンロード機能を追加することで、Web開発者が利用できるツールを増やそうとしました。^[3]

CSS2フォントプロパティの一部はCSS2.1から削除され、後にCSS3に含まれました。^{[4] [5]}

CSS仕様では、複数のフォントをフォールバックフォントとしてリストすることができます。^[6] CSSでは、font-familyプロパティは次のように使用するフォントフェイスのコンマ区切りのリストを受け入れます。

フォントファミリ: "Nimbus Sans L" 、Helvetica 、Arial 、sans-serif ;    

最初に指定されたフォントが優先フォントです。このフォントが使用できない場合、Web ブラウザはリスト内の次のフォントの使用を試みます。指定されたフォントが見つからない場合、ブラウザはデフォルトのフォントを表示します。ブラウザが指定されたフォントに存在しない文字を表示しようとした場合も、同じプロセスが文字ごとに実行されます。

ウェブデザイナーがウェブページ上のフォントの外観をある程度制御できるように、指定されたフォントが利用できない場合でも、CSS 仕様ではいくつかの汎用フォント ファミリの使用が許可されています。これらのファミリは、フォントを一般的な外観に基づいていくつかのカテゴリに分割するように設計されています。これらは通常、作成者が指定したフォントが利用できない場合の最後の手段として、一連のフォールバック フォントの最後に指定されます。数年間、汎用ファミリは 5 つありました。^[6]

サンセリフ

文字に装飾的なマークやセリフがないフォント。これらのフォントは画面上で読みやすいとよく考えられています。^[7]

セリフ

文字に装飾的なマークやセリフがあるフォント。これらのフォントは伝統的に印刷書籍で使用されています。

等幅フォント

すべての文字の幅が等しいフォント。

筆記体

筆記体に似たフォント。これらのフォントは装飾的な外観を持ちますが、小さいサイズでは読みにくいため、通常は控えめに使用されます。

ファンタジー

記号やその他の装飾プロパティを含みながらも、指定された文字を表すフォント。

2024年2月現在^{[アップデート]}、W3CのCSSワーキンググループは、システムがタグを使用してデフォルトのフォントを指定することを提案しています。^[8]同日現在、これらはまだ広くサポートされていません。^[9]ui

• システムUI

  特定のシステムのデフォルト フォント: このオプションの目的は、Web コンテンツをネイティブ OS のルック アンド フィールと統合できるようにすることです。

• uiセリフ

  特定のシステムにおけるセリフ体のデフォルトフォント

• サンセリフ

  特定のシステム上のサンセリフ スタイルのデフォルト フォント

• ui-モノスペース

  特定のシステムにおける等幅フォントのデフォルトフォント

• ui-丸め

  丸みを帯びたスタイルの特定のシステムのデフォルトフォント

• 絵文字

  絵文字を使ったフォント

• 数学

  複雑な数式や表現用のフォント。

• Fangsong (中国語:仿宋体)
  • セリフ体の宋体と草書体の楷書体の中間に位置する中国語の書体。このスタイルは、政府文書によく使用されます。

リモートフォントを参照して自動的にダウンロードする技術は、この構造を導入したCSS2仕様で初めて規定されました。当時、Webからフォントファイルを取得することは、特定のWebページのみで使用することを意図したフォントもダウンロードしてインストールすることができ、フォントライセンスに違反する可能性があるため、物議を醸していました。^[10]@font-face

マイクロソフトは1997年に初めてInternet Explorer 4でダウンロード可能なEOTフォントのサポートを追加しました。著者は各ページのサブセットフォントファイルを作成するために独自のWEFTツールを使用する必要がありました。EOTはWebフォントが機能することを示し、このフォーマットは一般的なオペレーティングシステムでサポートされていない書記体系で使用されました。しかし、このフォーマットは広く受け入れられることはなく、最終的にはW3Cによって拒否されました。^[11]

2006年、Håkon Wium LieはEOTの使用に反対し、むしろウェブブラウザで一般的に使用されているフォント形式をサポートするよう求めるキャンペーンを開始しました。^{[12] [13] [14]それ以来、一般的に使用されているTrueTypeおよびOpenTypeフォント形式のサポートは、} Safari 3.1、Opera 10、Mozilla Firefox 3.5、Internet Explorer 9に実装されています。

2010年に、 TrueTypeフォントとOpenTypeフォントのWOFF圧縮方式がMozilla Foundation、Opera Software、MicrosoftによってW3Cに提出され、それ以来ブラウザがサポートを追加しました。^{[15] [16] [17]}

Google Fontsは、オープンソースライセンスの下でウェブフォントを提供するために2010年に開始されました。2016年までに、800を超えるウェブフォントファミリーが利用可能になりました。^[18]

ウェブフォントはウェブデザイナーにとって重要なツールとなり、2016年現在では大多数のサイトがウェブフォントを使用しています。^[19]

特定の CSS埋め込み技術^[20]を使用することで、IE4+、Firefox 3.5+、Safari 3.1+、Opera 10+、Chrome 4.0+ で動作するようにフォントを埋め込むことができます。これにより、大多数の Web ユーザーがこの機能を利用できるようになります。商用フォント ファウンドリーの中には、自社のフォントの再配布に反対するところもあります。たとえば、Hoefler & Frere-Jones は、「デザイナーがオンラインで高品質フォントを安全かつ確実に使用できる、より表現力豊かな Web の出現を熱心にサポートする」一方で、フォントの現在の配信はファウンドリーによって「違法な配信」と見なされ、許可されていないと述べています。^[21]代わりに、Hoefler & Co. はクラウドを基盤とした独自のフォント配信システムを提供しています。他の多くの商用フォント製造業者は、フォントの再配布に対処するために、ウェブフォントライセンスと呼ばれる特定のライセンスを提供しています。このライセンスでは、ウェブ上のコンテンツを表示するためにフォントソフトウェアを使用することが許可されます。これは、通常、基本的なデスクトップライセンスでは禁止されている使用です。当然、これはフリーライセンスのフォントや製造業者に干渉するものではありません。^{[m 1]}@font-face@font-face

TrueDoc はウェブフォント仕様というわけではないが、埋め込みフォントの最初の標準だった。 1994年にフォントファウンドリーのBitstreamによって開発され、1996年にNetscape Navigator 4 でネイティブサポートされた。オープンソースライセンスの制約により、Netscape は Bitstream のソースコードを公開できなかったため、Netscape Navigator 6 のリリース時にこの技術のネイティブサポートは終了した。Internet Explorerに TrueDoc のサポートを追加するためのActiveXプラグインは利用可能だったが、この技術は、バージョン 4.0 以降 Internet Explorer ブラウザーでネイティブサポートされているMicrosoftのEmbedded OpenTypeフォントと競合しなければならなかった。 ^{[22]もう 1 つの障害は、TrueDoc 形式のウェブフォントを作成するためのオープンソースまたは無料ツールがなかったことである。一方、Microsoft は、自社の形式でウェブフォントを作成するための無料の}Web Embedding Fonts Tool を提供していた。

Internet Explorerはバージョン4.0以降、独自のEmbedded OpenType標準を通じてフォントの埋め込みをサポートしています。これは、デジタル著作権管理技術を使用して、フォントがライセンスなしでコピーされ使用されるのを防ぐのに役立ちます。EOTの簡略化されたサブセットは、CWT（ Compatibility Web Type、以前はEOT-Lite）という名前で公式化されています^[23]

Web タイポグラフィは、次の 2 つの方法でSVGに適用されます。

1. SVGTサブセットを含む SVG 1.1 仕様のすべてのバージョンでは、SVG ドキュメント内でフォントを作成できるフォント モジュールが定義されています。Safariでは、バージョン 3 でこれらのプロパティの多くに対するサポートが導入されました。Opera では、バージョン 8.0 で予備的なサポートが追加され、バージョン 9.0 ではさらに多くのプロパティがサポートされるようになりました。
2. SVG仕様では、HTML文書と同様にCSSをSVG文書に適用することができ、そのルールはSVG文書内のテキストに適用できます。Operaはバージョン10でこの機能をサポートし、^[24] WebKitのバージョン325以降でもSVGフォントのみを使用したこの方法をサポートしています。@font-face

SVGフォントはSVGグラフィックを使用するW3Cフォント標準で、OpenTypeフォントのサブセットになりました。^[25]多色^[26]またはアニメーションフォントが許可されました。^[27]最初はSVG 1.1仕様のサブセットでしたが^[28] 、 SVG 2.0仕様では非推奨になりました^{[29] 。独立した形式としてのSVGフォントは、IEとFirefoxを除くほとんどのブラウザーでサポートされており、Chrome（およびChromium）では非推奨です。 [30]}これは現在一般的に非推奨であり、ほとんどのブラウザーベンダーが同意した標準は、OpenType（およびWOFFスーパーセット、下記参照）に含まれるSVGフォントサブセットで、SVGOpenTypeFontsと呼ばれます。^[31] FirefoxはFirefox 26以降SVG OpenTypeをサポートしています。

業界標準のTrueType（TTF）およびOpenType（TTF/OTF）フォントへのリンクは、Mozilla Firefox 3.5以降、Opera 10以降、^[32] Safari 3.1以降、^[33] Google Chrome 4.0以降でサポートされています。^[34] Internet Explorer 9以降は、埋め込み権限がインストール可能に設定されているフォントのみをサポートしています。^[35]

Web Open Font Format (WOFF) は、基本的には圧縮と追加のメタデータを備えたOpenTypeまたはTrueTypeです。WOFF は、Mozilla Firefox 3.6+、 ^[36] Google Chrome 5+、^{[37] [38]} Opera Presto、^{[39]でサポートされており、} Internet Explorer 9 (2011 年 3 月 14 日以降) でもサポートされています。^{[40] Mac OS X Lion の}Safariでは、リリース 5.1 以降でサポートされています。

Unicodeフォントという用語は、 Unicode標準で定義されたコードポイントにグリフをマッピングするコンピュータフォントです。^{[41]現代のコンピュータフォントの大部分は、単一の}書記体系のグリフのみを含むフォントや、基本的なラテンアルファベットのみをサポートするフォントでさえ、Unicodeマッピングを使用しているため、この用語は冗長になっています。広範囲のUnicodeスクリプトとUnicodeシンボルをサポートするフォントは「汎Unicodeフォント」と呼ばれることがありますが、TrueTypeフォントで定義できるグリフの最大数は65,535に制限されているため、単一のフォントで定義されているすべてのUnicode文字（Unicode 16.0では154,998文字）の個別のグリフを提供することはできません。

Windowsプラットフォームでデフォルトで使用できるフォントは、Microsoft Sans SerifとLucida Sans Unicode の2 つだけですが、これらによって幅広いUnicode文字のレパートリーが提供されます。^{[更新が必要]}

Linuxなどの無料オープンソースソフトウェアプラットフォームでは、GNU UnifontとGNU FreeFontが幅広い文字を提供しています。ChromeOSでは、GoogleのNotoフォントがUnicode標準でエンコードされた すべての文字をサポートしています（またはサポートする予定です） 。

Web デザインでよくある障害は、Web セーフではないフォントを含むモックアップのデザインです。このような状況には、いくつかの解決策があります。一般的な解決策の 1 つは、テキストを同様の Web セーフ フォントに置き換えるか、似たような外観のフォールバック フォントを使用することです。

もう 1 つの手法は、画像の置換です。この手法では、テキストの上に、希望するフォントで書かれた同じテキストを含む画像を重ねます。これは見た目には良いのですが、テキストの選択を妨げ、帯域幅の使用を増加させ、検索エンジンの最適化には悪影響を及ぼし、障害を持つユーザーがテキストにアクセスできなくなります。 ^{[引用が必要]}

過去には、sIFRなどのFlashベースのソリューションが使用されていました。これは画像置換技術に似ていますが、テキストは選択可能で、ベクターとしてレンダリングされます。ただし、この方法では、クライアントのシステムに独自のプラグインが存在している必要があります。

もう一つの解決策は、JavaScriptを使用してテキストをVML（Internet Explorerの場合）またはSVG（他のすべてのブラウザの場合）に置き換えることです。^[42]

• スケーラブルなInmanフラッシュの置き換え

• W3C CSS フォント仕様
• WOFF で言及されている RFC のリスト (2009 年 10 月 23 日のドラフト):
  • RFC 1950 ZLIB 圧縮データ形式仕様
  • RFC 2119 RFC で要件レベルを示すために使用するキーワード
  • RFC 4647 言語タグのマッチング