千フォントの構造

記事の翻訳千の書体の解剖 。



アバターのリリースから数年経っても、ライアン・ゴスリングでさえ処理できないものが残っています。映画のロゴにPapyrusフォントを使用しています。 Saturday Night Liveのショットで、フォントデザイナーはメニューを開き、フォントを反復処理し、Papyrusをランダムに選択します。





フォントの選択に関する主な問題は、同時にオプションが多すぎても少なすぎることです。



一方、システムフォントのみを選択すると、標準フォントには何も表示されないため、誤った判断につながる可能性があります。



一方、数百および数千のタイトルを持つWebフォントライブラリは、膨大な数で膨大であり、逆説的なフォントの選択につながる場合があります。

フォント選択メニューの苦味

平均的なメニューでは、フォントは名前でソートされていますが、相互に接続されていません。太字の見出し用に作成されたフォントの後に小さな画面インターフェイス用に設計されたフォントが続き、結婚式の招待状用の芸術的な手書きフォントが続きます。 そして、リスト全体を最初から最後までスクロールする時間を無駄にするか、リストの最初から適切な最初のフォントを選択して四捨五入する必要があります。



明らかに、このようなインターフェイスソリューションは、体系的な作業のためではなく、無限の驚きのために作成されました。 多くの人々が驚きを好むが、それでも良いフォントを見つける成功に影響を与えたいと思っています。





「Papyrus」ビデオからフォントを選択するためのメニュー。 限られた選択肢、あらゆる種類のスタイル、しかし可能な限り最高のフォントとはほど遠い。

フォントを見つけるための体系的なアプローチ

冗長性を制限するにはさまざまな方法があります。 フォントファイル、グリフ、およびメタデータテーブルを分析する前に、分類、選択リスト、および解剖学について最初に話しましょう。

1.分類

洗練されたフォント分類システムがあります。 カテゴリへの最も単純な分割：セリフフォント、グロテスク（サンセリフ）、等幅、スクリプト（手書き）、ディスプレイフォント。 通常、これらのカテゴリは、異なるフォントサイトでフィルターとして使用されます。







しかし、これらの単純なフィルターでさえ、選択できないほど多くのフォントを持っています。 ここでは、より緩やかなグラデーションが既に表示されています。たとえば、セリフフォントは、過渡的、ヒューマニスティック、およびゴシックに分かれています。



これらのサブカテゴリは、タグとして利用できる場合があります。 しかし、フォントサイトの作成者は、一般にそれらを無視することがあります。 おそらくカテゴリが多すぎますか？ おそらく、ユーザーはこれらすべての詳細を理解していないだけでしょうか？ または、単に作者がフォントの詳細な分類のための完全で一貫した情報を持っていないのですか？

2.選択リスト

物事を整理する別の方法は、他の人の知識に頼ることです。誰かが選択したフォントのリストを使用できます。 このようなリストは、たとえばFontshopにあります。 ここでは、数十年、類似度、またはアプリケーション分野ごとにソートされたコレクションを見つけることができます。



同様のリストはTypekit 、 TypeWolf 、およびFontsInUseにもあります。 これは素晴らしいアイデアであり、皆さんが既に作業したり見たりした独自のフォントリストのコンパイルを開始することを全員に推奨できます。 将来、これらの開発はあなたにとって非常に役立つでしょう。

3.解剖学

良いフォントを見つける際の最も難しいことは、デザイン機能に焦点を合わせ、どのプロパティがフォントを良いまたは特別にするかを理解することです。 幸いなことに、フォントデザイン、フォント、およびタイポグラフィに関する書籍は十分にあります。 これらの本は、フォントの作成方法、フォントの選択と使用方法を教えてくれます。



例えば、スティーブン・コールズによる「 タイプの解剖学 」という本。 100個の適切に設計されたヘッドセットに関する情報が含まれています。 フォントの品質を説明するために、Stephenは小文字の高さ （x-height、x-height）、 width 、 weight 、 ball terminal 、 serif shapeなどの用語を使用します。





「The Anatomy of Type」-100個のヘッドセットに関するStephen Colesのグラフィックガイド。 人気のヘッドセットの歴史とデザインの特徴を研究する素晴らしい本。



しかし、ここでは100個のフォントしか説明していませんが、残りはどうでしょうか？ コンピューターにインストールするのはどうですか？ そして、ネットワークで使用されていますか？ Xの高さ、幅、重さ、コントラストは何ですか？ どうすればわかりますか？

フォントファイル内：メタデータの不足

コーディングを開始する前に、フォントのプロパティに関する適切な情報をすばやく取得できると信じていました。 理論的には、各フォントファイルには、名前、作成者名、サポートされている言語、および視覚的なプロパティを持つ異なるメタデータテーブルが含まれている必要があります。 最も明らかなのは、幅、太さ、およびフォントクラスです。 そこで、x-height、大文字の高さ、文字の平均幅、文字の上下のリモート要素に関する情報を見つけることができます。 Panoseと呼ばれる別のメタデータのセットでは、セリフの形状、比率、コントラストなど、さらに多くのプロパティが記述されています。 このすべての情報を表示するには、Glyphsなどのフォントデザインアプリケーションを使用できます。





フォント情報パネルのスクリーンショット。 ここに家族の名前、デザイナーの名前、リンク、バージョン、日付があります。 UnicodeおよびPanoseデータの範囲も確認できます。 10桁のコードは多くの特性を記述しますが、情報はファイルの設計者または作成者によって入力されるため、常に利用できるとは限りません。 右のスクリーンショットでは、上下の拡張要素、x高さ、傾斜角などのメトリックを確認できます。



しかし、この情報の入手可能性は、フォント作成者が自分の仕事にどれだけ責任を持ってアプローチしたかによって異なります。 一部のフォントファイルには大量のデータがありますが、多くの場合、特にフリーまたはオープンソースフォントでは十分な情報がありません。 また、ファイルに情報があったとしても、それは間違っているか不完全である可能性があります。





RobotoフォントとFira SansフォントのPanoseデータの比較。どちらもGoogleフォントで利用できます。 Fira Sansの場合、多くの情報が表示され、Robotoの場合は少し表示されます。 このメタデータを使用してフォントを比較することはできません。

DIY：opentype.jsを使用したフォントの分析

フォントファイルを分析し、必要な情報を自動的に抽出する方法を見つけましょう。 ファイルにはさまざまな形式がありますが、ほとんどの場合、TTF（TrueType Font）でバージョンを見つけることができます。



OTF形式（OpenType）のファイルでは、合字などの追加のプロパティに関する情報を見つけることができます。 WOFF（Web Open Font Format）ファイルには追加のメタデータがあり、フォントは圧縮形式で保存されます。



opentype.jsのおかげで、JavaScriptを使用してブラウザーでフォントファイルを直接分析できます。 Opentype.jsは、ファイルに含まれるすべてのタイプセッターのベクター情報、および主要なメトリックとメタデータテーブルへのアクセスを提供します。

フォント特性データベース

以下に、Google Fontsライブラリのすべてのフォントのコントラスト、x-height、width、weightを測定する方法を見ていきます。 Typekitやコンピューター上のフォントなど、他のフォントライブラリにも同じ方法を適用できます。

コントラスト

コントラストは、キャラクターの細いストロークと太いストロークの比率を表します。 四角いフォントや、RobotoやSan Franciscoなどのインターフェイス用に作成された多くのグロテスクなフォントなど、コントラストの低いフォントがあります。 また、BodoniやDidotなど、コントラストの高いフォントがあります。 コントラストを測定するには、文字「o」の輪郭を見て、内側と外側の輪郭間の最大距離と最小距離を比較します。





フォントのコントラストは、文字「o」の最も厚い部分と最も薄い部分で測定できます。



このシンプルで比較しやすい文字は、ほとんどの場合2つの部分で構成されています。 彼女はフォントのコントラストを評価するのに適した候補です（注：「o」の形は一見シンプルです。実際には、ストロークの太さを滑らかに変える必要があるため、うまく描くのは非常に困難です）。







opentype.jsを使用すると、文字をSVG要素としてレンダリングするためのデータを取得するのに便利です。 たとえば、外側と内側の輪郭を別々に描くことができます。 次に、1つのアルゴリズムを使用して、各回路を調べて、それらの間の距離を測定できます。 その後、最長距離と最短距離の比率を計算し、出来上がり-フォントを比較できるコントラスト値を取得しました。

x高さ

x-heightは重要な特性であり、読みやすさと主観的に認識されるフォントサイズの指標になります。 通常、このパラメーターは小文字の「x」の高さとして測定されます。





x-heightは、opentype.jsによって提供される情報を使用して測定できます。



各文字のopentype.jsは、 yMaxパラメーターを提供します。



x-heightの絶対測定に加えて、x-heightと突出ライザーの高さを比較する必要がある場合があります。 つまり、「x-heightは大文字の60％」などの値を取得します。



得られた値を比較に使用できるように（一部のフォントではEm（測定単位）ごとに1000単位が使用され、他の2048ではフォントが使用されます）、それらを正規化し、0から1の範囲で比較する必要があります

幅/割合

この値を使用して、フォント密度を評価できます。 それはどれくらいきついか、圧縮されているか、それどころか、伸びているか、自由ですか？ たとえば、異なるフォントで文字「M」の幅を測定することは可能ですが、全体のサイズまたはx高さを考慮する必要があります。 さらに、一部のフォントでは、「M」は非常に具体的であり、残りの文字セットの典型ではありません。



「Hamburgefontsiv」などの参照語に基づいて平均文字幅を計算することもできます。 これは良いオプションですが、全体的なデザインとフォントの高さを考慮して、正規化を行う必要があります。



別のアプローチは、文字「o」の割合を決定することです。 これにより、さまざまなヘッドセットの幅を比較できる驚くほど良い値が得られます。

重さ

重量を測定するには、HTMLページに小文字の「o」を表示し、黒で塗りつぶし、背景を白で塗りつぶします。 次に、黒と白のピクセルの比率を計算します。 手書きまたは非常に薄いフォントの場合、この値は非常に小さくなり、重くてかさばるフォントの場合、比率は大きくなります。 結果は非常に満足のいくものですが、文字の全幅を測定することでさらに改善できます。

距離

すべてのフォント文字の幅が同じ場合、そのようなフォントは等幅フォントと呼ばれます。 幅を決定するために、文字自体を見る必要がないことに注意することが重要です。 等幅フォントの場合でも、ドット記号は視覚的に「m」より少ないスペースを占有します。 したがって、文字の周りの非表示フィールドを記述するadvanceWidthプロパティを考慮する必要があります。 驚くべきことに、Google Fontsは技術的特性ではなくスタイルの定義として等幅という用語を使用しています。 技術的にはそうですが、 LektonやLibre Barcodeのようなフォントは一般に等幅ではありません。

類似性

値のテーブルを受け取ったら、それらを正規化して距離を計算し、フォントの類似性を評価できます。 計算の最も簡単なバージョンを次に示しますが、データの精度を上げると結果が良くなります。 さらに、すべての特性が同じアルゴリズムとは異なる方法で、フォントの類似性を評価できます。 この場合、一部のプロパティを他のプロパティよりも大幅に考慮する必要があります。





パーサーは各フォントを分析し、不可視のSVGと背景要素を描画し、測定を行い、データをJSONファイルに保存します。

デモ

データベースにアクセスするためのインターフェースが作成されます。 フォントは、多数のフォントを一度にキャプチャしたり、一部のフォントをより詳細に評価したりするために、さまざまなサイズのセルを持つグリッド形式で表示できます。



フォントは、太さ、x-height、コントラスト、幅、名前、スタイルの数でソートできます。 グラフは値の分布を示し、特定の値を除外するために使用できます。 各フォントについて、いくつかの例、シンボル、メトリック、Panoseデータ、および類似のフォントのリストを含む詳細な表示があります。







データセット



何らかの理由で、一部のフォントがSafariにロードされないため、Chromeの使用をお勧めします。

発見

類似性と矛盾については、自分でデータセットを調べることができます。 低コントラストとセリフの存在を設定すると、プログラムはすべてのブロックフォントを表示します。 xの高さを低く設定すると、出力はほとんどが手書きフォントで構成されます。 通常、非常に高い値は、大文字のみで構成されるフォントにあります。



追放者

極端な値を選択すると、通常、非常に奇妙なフォントが出力されます。 原則として、これらはスクリーンフォントのカテゴリに属します。



不快な違い

グリッドビューは、ベースラインと線形のひどい違いを明らかにします。 一部のフォントは、カテゴリに合わせてグリッドに収まりません。 そして、違いがわずかであっても、非常に類似した構造を持ついくつかの一般的なフォントを除いて、プロジェクト内の単純なフォントの置き換えはほとんど不可能であることが明らかになります。



ゴールデン平均

頻繁に使用されるフォントが良いと見なされるのは興味深いことですが、プログラムは互いに類似したフォントのリストを作成します。 フィルタを調整すると、リストを約半分に減らすことができますが、一般的なフォントはすべて残ります。 したがって、奇妙で極端なフォントを除外する必要がある場合は、平均値を選択してください。



フォークフォント

異なる方法で呼び出されますが、まったく同じように見えるフォントがあります。 それらの一部は、Alegreya＆Sahityaなど、さまざまな言語をサポートするための拡張文字セットを持つフォークです。



スタイルの数

フォントスタイルの数は、その品質の良い指標です。 可変フォントはすでに地平線上に迫っており、将来は無限にカスタマイズされる可能性が非常に高いです。 ただし、それまでは、いくつかのスタイルに属するフォントを使用することをお勧めします。 そのため、スタイルの数でコレクションを並べ替えることは、利用可能な最高のフォントを見つける良い方法です。

まとめ

これは、フォントを見つけるためのかなり複雑なアプローチです。 一般に、検索結果はフォントと関連データの品質に依存します。 Google Fontsのみを使用する場合、クラスで最高のフォントが存在しないため、非常に制限されます。 Typekitコンテンツを分析すると、非常に多くのフォントを操作する際にインターフェイスのパフォーマンスに問題があることがわかりました。 キャッシングとプリロードを使用する必要がありますが、これはまだ手元にありません。



ニューラルネットワークを使用しなくても、フォントファイルの内容と不足しているデータを把握できます。 これを行うほど、フォントの歴史の規模と業界が肩を並べていることをより明確に実感できます。

特徴

このデータセットでできること：

• 同様の幅またはスタイルの代替フォントを見つけます。
• x-heightに基づいて、フォントサイズと行の高さを自動的に調整します。
• 類似点または相違点に基づいてフォントの組み合わせを見つけます。
• アバタームービーポスターデザイナー用に独自のフォント選択メニューを作成します。
• ...

アプリ

追加資料

Panose Classification Metrics Guide

比較に適したメトリックを取得するために個々のキャラクターを測定する方法を詳述した1991年のマニュアル。 残念ながら、これらの測定は手動で行う必要があり、多くの時間が必要になります。



Jon Goldによるロボットの設計学校へのパート1

2016年5月、 Jon Goldはフォント分析への彼のアプローチについて書きました。 彼は、ルールベースの設計、AI、データセットとデザイナーツールのマッチングなどのトピックに触れました。



Googleフォントツール

Google Fontsのオープンソースフォント分析ツールのセット。 たとえば、フォントの角度を決定します。



フォントベーカリー

これは、Google FontsでフォントのTrueTypeファイルとメタデータファイルをチェックするためのPythonツールのセットです。



Webフォントサービスのデータを使用しないのはなぜですか？

そのようなサービス（たとえば、Typekit、Google Fonts、Fontstand、Fontshop、MyFontsなど）には、さまざまなカスタマイズの度合いを持つ独自のフィルターセットがあります。 各フォントのこれらのサービスのAPIは、異なる量の情報を提供します。



たとえば、 Google Fonts Web APIのRobotoフォントの場合、グロテスクなカテゴリとフォントオプションを取得できます。 https://gist.github.com/getflourish/d79836b0bebb6b44f76389b623fd7dc1



Typekit APIは、幅、x高さ、重量、分類、コントラスト、大文字、およびガイダンスも提供します。



https://gist.github.com/getflourish