可変フォントによるタイポグラフィの進化:はじめに

薄く、太く、その間にあるすべて:モノタイプのFFメタ変数

言葉には力があり、タイポグラフィは彼らの声です

何世紀もの間、タイプとは読み物を「聞く」方法でした。また、一般的に、書体とタイポグラフィは、ブランディング、表現、ボーカル範囲のコア要素であると理解されています。素晴らしいタイポグラフィーは、理解、気分、意味に無数の方法で影響を与え、デザインの重要な部分です。残念ながら、ウェブの登場後何年もの間、最も基本的なタイポグラフィデザイン以外のすべてをオンラインコンテンツに適用することはできませんでした。実際のフォントと、合字、特定の数字セット、分数、真のカーニングなどのOpenType機能を使用する機能により、活版印刷のランドスケープは大幅に改善されました。しかし、ウェブ上でコンテンツを見るという現実は、速度がデザインの最も重要な側面であることを示しています。そのため、ページの速度を活版印刷の「音声範囲」と交換しました。つまり、フォントの重みが少なくなり、ブランドの忠実度と音声が低下します。

多くから、1(パラダイム:シフト)

可変フォントは、多くの機能を果たす単一のフォントです
—ジョン・ハドソン

可変フォントの登場により、ダイナミック全体が変わります。ジョンハドソンによって説明されているように、可変フォントは同じように機能する単一のフォントです。幅と太さ、傾斜、イタリックのすべてのバリエーションを、単一の非常に効率的で圧縮可能なフォントファイルに含めることができます。さらに、形式(技術的にはOpenType 1.8仕様の一部です)は完全に拡張可能です。タイプデザイナーは、使用する軸、その範囲、さらには新しい軸の定義を完全に制御できます。現在、5つの「登録済み」軸(幅、重量、傾斜、斜体、光学サイズ)がありますが、設計者は選択する軸を変更できます。いくつかの例には、アセンダーとディセンダーの高さ、テキストのグレード、さらにはセリフ形が含まれます。可能性はほぼ無限です。パフォーマンスの障壁を取り除くことで、より興味深くダイナミックなデザインと、ブランドの真の声を表現するためのはるかに優れた能力への扉を開きます。これはすべて、書体自体の忠実度を維持しながら、タイプデザイナによって公開される軸のみを変更できます。人為的な歪みは許可されていません。

Webデザイン、再発明

テクノロジーはまだ成熟しており、タイプデザイナーはこの新しい作業方法でより流になろうとしていますが、Webでのデザインの可能性は画期的です。典型的なシナリオは、特定のデザインを3〜5種類のフォントに制限して、サイトのデザイン言語と音声のあらゆる側面(本文のコピーと見出しの順列を含む)を表すことです。最も単純な実装では、可変フォントはあらゆるレベルの見出しに異なる重みを使用する自由を与え、明快さと読みやすさを大幅に向上させます。

重量が100〜900のアンパサンド

また、見出しやデータの密集した情報の表示には、わずかに狭い文字幅を使用できます。実際、タイポグラフィシステム全体を比例するように設計することができます。つまり、標準のボディコピー設定では、重量と幅が乗数になる可能性があります。そうすることで、画面サイズやユーザーの好みに基づいて設定が変更された場合に、それらの側面をボディコピーに合わせて簡単にスケーリングできるようになります。これらすべてに加えて、HTTP要求が少なく(フォントファイルが少ない)、ダウンロードするデータが全体的に節約されるため、パフォーマンスが向上します(ただし、使用するフォントと圧縮によって異なります)。

しかし、これらの自由により表現力が向上しますが、本当に興味深い機能のいくつかは読書体験そのものを変えるのに役立ちます。このページ(実際のデモページ自体)には、1991年に最初にリリースされたErik Spiekermannによる古典的なサンセリフデザインであるFF Metaの新しい可変フォントバージョンが設定されています。ローマ字とイタリックの異体字、すばらしい声の範囲は、パフォーマンスを大幅に向上させることで実現できます。18個のファイルと288k以上が、たった84kの単一ファイルに置き換えられます。

画面上で読み直す

[メタ]は見た目以上のことをしなければなりません。
—エリック・シュピーカーマン

優れた読書体験を作成する上での最大の課題のいくつかは、プロポーションと細部のフィネスの欠如に関係しています。最新のCSSとOpenTypeの機能とバリエーションの組み合わせは、強力な組み合わせを提供します。言語に基づいて合字やハイフネーションなどの機能を設定したり、画面サイズに基づいてハイフネーションをオンまたはオフにしたり、フォントサイズを縮小せずに行ごとに多くの文字を収めることができるように、最小画面で文字幅を調整することもできます。読書体験の滑らかさと快適さ。

クローズアップの準備ができて

ガラモンドの18世紀カットを光学サイズにカット。最初の画像のサイズは6ポイント、2番目の画像のサイズは72です。ストロークのコントラストの違いに注意してください。サイズが大きいほど洗練されています。

金属タイプでは一般的だったが、写真植字およびデジタルへの変換では失われた別の機能は光学サイズ設定でした(まあ、一部のデザイナーは異なる範囲に個別の光学サイズを作成しますが、まれであり、ある程度制限されています)。サンセリフのデザインではそれほど頻繁には見られませんが、数十年前(実際には何世紀にもわたって)、物理的に小さなサイズの書体がやや重いストローク、よりオープンなボウルとカウンターでカットされることは非常に一般的でした読みやすさを維持するために、さらに広い開口部がある場合もあります。特に新聞は、線が失われたり、インクのゲインによって文字が大きく損なわれないようにするために、これが重要であると判断しました。

オプティカルサイジングは可変フォントに戻り、利用可能な場合は自動的に適用するか、Webデザイナーまたは開発者が明示的に設定できます。前述のように、このようなサンセリフ書体の機能はそれほど頻繁ではありませんが、ストロークのコントラストが高いセリフのデザインで非常に劇的な効果に使用できます。

ポーランド語と落ち着き

既に説明した利点により、可変フォントの場合は非常に説得力があります。しかし、優れたタイポグラフィは、優れたデザインだけではありません。幅や重さなどの軸の範囲により、膨大な数のファイルアセットをロードすることなく、ウェブ上でより多くの編集デザインを受け入れることができます。そして、すでにいくつかの必要な可変フォントが用意されているので、コンテンツ発行者自身が使用するためにそれらを公開する機会があります。 Webサイトが格納されているコンテンツ管理システム(またはCMS)内のデザイナーの役割を想像してください。そのデザイナーは、特定の見出しやプルクォートをタイプセットできるようにするCMSに組み込まれたいくつかのシンプルなコントロールを使用することができ、毎回カスタムコードを記述することなく、印刷物のようなまったく新しいレベルのデザインを可能にします。

私たちはまだこの新しい時代の夜明けにいるかもしれませんが、それは確かに未来は明るいです

2018年5月現在、4つの主要なWebブラウザーのうち3つが、両方の主要なモバイルプラットフォームに加えて、既に可変フォントをサポートしています(caniuse.comのサポートを確認してください)。これを念頭に置いて、今日からウェブを明るくする準備が整いました。

これがCodePenの全ページです。全体を一緒に見て、それを駆動するCSSを覗いてください。これには、ビューポートユニット、CSSカスタムプロパティ(別名変数)、および多くの計算を利用して、ジェンシモンズとティムブラウンから学んだアイデアに基づいて作成したスケーリングタイポグラフィシステムが含まれます。 CodePenで直接表示するか、実際に以下に埋め込まれているものを確認してください。

書体とプロジェクトに関するいくつかの考え

私は常にエリック・シュピーカーマンの作品のファンであり、メタ、オフィシナ、フィラの年表と歴史は本当に興味深いものであり、過去25年間にわたってデジタルデザインの大部分を占めていたと思います。デザインの世界でそのような歴史と影響をもつ書体を取り、まったく新しいテクノロジーのコンテキストで作業する機会は本当にエキサイティングでした。同じファイルの一部として重量と斜体の両方で作業できることを特に感謝しました。可変フォント形式の値を非常にうまく示しています。

記事自体を書くまでは、ページの設計さえ開始しないことにしました。デザイナーやブランドオーナーを対象に、彼らの懸念に共鳴するような可変フォントの利点をデザイン言語とブランド表現で紹介するために、良い紹介を書きたいと思いました。良いドラフトができたと感じたら、書体自体とデザイン用語集での位置をもう少し具体的に追加しました。これにより、書体と歴史の両方を紹介する方法についていくつかのアイデアが得られました。

基本的な組版について考えると、スケールに行きました。ほとんどのデザインでは使用されるウェイトがより制限されているため、ウェブではあまり見られない方法で、極端なウェイトとサイズで遊んでみたかったのです。この場合、ローマ字と斜体の両方で100から900までの全範囲のウェイトを使用しました。気に入ったレイアウトを取得し始めたとき、機能を説明するグラフィックを作成するのではなく、型を外したイラストを作成する方が面白いと思いました。引用符を引いて、「インフォグラフィック」スタイルのフォントデータを少し追加します。

アンパサンドアップトップの最後のタッチは、実際にはFontFontサイトのタイプ見本ページに触発されました。アンパサンドのすべての重さを重ねて表示するグリフサンプラーがあります。もともと、ループでアニメーション化することで、すべて同じ方法でそれらを積み重ねていましたが、それでも、可変フォントとキーフレームアニメーションを実装している一部のブラウザにとっては、それは少し大変でした。再生/一時停止オプションを使用して重なり合ったレイアウトを見つけたとき、私はそれらが広がる様子が好きでした(特にモバイル)。それで、私はそれをひっくり返して静的に始めてから、アニメーションを一度再生して、スプレッド/レイヤー化されたレイアウトに戻りました。

全体として、コンテンツとデザインの両方に非常に満足しており、さまざまな画面サイズでの動きや進化も気に入っています。他の人にもインスピレーションと指導を与えることを願っています。

[Monotypeは最近、古典的なErik SpiekermannデザインFF Metaの新しい可変フォントリリースを紹介するデモページの作成とデザインに従事しました。これはそのページのテキストとビジュアルの一部です。完全なライブページはCodePenでホストされ、上記に埋め込まれています。すべての人に公開されているので、自由にコピーを作成して自分で試してみてください。テクノロジーの紹介もご覧いただけます。]

ブログに投稿された元のコンテンツ