ウェブタイポグラフィ
Web フォントを使用すると、Web デザイナーは閲覧者のコンピューターにインストールされていないフォントを使用できます。

ウェブタイポグラフィは、一般的なタイポグラフィと同様に、ページのデザイン、つまりレイアウトや書体の選択を指します。従来の印刷ベースのタイポグラフィ（一度タイプセットされたページは固定されます）とは異なり、ワールドワイドウェブ上に表示することを目的としたページには、技術的な課題が伴いますが、動的にプレゼンテーションを変更できるため、新たな可能性も秘めています。初期のウェブページのデザインは技術的な制約により非常にシンプルなものでしたが、現代のデザインでは、カスケーディングスタイルシート（CSS）、JavaScript、その他の技術を用いて、タイポグラファーとクライアントのビジョンを実現しています。

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

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

CSS1

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

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

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

Webセーフフォント

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

Microsoft の Web 向け Core フォント

Microsoft のCore fonts for the Webプログラムでリリースされて以来、Arial、Georgia、および Verdana は、Web の事実上の 3 つのフォントとなっています。

すべての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 ]

セリフ

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

等幅フォント

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

筆記体

筆記体に似たフォント。装飾的な見た目ですが、小さいサイズでは読みにくいため、一般的にはあまり使用されません。

ファンタジー

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

CSS フォントのワーキングドラフト 4 (ブラウザのサポートが少ない)

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

  • システムUI
    特定のシステムのデフォルト フォント: このオプションの目的は、Web コンテンツをネイティブ OS の外観と操作感に統合できるようにすることです。
  • UIセリフ
    特定のシステムのセリフ体デフォルトフォント
  • UIサンセリフ
    特定のシステムのサンセリフスタイルのデフォルトフォント
  • ui-等幅
    特定のシステムの等幅フォントのデフォルト
  • ui-rounded
    丸みを帯びたスタイルの特定のシステムのデフォルトフォント
  • 絵文字
    絵文字を使ったフォント
  • 数学
    複雑な数式や表現用のフォント。
  • Fangsong (中国語:仿宋体)
    • セリフ体の宋体と草書体の楷書体の中間に位置する中国語書体。このスタイルは政府文書によく使用されます。

ウェブフォント

歴史

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

マイクロソフトは1997年にInternet Explorer 4で初めてダウンロード可能なEOTフォントのサポートを追加しました。作成者は各ページ用のサブセットフォントファイルを作成するために、独自のWEFTツールを使用する必要がありました。EOTはウェブフォントが機能することを示し、このフォーマットは一般的なオペレーティングシステムでサポートされていない書記体系でも利用されました。しかし、このフォーマットは広く受け入れられることはなく、最終的には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プラグインは利用可能だったが、この技術はMicrosoftのEmbedded OpenTypeフォントと競合しなければならなかった。これは Internet Explorer ブラウザのバージョン 4.0 以降でネイティブサポートされていた。[ 22 ]もう 1 つの障害は、TrueDoc 形式のウェブフォントを作成するためのオープンソースまたは無料ツールがなかったことであったが、Microsoft は同社形式のウェブフォントを作成するための無料のWeb Embedding Fonts Tool を提供していた。

埋め込みOpenType

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/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オープンフォント形式

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フォントという用語は、 Unicode標準で定義されたコードポイントにグリフをマッピングするコンピュータフォントです。[ 41 ]現代のコンピュータフォントの大部分は、単一の書記体系のグリフしか含まないフォントや、基本的なラテンアルファベットしかサポートしていないフォントでさえ、Unicodeマッピングを使用しているため、この用語は不要になっています。広範囲のUnicodeスクリプトとUnicode記号をサポートするフォントは「汎Unicodeフォント」と呼ばれることもありますが、 TrueTypeフォントで定義できるグリフの最大数は65,535に制限されているため、単一のフォントで定義されているすべてのUnicode文字（Unicode 17.0では159,801文字）に個別のグリフを提供することはできません。

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

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

代替案

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

もう一つの手法は画像の置換です。これは、テキストの上に、同じテキストを希望のフォントで書いた画像を重ねるというものです。見た目は良いのですが、テキストの選択が難しくなり、帯域幅の消費量が増加し、検索エンジン最適化（SEO）にも悪影響を及ぼし、障害のあるユーザーがテキストにアクセスできなくなります。

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

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

参照

注記

  1. ^このようなフォントについては、オープンソース書体およびフリーソフトウェアの Unicode 書体のリストを参照してください。

参考文献

  1. ^ Garaffa, Dave (1997年9月2日). 「Microsoft IE4pr2の埋め込みフォント」 . Internet.com . 1998年7月8日時点のオリジナルよりアーカイブ。
  2. ^カスケードスタイルシート、レベル1、W3C、1996年12月17日
  3. ^ 「フォント」、カスケーディングスタイルシート、レベル2：CSS2仕様、ワールドワイドウェブコンソーシアム、1998年5月12日、 2009年7月28日取得
  4. ^ CSS2.1の変更点 —C.2.97 第15章 フォント、World Wide Web Consortium 、2010年1月30日取得
  5. ^ CSS3モジュール: Webフォント、World Wide Web Consortium 、2010年1月30日取得
  6. ^ a b「CSS2仕様」、フォント、ワールドワイドウェブコンソーシアム
  7. ^ Poole, Alex (2005年4月7日). 「セリフ体とサンセリフ体のどちらが読みやすいか？」オリジナルより2017年7月22日アーカイブ。2017年9月27日閲覧。
  8. ^ CSSワーキンググループ (2024年2月1日). 「CSSフォントモジュールレベル4」 .
  9. ^ 「font-family の ui-serif、ui-sans-serif、ui-monospace、ui-rounded の値 | 使用できますか... HTML5、CSS3 などのテーブルをサポートします」。
  10. ^ Hill, Bill (2008-07-21)、「Font Embedding on the Web」、Microsoft、2015-09-06のオリジナルからアーカイブ
  11. ^ W3Cチームのコメント
  12. ^マイクロソフトの忘れられた独占
  13. ^ Webフォント：自由世界からの視点
  14. ^ CSS @ Ten: 次なる大きなもの
  15. ^ WOFF ファイルフォーマット 1.0 W3C への提出リクエスト
  16. ^ Galineau, Sylvain (2010-04-23)、「WOFF 入門、標準 Web フォント形式」、Microsoft
  17. ^ WOFF変換リファレンスコード、2016年10月7日時点のオリジナルよりアーカイブ。 2016年5月8日閲覧。
  18. ^ 「新しいGoogle Fontsデータベースはデザインオタクの​​楽園」 Theverge.com 2016年8月24日閲覧。
  19. ^ Richard Fink (2016-09-06) Webfonts on the Prairie、Alist Apart
  20. ^ Kimler, Scott Thomas (2009-07-04), xBrowser Fonts — Expand Your Font Palette Using CSS3 , 2012-03-15 のオリジナルからアーカイブ、 2010-02-05取得
  21. ^ Wubben, Mark (2009年2月27日). 「Geek Meet: Web Typography and sIFR 3 - Slide 15 and 16」 . SlideShare . 2010年3月17日閲覧。
  22. ^ Niederst , Jennifer (2001). Web design in a nutshell: a desktop quick reference (第2版). O'Reilly. p.  36. ISBN 0-596-00196-7. 2016年3月20日閲覧。TrueDocは何年に開発されましたか。
  23. ^ Daggett, John (2009-07-31), EOT-Lite File Format v.1.1 , World Wide Web Consortium , 2010-01-30取得
  24. ^ Mills, Chris (2008-12-04)、「Opera Presto 2.2 と Opera 10 — 初見」、Opera Software 、2010年1月30日閲覧。
  25. ^ SVG in OpenType、W3C 、 2014年9月20日取得
  26. ^ウェブ上のカラフルなタイポグラフィ：多色フォントに備えよう、Pixel Ambacht 、2014年9月20日閲覧。
  27. ^匿名グリフの例、people.Mozilla、2014年10月9日のオリジナルからアーカイブ、 2014年9月20日取得
  28. ^フォント、W3C 、 2014年9月20日取得
  29. ^フォントの章、W3C 、 2018年3月8日取得
  30. ^ SVGフォントは使えるか、CanIuse 、2014年9月20日閲覧。
  31. ^ SVGOpenTypeFonts、Mozilla 、 2014年9月20日取得
  32. ^ Mills, Chris (2008-12-04)、「Opera Presto 2.2 と Opera 10 — 初見」、Opera Developer Community 、 2010年1月29日閲覧。
  33. ^ Marsal, Katie (2008-02-07)、AppleのSafari 3.1はダウンロード可能なウェブフォントなどをサポートする、AppleInsider 、2010-02-05取得
  34. ^ Irish、Paul (2010-01-25)、Chrome および @font-face: ここにあります!
  35. ^ Galineau, Sylvain (2010-07-15)、CSS コーナー: より良いデザインのためのより良い Web タイポグラフィ、Microsoft
  36. ^ Shapiro, Melissa (2009-10-20), Mozilla Supports Web Open Font Format , Mozilla , 2010-02-05取得
  37. ^ Gilbertson, Scott (2010-04-26), Google Chrome が Web Open Font Format をサポートへ, webmonkey
  38. ^バグ 38217 - [chromium] WOFF サポートを追加、WebKit
  39. ^ Opera Presto 2.7 、Operaの Web 仕様サポート
  40. ^ Galineau, Sylvain (2010-04-23)、「WOFF 入門、標準 Web フォント形式」、Microsoft
  41. ^ 「フォントとキーボード」。Unicodeコンソーシアム。2017年6月28日。2019年10月18日時点のオリジナルよりアーカイブ。2019年10月13日閲覧。
  42. ^ Cufonについて
  • W3C CSSフォント仕様
  • WOFF で言及されている RFC のリスト (2009 年 10 月 23 日のドラフト):
    • RFC  1950 ZLIB 圧縮データ形式仕様
    • RFC  2119 RFC で要件レベルを示すために使用するキーワード
    • RFC  4647言語タグのマッチング
「 https://en.wikipedia.org/w/index.php?title=Web_typography&oldid=1321733596」より取得