ウェブタイポグラフィ

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

すべてのWebユーザーが基本的なフォントセットを利用できるようにするため、マイクロソフトは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プロパティは次のようにカンマ区切りのフォントフェイスのリストを受け入れます。

font-family : "Nimbus Sans L" , Helvetica , Arial , sans-serif ;

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

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

サンセリフ

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

セリフ

文字に装飾的な模様（セリフ）が付いているフォント。これらのフォントは、伝統的に印刷書籍で使用されています。

等幅

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

筆記体

筆記体に似たフォント。これらのフォントは装飾的な外観を持つ場合があるが、小さなサイズでは読みにくいため、一般的にはあまり使用されない。

ファンタジー

記号やその他の装飾的な特性を含む可能性があるが、指定された文字を正しく表現するフォント。

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

• システムUI

  特定のシステムにおけるデフォルトフォント：このオプションの目的は、WebコンテンツをネイティブOSの外観と操作感に統合できるようにすることです。

• ui-serif

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

• UIサンセリフ

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

• ui-monospace

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

• UIラウンド

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

• 絵文字

  絵文字を使用したフォント

• 数学

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

• Fangsong (中国語:仿宋体)
  • セリフ体の宋体と草書体の楷体の中間的な中国語書体。この書体は政府文書によく用いられる。

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

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

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

2010年に、Mozilla Foundation、Opera Software、MicrosoftによってTrueTypeおよびOpenTypeフォント用のWOFF圧縮方式が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