ジェイソン・パメンタルとポッドキャストエピソード5を壊す：可変フォントとは何ですか？

公開: 2022-03-10

簡単な要約↬SmashingPodcastのこのエピソードでは、可変フォントについて話します。それらは何ですか、通常のフォントとどのように異なりますか、そしてそれらは私たちのウェブサイトのデザインとパフォーマンスにどのように役立ちますか？

2週間ごとに、別のトピックについてWeb業界の誰かと話すポッドキャストを公開しています。このエピソードでは、可変フォントのすべてについて学びましょう！私はこの問題に関する知識のフォント、ジェイソン・パメンタルと話します。

メモを表示

毎週の更新

「ブランドイラストレーションシステム：強力な視覚的アイデンティティの描画」、Yihui Liu
「トラフィックの急増に対処するのに苦労しています」SuzanneScacca
「CSSレイアウトの構築：レイチェルアンドリューとのライブストリーム」、レイチェルアンドリュー
「2019年のWebデザインと開発の出現のまとめ」レイチェル・アンドリュー
「あなたのポートフォリオサイトはPWAである必要がありますか？」Suzanne Scacca

可変フォント

rwt.ioでウェブ上でジェイソンを見つけてください
Webタイポグラフィニュースニュースレター
「可変フォント：Web作成者が知っておくべきこと」Jason Pamental
エレン・ラプトンの本「ThinkingWithType」
エリック・シュピーカーマンの本「羊を盗むのをやめ、タイプがどのように機能するかを知る」

トランスクリプト

ジェイソン・パメンタルの写真 Drew McLellan：彼はデザインストラテジスト、UXリーダー、技術者、Webタイポグラフィの専門家であり、W3C WebFontsワーキンググループの専門家を招待しています。彼は、デジタルプラットフォームでタイプをより適切に設定する方法について、チームやブランドオーナーと共同で執筆、講演、協力を行っています。彼は、Adobe、Audible、Conde Nast、GoDaddy、IBMなどの組織と話をし、世界中でプレゼンテーションやワークショップ、会議を行ってきました。彼のニュースレターであるWebTypography Newsは、Web上のタイポグラフィに関する最新の更新やヒントを求める人々に人気があります。彼は明らかにWebタイポグラフィの専門家です。しかし、彼が1984年のオリンピックのローンクロケットでスウェーデンを代表したことを知っていましたか？私の壊滅的な友人、ジェイソン・パメンタルを歓迎してください。こんにちは、ジェイソン。元気ですか？

ジェイソン・パメンタル：私は壊している。特にそのイントロの後。

ドリュー：今日は明らかにウェブタイポグラフィについてお話ししたかったのです。それは本当にあなたのことだからです。あなたはウェブタイポグラフィの真のエキスパートです。それについては一般的ですが、特に可変フォントについて少し話してください。私はタイポグラフィの専門家ではないことを最初に認めます。つまり、聞いている人と同じように私を無知だと考えてください。タイポグラフィに関する情報で私をひいきにすることはできません。おそらく約10年前から、Web上で使用可能なWebフォントがあったと思います。そうですか？

ジェイソン：うん。実は、数日前にツイッターで何かを始めたのはあなたではなかったのですか？ 2009年の11月9日くらいでした。Typekitが発売されてから2日で10年くらいです。 FontDeckが同じ時間枠で正しかったことを私は知っています。その後、GoogleFontsとMonotypeServiceが間もなく登場します。ベータ版の招待状が届きました。友人のジョン・シアンシは、2009年にTypekitで働いている代理店の妻の同僚です。これは、ウェブへの関心を完全に再発明したものです。。つまり、それは私にとって革命にほかなりませんでした。つまり、学校でタイポグラフィを勉強していたときはいつもタイポグラフィが大好きでしたが、15年間ウェブ上で何もできませんでした。それはかなり素晴らしかった。

ドリュー： 10年以上ウェブフォントを使用している可能性のあるウェブに取り組んでいるデザイナーがいるに違いありません。膨大な範囲の書体から選択する能力なしにサイトを設計したことのない、現在Webに取り組んでいるデザイナーがいます。

ジェイソン：ええ、それは本当です。その経験のない人は、私たちが成長したように、ピクセルを両方向に上向きに押す必要はありませんでした。私たちは空で拳を振る気難しい老人ではありません。しかし、ええ、それはウェブ上で変更されたすべてのものだけで一種の驚くべきものです、何人かの人々が他の方法で決して経験したことがないという考えは注目に値します。

Drew： Webフォントを入手するまでに、Webでタイポグラフィを実際に使用できるようになったため、Webでのタイポグラフィの使用方法が大きく変化しました。 Webセーフフォントでできることは明らかにありましたが、非常に制限されたパレットにかなり制限されていました。しかし、おそらく可変フォントでは、ほぼ同じくらい重要な別の大きな変化が生じる可能性があります。つまり、可変フォントとは何ですか？彼らは私たちのために何をしますか？どこから始めますか？

ジェイソン：私はいつも人々に参照の枠組みを与えることから始めようとしています。したがって、Webでフォントを使用することを考えるとき、覚えておく必要があるのは、現在「従来の」フォントでは、すべてのフォントがその書体の個々の幅、太さ、傾斜、変形であるということです。 Webで使用するものごとに、ファイルをロードする必要があります。本文のコピーに使用している一般的なWebサイトでは、通常、通常、太字、斜体、太字の斜体の4つのフォントを読み込んでいます。それらすべてのものをロードする必要があります。それらのそれぞれは、ダウンロードして処理し、レンダリングする必要がある少しのデータです。

ジェイソン：通常、私たちが何年にもわたって行ってきたことは、その非常に少数のフォントを使用することに自分自身を制約することです。これは、実際には特に優れたタイポグラフィの実践ではありません。グラフィックデザインでは、はるかに広い範囲を使用するのがはるかに一般的です。特定のデザインでは、8つまたは10の異なるウェイトと書体のバリエーションを使用できます。 Webでは、パフォーマンスのために非常に制約があります。可変フォントの大きな違いは、これらすべての順列であり、これらのバリエーションは1つのファイルに含まれています。そのフォーマットは非常に効率的です。なぜなら、そのキャラクターの通常の形状を保存し、次にそれらの曲線に沿ったポイントが移動して太字または細いまたは広いまたは狭いようにレンダリングする場所のデルタと呼ばれるものを保存するからです。

ジェイソン：違いを保存するだけで、アウトライン全体を保存する必要はありません。これははるかに効率的な形式です。単一のフォントファイルほど小さくはありませんが、個別に取得したすべてのフォントファイルよりもはるかに小さくなっています。 IBMのPlexSansのようなものを見ると、これらの個別のファイルはすべて1メガバイト近くになり、1つのファイルに直立したすべての幅と重みを含む2つの可変フォントファイルがあり、もう1つのファイルの斜体は230Kのようです。それは本当に、本当に完全なキャラクターセットのためです。ほとんどの人はそのサブセットを使用して、それをさらに小さくすることができます。私は一般的に、典型的な西ロマンス語のWebサイトのニーズに対して、これらのファイルサイズが約50〜100Kであると考えています。それはロードとそれほど違いはありません…3つまたは4つの個別のフォントファイルをロードすると、おそらくそれよりも多くのデータをロードすることになります。これはパフォーマンスにとって興味深い勝利ですが、CSSを介してWebで使用できる書体の全範囲を開くことにもなります。

ドリュー：つまり、食事ではなくレシピを提供するようなものです。ここに斜体のバージョンではなく、ここに太字のバージョンがあります。これは、「通常のバージョンです。斜体にする場合はこれを行い、太字にする場合はこれを行います。」のようなものです。これにより、ネットワーク上で減少するファイルサイズが削減されます。

ジェイソン：うん。まあ、ある意味では、それはあなたにすべての材料を与えて、それからあなたはあなたが望むどんなレシピでも作ることができます。本当にどこにでも行くことができるので…プレックスの例に戻ると、700が典型的な太字の一種である100から700の重みまで、400は一種の通常の重みになります。しかし、あなたははるかに軽いです。したがって、非常に大きくて非常に細い行見出しやブロック引用符、さまざまな項目などを強調して、さまざまなサイズで太字にしたいものを調整することができます。パフォーマンスを向上させながら、タイポグラフィやユーザーエクスペリエンスを向上させるために、さまざまなことができます。それが門番です。

ドリュー：では、今日私たちが通常の大胆なものと考えるものの間には、ほぼ無限の数のステップの微調整がありますか？あなたは実際にその軸に沿ってどこにでも行き、2つの間を微調整する能力を手に入れましたか？

ジェイソン：そうですね。グラフィックデザインを研究し、長年にわたって印刷デザインをかなり綿密に調べてきた人として、私が本当にワクワクしていると思うのは、レンダリングするテキストのサイズに基づいて、太字が実際に何であるかという考えを変える必要があるということです。したがって、デフォルトでは、通常および太字の400と700は、Webのデフォルトの一種です。しかし、実際には、大胆に呼びかけている唯一の理由は、強調したい、目立つものが欲しいということです。ただし、フォントが小さいサイズから重くなるほど、読みにくくなります。それは一種の小さなオープンスペースを埋めます。およそ16ピクセルサイズに設定されている場合、またはそこで使用しているものをボディコピーに700を使用する代わりに、十分に強調されているが文字の形がさらに開いている550、575を使用します。次に、大きくなるにつれて、より重いウェイトを使用する場合があります。

ジェイソン：しかし、繰り返しになりますが、それはその時点でのあなたの選択のようなものです。適切なレベルの強調を得るためにそれを調整することによって、それでも本当に良い読みやすさを維持することによって、私たちははるかに多くの柔軟性を持っています。これらがより人気があり、より広く使用されるようになるにつれて、人々がその範囲を使用する方法でもう少し微妙なニュアンスを持ち、実際により表現力があり、同時に読みやすくなることを教え始めることができることを本当に望んでいます。

ドリュー：フロントエンドとしてデザインを実装し、与えられたデザインを実装することに気付いたのは、暗い背景の明るいテキストと明るい背景の明るいテキストの色のコントラストの組み合わせが異なるため、重みが完全に異なる可能性があることです。おそらく、これは、そのような変化に基づいて、視覚的および読書体験を均一にし、一種の精巧にするのに役立つでしょうか？

ジェイソン：もちろんです。これは、私がワークショップやトークで通常紹介することの1つであり、そのライトモードメディアクエリのサポートを追加することです。そのコントラストを反転させることはできますが、微妙な方法でそれを実行したいと思います。書体によっては、セリフ書体で非常に重く見えたり、ひねくれたりすることがあります。少し重くしたり、少し軽くしたい場合もありますが、暗い背景に文字を配置したり、文字が一緒ににじんだりする場合は、文字の間隔を空ける必要があります。タイポグラフィで調整できることはほとんどありません。メディアクエリは非常に単純に削除されます。つまり、それをサイトに追加するのは2行のコードのようなものです。それからそれはあなたがそれで何をするかです。必ずしも色を反転させるだけではありません。コントラストを調整する必要がある場合もありますが、読みやすくするためにタイプ自体を微調整する必要もあります。

ドリュー：おそらく、可変フォントで変更できるのは重量だけではありません。表示されたフォントを変更する方法は他にもありますか？

ジェイソン：うん。それは完全にタイプデザイナー次第です。これはブラウザのすべての人にとって無料ではないことを強調するのは本当に良いことだと思います。ブラウザは、フォントで有効になっているものだけをレンダリングできます。最終的に、重量がこれに及ぶと言うのはタイプデザイナーです。幅軸があるかもしれません。少し狭くなったり、少し広くなったりしますが、登録された軸と呼ばれるものを持つ機能もあります。幅、重量、傾斜、斜体、光学サイズがあります。これらはすべて、CSSプロパティにマップされる中核的なものです。傾斜は互いに角度をつけることができるので、直立していて、実際には逆傾斜と前傾斜のあるものを見てきました。それは完全にオープンです。イタリックは通常オンまたはオフですが、必ずしもそうとは限りません。あなたは実際に持つことができます…まあ、あなたが通常からイタリックにシフトするにつれて文字の形を徐々に変えて、途中で文字を置き換えることを試みたタイプデザイナーがいます。それはちょっと面白いことです。

ジェイソン：しかし、カスタム軸を持つ機能があります。タイプデザイナは、変更したいカスタム軸を定義できます。ある種の重力の広がりのしずくとあらゆる種類の楽しいねじれの形、またはセリフの延長、アセンダーとディセンダーの高さの変更を追加するものを見てきました。小文字のフォームで、セリフかどうかを変更します。あなたができることはいろいろあります。それは本当にタイプデザイナーの想像力次第です。私たちは、これらすべてのことで現実的に何が起こり得るかについて、表面をかじっただけだと思います。すべてCSSからアクセスできます。

ドリュー：うん。これらのプロパティはすべて、デザインの残りの部分で提供している通常のCSSを介して微調整できます。これらの変更をトリガーするために、CSSでどのようなことができますか？それをトリガーするメディアクエリがあるレスポンシブレイアウトで行うのと同じですか？

ジェイソン：あなたがそれをすることができるすべての種類の方法があります。あなたがしなければならない小さな変更があります。人々がこのようなものをいじくり回すのに役立ついくつかのものへのリンクをたくさん提供すると思います。つまり、私はたくさん書いたのです。うまくいけば、それは人々を助けるでしょう。次に、使用側では、フォントの太さの軸がフォントの太さにマッピングされます。通常の太字を言う代わりに、数字を入力するだけです。メディアクエリで変更できます。 JavaScriptで変更できます。あなたはそれであなたがやりたいことを何でもすることができます。私は、基本的に数学を使用するために、ティム・ブラウンから学んだCSSロックと呼ばれる手法を使用してきました。 CSSのカスタムプロパティとそれをスケーリングするための計算。小さなブレークポイントから大きなブレークポイントに達すると、フォントサイズと行の高さをスムーズにスケーリングします。

ジェイソン：必要に応じて、JavaScriptを少し使用して、ウェイトを使って同じことを行うこともできます。重み軸は、CSSプロパティであるフォントの重みにマップされます。フォントの幅軸はフォントストレッチにマップされ、それはパーセンテージで表されます。多くの書体デザイナーは必ずしもこれがどのように表現されるかを考えているわけではないので、400から650までのような奇妙なことをする重みの範囲が表示される場合があります。それでもパーセントで表現する必要がありますが、機能します。大丈夫だよ。通常とは何かを知る必要があり、すべてのフォントが文書化されています。次に、これら2つ以外の場合、現在、傾斜と斜体の実装で少し不均一なサポートがあります。フォントバリエーション設定の使用にフォールバックする必要があるものの多くは、一度にいくつかのものを提供できます。フォント機能の設定のようなものです。これは一種の低レベルの構文であり、この4文字の軸と値、次の軸、次の軸のコンマ区切りのリストを指定できます。

ジェイソン：人々が覚えておく必要があることの1つは、フォントバリエーション設定を使用すると、その意味論的理解がすべて失われ、フォールバックが失われることです。フォントの太さとフォントのストレッチは、すべてのブラウザで広くサポートされています。あなたは間違いなくそれらの属性を使うべきです。それ以外の場合は、フォントバリエーション設定を使用できます。ただし、通常の方法でフォントの太さを使用する利点は、可変フォントが読み込まれない場合でも、ブラウザがそれを使用して何かを実行できることです。一方、可変フォントを理解できない場合、またはロードされない場合、すべてがフォントバリエーション設定にあると、すべてのスタイル情報が失われます。これは、どこで何がサポートされているかという点で、ちょっとした補足です。ただし、ほとんどの状況で遭遇する可能性のあるすべての出荷ブラウザでサポートされていることも言う必要があります。 I-11は機能しませんが、静的Webフォントを配信してから、CSSの広告サポートを使用して可変フォントに切り替えることができます。そうすれば、アセットの重複ダウンロードを回避でき、非常にうまく機能します。私はすでにいくつかのサイトでそれを生産しています。

ドリュー：私はあなたが見ている多くの種類のより現代的なウェブ技術のように、しばらく静かに泡立っている可変フォントがあり、それが最終的に沸騰してブラウザでサポートを得るときだけだと思いますそして、あなたのような人々はそれについて騒ぎ立てて、それがそこにあることをみんなに知らせます。最新のダウンロードをすべて追跡しているわけではなく、日々の仕事に取り掛かっている標準的なデザイナーや開発者には、ほとんど感じられます。どこからともなく出てきたように見えるかもしれません。しかし、これはかなり前から泡立っていると思います…つまり、私たちが現在扱っている2つのわずかに異なる実装について言及されました。実装するためのある種の古い標準と新しい標準がありますか？

ジェイソン：まあ、それは実際には古くて新しいものではありません。どちらも非常に意図的なものです。それらとの違いを理解することは本当に価値があるので、私はすぐにそれに戻ります。しかし、あなたは正しいです。このフォーマットは3年ほど前に導入され、2016年9月に導入されました。実際には、3週間後のSafariのナイトリービルドで最初の実用的な実装が行われました。ブラウザが機能していたのは非常に速かったです。 Safariは、Safariを完全にサポートする最初の製品です。ハイシエラが出た時だったと思います。わからないけど、Safari12みたいなものだった。

ジェイソン：しかし、それほど長くはないうちに、Firefox、Edge、Chromeでサポートが出荷されるようになりました。私たちは実際にほぼ2年間ブラウザをサポートしてきました。しかし、フォントはそれほど多くありませんでした。このような着実な進化がありました。 Web上でそれらを使用するためのサポートは、実際には他のどこよりも長く続いています。つまり、技術的には、この形式はデスクトップOSでも機能します。したがって、TTF形式を使用している場合は、WindowsまたはMacのデスクトップOSにインストールして、任意のアプリケーションで使用できます。軸を無限に操作したい方法で常に変更できるとは限りませんが、そのフォントファイルに埋め込まれた名前付きインスタンスの概念があり、これにより、以前の軸にマップされます。

Jason：たとえば、Keynoteでは、可変フォントの明示的なサポートはありませんが、Tech Senseのように、凝縮された軽いものがある場合は、この形式は機能します。通常、通常、通常の太字、狭いなどがあり、家族全員をインストールするのと同じように、すべてドロップダウンメニューで利用できます。次に、IllustratorまたはPhotoshop、または先週出荷されたばかりのInDesign、または数週間前に出荷されたSketchを使用している場合、それらはすべて可変フォントをサポートしているため、さまざまな軸すべてにアクセスして、それを試してみることができます。心の内容。しかし、ブラウザーでは、ここでさらに多くの作業を行う必要があります。あなたの妻からヒントを得て、私はしばらくの間このドラムを叩いて、人々にそれをもっと知ってもらうように努めてきました。次に、Firefoxチームが開発者ツールを作成するために行った作業に感謝します。 Jen Simmonsがそれを推進しているので、フォントの機能を理解するのに役立つ、ブラウザで動作する素晴らしいツールがあります。

ドリュー：書体デザイナーとフォント機能についておっしゃいましたね。利用できるフォントはたくさんありますか？

ジェイソン：まあ、今はたくさんの人がやっています。おそらく、それらを探すのに最適で最も包括的な場所は、ニック・シャーマンのサイト、v-fonts.com、v-fonts.comです。それは単なるカタログサイトです。それは急速に本当に、本当に大きくなっています。現在、より多くの可変フォントが出てきています。オープンソースのものはそれほど多くありませんが、GitHubで可変フォントを検索すると、実際にはたくさんのプロジェクトが見つかります。しかし、Googleは新しいAPIのベータ版をリリースし、そこで利用可能な約12の可変フォントを使用しています。それらからより多くのものがあります。彼らはrecursive.designでRecursiveをリリースしました。これは、StephenNixonの素晴らしい新しい書体です。オープンソースのPlex変数が利用可能です。それからたくさんの商用のものがあります。

ジェイソン：それについてのクールなことは、Monotypeがかなり大きなものをリリースしたことです。しかし、このフォーマットの実験を先導しているのは、多くの小規模なファウンドリや個々のデザイナーです。これは、デザインにとって本当に素晴らしいことであり、この新しい分野を開拓している新しいデザイナーや小規模なデザイナーからのこれらの新しいデザインのすべてを目にしているWebにとっても素晴らしいことだと思います。私は彼らがこれで成功するのを見たいので、彼らは本当にいくつかの素晴らしいものをそこに出すために率先して取り組んできたからです。

ドリュー：既存のフォントが可変フォントに更新され、ファミリが単一の可変フォントに置き換えられるのを見ていますか？それはまったく起こっているのですか？

ジェイソン：そうです。 Monotypeがリリースしたものは、いくつかの本当に古典的な書体のアップデートです。 FF Metaは、昨年のデモをデザインすることで、彼らの立ち上げを支援したものです。彼らはそれを持っています。 Univers、Frutiger、Avenir、これまでにリリースしたのはこれらの4つだと思います。それらは本当に一種のコアクラシックブランド書体です。彼らはもっと取り組んでいます。生産のさまざまな段階にあるようなものが少なくともあと5ダースほどあることを私は知っています。大企業向けに大量のカスタム書体作業を行うDaltonMaagには、非常に優れた可変フォントがいくつかあることを私は知っています。私はTypeTogetherでいくつかの作業を行ってきました。彼らはまた、いくつかの本当に素晴らしい書体を持っています。私はそれを知っています…

ジェイソン：私がこれらのことについて話したいくつかの会議で、アディダスもまた、ほぼ2年間、印刷物のすべてのブランド作品に使用していることを示しました。これは本当に、本当に注目に値するものです。しかし、MarkSimonsonはProximaNovaの可変バージョンにも取り組んでいます。それはちょっと大したことです。これは、これまでで最も売れたWebフォントの1つです。それが起こっています。それは、スケールの上下に少しずつ起こっています。しかし、Font of the MonthClubのDavidJonathan Rossに登録するだけの簡単なものでも、ほぼ毎月可変フォントを入手できます。つまり、彼は彼が出しているものに本当に信じられないほどです。年間72ドルくらいです。彼はあらゆる種類の本当に美しいものを出してきました。

Drew：それなら、非常に興味深いです。なぜなら、明らかに、可変フォントの機能を使用すると、これらを利用する新しいデザインを作成できるからです。しかし、潜在的に、誰かが戻ってそれを再訪し、新しい可変フォントバージョンに基づく新しい実装で複数のフォントファイルを置き換えることができる可変フォントバージョンが現在利用可能である本番環境にあるサイトが存在する可能性があります。

ジェイソン：ええ、もちろんです。それは私がかなり定期的に受ける質問のいくつかです。最近、私は開発チームが同じ質問について私に尋ねたかなり大きなスポーツ放送のウェブサイトを見ていました。私は、彼らが使用している2つの書体について、さまざまなフォントを利用できることを確認しました。少し調べてみると、1つの書体の4つのインスタンスと他の3つのインスタンスを2つの可変フォントファイルに置き換え、5回のリクエストでファイルサイズの70％以上を取り除くことができることがわかりました。つまり、パフォーマンスの観点からは質問の勝利になるでしょう。非常に大規模なサイトの場合、数百万人のユーザーにまたがる約300Kのデータダウンロードを削除することを検討すると、実際には実際のコストと帯域幅のコストが削減されます。 CSSを書き直さず、フォントを置き換えるだけの純粋に実用的な観点からも、パフォーマンス、ページレンダリング時間、そして実際の帯域幅コストにおいて、すでに大きなメリットがあります。

ドリュー：実際には、一方を他方に交換するだけで、思ったほど簡単ですか？

ジェイソン：そうかもしれません。その完璧な例は、Googleが9月にATypIで何気なく滑らせて、Oswaldで1日1億5000万回の調整を開始したことだと思います。彼らはそれの可変フォントバージョンを作成し、それが大きな利益をもたらすのに十分なインスタンスを使用しているWebサイトでそれをサーフィンし始めました。彼らは誰にも言わなかった。彼らはサイトの所有者に話しませんでした。誰も何もする必要はありませんでした。ウェイト軸が正しくマッピングされているため、デフォルトで問題なく機能します。 1日に1億5000万回は、大量のフォントを提供しています。それは、彼らが提供する上位5つのWebフォントを切り替え始めることができれば、この風景が彼らにとってどのように見えるかについて、彼らにいくつかのより良い洞察を与え始めていますか？ OpenSansはおそらくその1つだと思います。ラトはおそらくそこにいると思います、ロボト。

ジェイソン：それで、それらを見て、それらの最適化されたバージョンがどのように見えるかを見ると、Googleがそれに興味を持っているいくつかの非常に明確な理由があることがわかります。次に、反対側を見ると、デザインスペースと、ブランドの書体を別のものに交換するのではなく、自社のブランドの書体の全範囲で作業している場合に、会社がブランドの声にどれほど忠実であるかを確認できます。パレットに制限があります。ですから、そのスペクトルの両端の種類について学び、探求することは本当に興味深いことです。

ドリュー：それは、タイポグラフィのエキサイティングな勇敢な新しい世界と、以前よりもウェブ上でより敏感で潜在的により創造的な方法でタイプを行う機会のように聞こえます。

ジェイソン：まあ、それは確かに私が望んでいることです。 Web上でフォントをすべての段階で採用する上での最大の障壁の1つは、パフォーマンスであると思います。では、どうなりますか？ロードにはどのくらい時間がかかりますか？これは、ページのレンダリング時間にとってどのような意味がありますか？目に見えないテキストやスタイルのないテキストのそのようなフラッシュの問題があります。これらすべてに取り組んでいると、実際、そこに到達するのにすべてがかかる時間に戻りますか？ブラウザはそれにどのように反応しますか？これらの問題のいくつかを軽減するためにできることはたくさんあります。しかし、実際には、より優れたフォントとそれを提供するためのより優れた方法があれば、これらの問題はすべてそれほど重要ではなくなります。ですから、それを適切に行うことで、より表現力豊かになります。私たちは本当にこれのデザインの終わりを押して、もう少し創造的になることを試みることができます。

ドリュー：最近、ウェブがサイトごとに記事テンプレートをデザインするという罠に陥ったような感覚を表現しているので、いくつかの異なるタイプのコンテンツにいくつかのバリエーションがあります。しかし、誰もが私の目に非常に読みやすいこのmedium.comスタイルの1列のテキストに向かって流れています。うまく植字。それはそんなに悪いことですか？

ジェイソン：それは悪いことではないと思います。退屈になると思います。つまり、ミディアムが出たとき、それはかなり斬新でした。つまり、1列の…あなたが言うように、それはかなりうまく植字されたコピーだったと思います。素敵なエリアがあります。混んでいませんでした。それは窮屈ではなく、サイドバーや他のすべてのものでした。ビジネスモデルとそれをサポートするものについては常に疑問があります。だからこそ、ミュールデザインのマイクモンテイロが数年前に行ったのは、シアトルタイムズの本当に美しい再設計だったと思います。発売までは絶対にゴージャス。それから彼らは列の両側にこれらの巨大なバナーを持っていました、そしてそれはちょうどそのすべての空白を取り除いただけです。本当に残念でした。

ジェイソン：企業はお金を稼がなければならないことを理解しています。それには影響があります。ですから、それが1つの選択肢であるのは素晴らしいことです。その素敵なきれいなレイアウトを持つために。しかし、それだけではありません。 CSSにはこれらすべての機能があり、マージンとレイアウトを使用して非常に興味深いことを実行できます。つまり、現在グリッドがあるという事実だけではありません。しかし、CSSのブラウザーで計算を実行できるという事実により、さらに多くの興味深いことを実行できます。あなたはそれを重ねて、タイプではるかに表現力を高める能力を身に付け、それから私たちは彼らが雑誌で何をしているのかを見始めることができます。バニティフェアには1つの記事テンプレートがありません。彼らは6つか7つか8つ持っています。それらがどのように配置されているかを実際に見ると、非常に大きな変動性がありますが、それはシステム内で機能しています。

ジェイソン：つまり、Webサイトのデザインシステムを作成するとき、1つのレイアウトだけで停止するのではなく、コンテンツ管理システムにいくつかのスイッチを組み込む比較的簡単な方法があります。それらのほとんどは、かなりの柔軟性をサポートしています。私たちが人々に選択肢を与えることができなかった理由はありません。レイアウト1、2、3、4、5、6を使用したいと思います。これにより、さまざまなマージン、さまざまなオフセットが導入されます。たぶん、いくつかの列を作成する機能を導入します。はるかに興味深いウェブを作るために私たちができることはたくさんあります。その中でタイプは本当に大きな役割を果たすことができると思います。

ドリュー：ウェブにもう少し個性を加えることになると、私たちの救世主をタイプしますか？

ジェイソン：そうですね。私たちは、より良いユーザビリティに向けて、ウェブ上でこの長い進化を遂げてきたと思います。しかし、私たちが今まで心配しているのは、その功利主義者だけである場合の犠牲者の1つだと思いますが、それは使用可能なアプローチですか？それは性格を打ち負かす傾向があります。そして、すべてのWebサイトが…繰り返しになりますが、Webフォントが登場し、これまでにない新しいレベルの表現力が生まれました。それから突然、私たちは…ディスプレイが良くなりました。そのため、セリフがミックスに戻ってきました。それらをウェブ上で再び使用することができます。これらのものはいくつかの生命を追加しました。次に、1つまたは2つのサンセリフを使用してすべての人に最適化されました。それはOpenSansか、RobotoかOswaldか何かです。本当に良い、本当に読みやすい書体がたくさんあるのと同じことに戻ってきました。私たちは、タイポグラフィについて多くのことを推進していることが多い、この現世代のUXデザイナーを実際に教えていません。それがどれほど表現力豊かであり、気分やトーンをどれだけ変えることができるかについては何でも。

ジェイソン：それで、グラフィックデザインや読みやすさの概念を研究した人ほどよく知られていないタイプについてのアイデアを持っているウェブ上のもののデザインの方向性を指示している膨大な数の人々がいます。それらをまとめる必要があります。それはどちらか一方ではありません。それはとです。する必要があります。

ドリュー：特に性格や口調や気分について話すときは。ビジネスの観点から、または私たちが話していることから、ブランドの側面があります。では、すべてを同じように見せることで、ブランドを顧客に伝える能力が失われるのでしょうか。

ジェイソン：もちろんです。政治に飛び込むわけではありませんが、全体としては…米国で確かに経験した大きな問題の1つであり、過去数年間に英国で起こったこととそれほど変わらないと確信しています。すべてのニュースが単一のプラットフォームで消費され、すべてが同じように見える場合、音声の区別はありません。つまり、米国の成人の75％が、ニュースのかなりの部分をFacebookから受け取っていると言っているようなものです。つまり、それがどれほど一般的に恐ろしいかを脇に置いておきましょう。しかし、すべてが均一に提示されていることを考えると、ガーディアンからニューヨークタイムズ、ウォールストリートジャーナル、ワシントンポスト、ジョーの右翼ニュースまでの記事に違いはありません。それはすべてまったく同じように表示されます。

ジェイソン：そのロゴ、そのタイプのスタイルを見ると、ガーディアンはとても特徴的です。ウォールストリートジャーナルはとても特徴的です。見出しだけでも、それを見るとすぐにわかります。私たちはそれがどこから来たのか知っています。次に、そのブランドとその信頼性とのこの自動関連付けがあります。それをすべて取り除くと、次のようになります。「わかりました。これを見出しで評価します。それでは、誰がより良い見出しを書いたのですか？先に進むことはそれほど多くありません。ですから、私たちは途方もない量を失ったと思います。 Apple News Plusがやろうとしていることを見ると、それを再導入しようとするいくつかの会社の一部でいくつかの努力があります。ブランデルはヨーロッパでそれについて本当に興味深い仕事をしました。彼らは米国で発売されましたが、彼らが本当に成功したかどうかはわかりません。これは、これらのさまざまなトップレベルの新聞や出版物すべてのコンテンツを購読して表示できるプラットフォームでした。それは常に独自のデザインになります。 So that was really kind of an interesting approach there. It was always preserving the brand voice, that authenticity and that authority that would go along with that news. It really helped provide some cues for you as a reader to kind of evaluate what you're reading.

Jason: I think that's important. I think it's not something to be taken lightly.

Drew: Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone's content was being just distributed via RSS and appearing in a reader in identical format, identical layout. I think you do lose something of the personality and the voice.

Jason: Yeah. それは本当です。 I don't think that's an entirely solvable problem. I think if you can imagine an RSS reader with a different typeface for every headline, it would be crazy. There's a reason why that that doesn't work that well, but there has to be some middle ground. Type does play a role in that. Then certainly, once you get back to the website, there is that sort of instant recognizability that will help that experience stand apart from seeing it anywhere else.

Drew: So say I'm a designer. I'm working in a small agency. I'm turning out designs for all sorts of different clients. I look at my work. I think, “This is all good. This is readable, but it's got no personality in it.” Where do I start to actually put back some interest, some excitement, and not just lean on this sort of uniform UX driven layout that I've sort of conditioned myself to use?

Jason: Well, I think the thing to do is if you've never studied typography, you haven't necessarily kind of trained your eyes to see what the differences are in one typeface to another. Even when you have studied graphic design, you have to remind yourself of these things all the time. So I think oftentimes that I'll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, “Where do you start?” I made a list of books that I think are really helpful. So something like Ellen Lupton's book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann's book, Stop Stealing Sheep is a great one although I think at the moment, it's out of print. I think that he might be working on another edition but that's so… If you find that one, that's a good one as well.

Jason: Those will help introduce you to the terminology and understanding what the differences are between the different styles of text. Then once you have that basic introduction, it gives you a better frame of reference when you look at other websites. Getting a sense of like, why does this one feel warmer than that one? What are the combinations of type? 特徴は何ですか？ As a web developer often does or web designer often does, you inspect an element, see what the typeface is that's being used there, and that can start to help build a palette of ones that you become familiar with. Very often, designers do hone in on a few that they get to know well and they tend to use them on a lot of different projects. That's not necessarily a bad thing. It's certainly better now if you're working with a variable font and you can be that much more varied.

Jason: So you can decide that on this website, this is what I want to call normal. This is the width that I want to use and the other aspects of it. So even using the same typeface across websites because you have access to the full range of characteristics, it could still look quite different.

Drew: So I think there's a lot of reading to be done. I'm sure we'll add some links to the show notes of all the excellent articles you've written up and some references to these books and what have you. Because I think there's so much to learn. I think we've always got to be learning with these things. The learning never ends.

Jason: It's true. それは本当です。 That is something that I've enjoyed immensely when I started writing this newsletter. Every week when I'm writing it, I'm reading more of the specs. I'm reading more of what other people have discovered and written. There's tremendously knowledgeable folks out there. Rich Rutter, for instance, from Clearleft, wrote a fantastic book called Web Typography. He was one of the founders of Font Deck, which was one of the very first services to launch. He's always been kind of the most scholarly of authors about this stuff. I mean, he's really tremendously thoughtful in the way he puts those things together. But there's a bunch of people doing really interesting stuff. That has kind of forced me to kind of keep up with what other people are doing all the time, which is really fantastic.

Drew: Is there anything in particular that you've been learning lately?

Jason: The stuff that I've been learning the most is actually the corners of the specs. I think it's something that… I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she's always talking about like, “Well, if you actually read what's written here, there's actually really good stuff to know.” So in reading exactly what the specs are, there's a tremendous amount of great typographic control that is available to us. Then layering into that different things like mix blend modes and CSS and learning more about different size units and how they interact together and learning how to use and where you can use CSS custom properties. I keep reading little bits more and more and then kind of compare that to what the browsers are doing. It really has been a tremendous experience for me in what I've been learning every week. Even having been doing this stuff for 25 years, there's still like a new gem every time I dig into one of these things.

Drew: That's fantastic. ありがとう。 So if you dear listener would like to hear more from Jason or perhaps hire him to work with you on your web typographic challenges, you can follow him on Twitter where he's @jpamental, or find his website at rwt.io where you can also find the web typography newsletter to sign up to. So thanks for talking to us today, Jason. Do you have any parting words?

Jason: Yeah, experiment. I mean, there's lots of open source stuff to play with. I think once people get this in their hands and get familiar with it, that I think they'll start to see more and more how much fun they can have with this stuff and how much more expressive they can be. I think I was talking to the design director at The Wall Street Journal actually on Friday. I was then talking to their design team. We were talking about it's great that you have a design system that standardizes things, but it's then like any good design where you break that rule. That's where the exciting things really happen. So we've gotten this necessary evolution of like getting really good at the system. Now we've got to break it some. That's when we can get excited again. ルールを破る。 That's my best advice, I think.