ウェブ上のタイポグラフィ。 FrontTalks 2018でのYandexレクチャー

講義の短い休憩の後、新年のスプリントを開始します。 1年前と同様、Yandexがエカテリンブルクで開催した大規模なFrontTalks会議の資料のみで構成されます。 Yandex.Marketの開発者であるAnton Kastritskyによるスピーチから始めましょう。 アントンは、例によって、どのインターフェースがどのように構築されているかを示し、最新のWebアプリケーションのコンテキストでのテキスト、そのデザイン、アクセシビリティ、およびパフォーマンスについても話しました。





-私の名前はアントンです。Yandex.Marketパートナーインターフェースチームのインターフェース開発者として働いています。 今日はウェブでタイポグラフィについてお話したいと思います。



その前に、このトピックが私にとって身近で興味深いものであることがどのように判明したかについての短い話をしたいと思います。



誰もがテキスト、フォント、Web上での表示方法を理解しているとは限らないという事実について考えたことがあります。 そして、おそらく私がそれについて考えたのは、私がYandexに乗りたいと思ったときだったかもしれません。 インタビューを受け、レイアウトのセクションがありました。 私はレイアウトが大好きで、複雑なものは何もありません。好きです。 コンポーネントを構成する必要がありました、私はすべて、素晴らしいことをしました。 割り当ての説明には、フォントを設定する必要があると書かれていました。Arial、Helveticaがありました。 まあ問題ありません、私はHelvetica、Arial、sans-serifを書きました。 すべてがそうあるべきです。 しかし、インタビュアーは同意しなかった、私は間違って書いたと言った。 それは私を混乱させました。Yandexは大企業だと思いました。おそらく彼らは私に多くを期待しています。 システムフォントとは何か、安全なフォントとは何かを知ってください。 それらがどのように機能し、なぜすべてをそのまま書き留めたのかを説明しました。



インタビュアーはすぐに私に同意しませんでしたが、結果として、Helvetica、Arialを書くべきであり、その逆もそうではないことを理解するようになりました。 だから私はYandexに着いた。 私はインタビューを始め、この問題を発見し、修正しました。 仕事に来てください



タイポグラフィに移る前に、テキストとは何かについて話しましょう。

テキスト

テキストは、ユーザーに次のアクションについて何かを伝えるのに役立つツールです。 インターネット上のコンテンツの大部分はテキストです。 現在、InstagramやYouTubeなどのサービスが普及しているにもかかわらず、人々は多くのマルチメディアコンテンツを消費し、テキストはインターネット上の巨大なスペースを占有し、今でも人々はそれを読んでいます。 これは非常に重要です。



コピーライターまたはライターがいる企業で働いているのは誰ですか？ ほぼ半分。 そして、誰がアプリケーション自体のテキストを思いついたのでしょうか？ また半分。



時々、デザイナーがデザインをあなたに与えたので、あなたがそれを始めました。 しかし、いくつかの予期せぬ状況があったため、テキストを自分で考えなければなりません。 ほとんどすべてがすごい。 そのような状況では、それは恥ずべきことです。 開発者は会社でのコピーライターの役割を過小評価し、それらを軽andして何らかの形で提示するという印象を受けました。







オフィスに座って非常に巧みに仕事をシミュレートする芸術家のほんの一団。 これは実際にはそうではありません。



コピーライター-この預言者のように、開発者の女の子に実際にどうあるべきかを見せようとし、彼女は彼を無視しようと最善を尽くします。







コピーライターの役割は非常に重要です。 製品に直接影響を与え、より調和のとれたソリューション、相互作用、メカニズムを提供できます。 ページのテキストを読んだ人は、製品をまったく異なる方法で認識することができます。 彼らの役割は本当に非常に重要であり、彼らは常に耳を傾けるべきであり、この預言者が彼女に放送していることに注意を払わずに仕事をしようとするこの少女のようではありません。 コピーライターの話を聞いて、気軽に質問してください。



書くことだけでなく、一般的に書くことも非常に重要です。 実生活の例を示したい。 ユーザーが電話番号を追加する必要があるコンポーネントがありました。







設定のある巨大なページで、すべてが通常通りです。 ラベル、番号、追加ボタンがあり、ユーザーがそれをクリックすると、電話入力が表示されました。







電話番号を正常に入力したら、グレーのチェックマークをクリックして保存する必要がありました。







UXテストの実施を開始したとき、電話番号を保存するために灰色のボタンをクリックする必要があると非常に少数のユーザーが推測することさえありました。 私たちは何をしましたか？ ユーザーが電話番号を正常に入力した後、チェックマークを黄色で塗りつぶして、ユーザーが保存できるようにしました。







UXテストを繰り返し実施しました。 もう少し多くの人が電話番号を保存する方法を見つけました。



現時点では、ユーザーはインターフェースとのやり取りに問題を抱えているように見えるかもしれません。







しかし実際には、問題はユーザーにあるのではなく、私たちにあるのです。なぜなら、私たちはユーザーに何を望むかを明確に伝えることができなかったからです。 したがって、今日、このコンポーネントは少し異なって見えます。すべてがボタンをクリックすることもありますが、明示的な「キャンセル」ボタンと「保存」ボタンを備えたポップアップがあります。











電話番号の入力に成功すると、「保存」ボタンが点灯し、ユーザーは自分で電話番号を保存するかどうかを個別に決定できます。 彼がポップアップの外側をクリックすると、ポップアップは消え、彼はまだ番号を追加していません。



これから結論づけることができます：明白なことを書くことを恐れないでください。 開発者はインターネット上で膨大な時間を費やし、同じことを行うためのさまざまなGUIオプションを見ています。 しかし、すべてのユーザーがこの経験を持っているわけではありません。 それでは、ユーザーが自分で簡単に理解できるように、よりシンプルで直感的なインターフェースを作成しましょう。

ディスプレイ

一般的なマッピングについて話しましょう。 すべての表示ルールが印刷物から来たと推測するのは簡単です。



私が開発者であることを置き換えることが重要であり、それを美しく行うことはできません。 私はそれを機能させることができ、すべてがうまくいくと、生産的に機能しました。 したがって、セリフやさまざまな種類のフォントについては説明しません。 後でします。



インターネットには、ユーザーが何かを読むためだけにアクセスするテキストコンテンツやサービスがたくさんあります。

_{^{スライドからのリンク}}

最も便利なサービスの1つはMediumであるように思えます。 誰もが彼を知っており、彼らが入って来て、特にフロントエンドのトピックに関するニュースを読んでいると思います。 このサービスは本当に読みやすいコンテンツを提供します。 しかし、私たち全員が使用した反例を挙げます。

_{^{スライドからのリンク}}

ウィキペディアを訪れて喜んで何かを読む人は一人も知りません。 これは読みやすいオプションではないようですが、これは2つまたは3つのルールに従うだけで修正できます。



1つ目は、1行に約10語を含めることです。







テキストコンテンツの幅を約80文字に制限する必要があります。 このルールはリンターの設定に似ている場合があります。コードの表示、コード自体、およびサイト上のテキストは、コンピューターではなく人が簡単に認識できるように記述されているためです。







2番目は行間隔です。 線が互いに近すぎる場合、ユーザーはすでにこの認識に問題を抱え始めています。







そして、知覚を容易にするために、フォントを少し大きくします。 現在、ウィキペディアは、すでに顕著に認識しやすい形をとっています。











また、画面スペースが非常に重要な場合は、ハイフンを追加できます。











これはロシア語のテキストでは常に正しく機能するとは限りませんが、数行を節約するのに役立ちます。



ロシア語には多くのスペル規則があることを忘れないでください。 垂れ幕のようなものを取り除く必要があり、必要に応じて大きなハイフンがあることを確認する必要があります。 Typographerなどのツールがこれを支援します。 テキストを実行するだけです。



静的テキストがある場合は、アプリケーションをビルドするときにbabelプラグインを追加して変換できます。 テキストが外部ストレージに保存されている場合、このようなnpmパッケージは便利です。クライアントに送信する前にテキストを変換するために使用できます。

Webフォント

Web上で異なるフォントを使用できるようになったのはどうしてですか？



大人の開発者は、ページ上のテキストの外観を何らかの方法で変換したい場合、長い間、別の画像を追加しなければならなかったことを思い出すかもしれません。 その後、フォントタグを取得しました。 今日、font-familyプロパティを使用します。このプロパティでは、フォント自体を適用したい順にリストします。 突然ブラウザが見つからず、認識しない場合は、このリストをさらに進めて次を使用します。







現在、テキストの表示を変換するための多数のプロパティがあります。







そして、私は助けることができませんが、可変フォントなどのことを言及します。

_{^{スライドからのリンク}}

これにより、インターフェイスの表示をさらに変換できます。 現在、サポートはすでに十分です。

_{^{スライドからのリンク}}

過去2〜3年にわたって、このテクノロジーに関する膨大な量の情報がインターネット上に書き込まれてきましたが、今はそれらについては触れません。

フォント

フォントがたくさんあります。 しかし、エンジニアリングの観点からアプローチし、それらをいくつかのタイプに分割したかったのです。







それだけでなく、仕様を読んだ誰もが、システムフォントがOSにプリインストールされていることを知っていると思います。 ユーザーが個別にインストールしたインストール済みフォントがあります。 ダウンロード可能なフォントやWebフォントだけでなく、ユーザーがアプリケーションにアクセスしてダウンロードするのはこれだけです。



安全なフォントについて言及するしかありません。 私たちがそれらを持っていることがどうして分かったのですか？ 以前は、ユーザーがこれまたはそのフォントを持っていることを期待できなかったため、2000年代の初めに、Microsoftは過去10年の初めからすべてのシステムに存在する6つのフォントのリストを提供し、開発者はそれらを明確な良心を持って使用できましたこれらのフォントは既にユーザーに存在しているため、追加のリクエストを送信する必要はありません。







そして、ここで同じArialが表示されます。 今後：HelveticaがmacOSのシステムフォントであることを既に知っている人がいますが、それは長年にわたって存在しています。 したがって、冒頭で述べた話では、HelveticaとArialを記録する必要があり、その逆は記録しないと述べました。



その後、私はさまざまなリソースでこの記録に多く気づき、それがどこから来たのか、どうして人々がそのような基本的な間違いを犯すことができるのかを知りました。 結局、CSSの学習を始めたばかりのときに学習します。



w3schoolsのようなかなり尊敬されているリソースからのものであり、バグレポートを送信したことに気付いたとき、私は非常に驚きましたが、まだ修正していません。

_{^{スライドからのリンク}}

フォントに戻りましょう。 フォントを接続するにはどうすればよいですか？ CSSとJavaScriptがあります。







カスタムのフォントフェースを宣言し、ブラウザが知っている最初のフォーマットを選択してダウンロードするいくつかのフォーマットを指定できます。

-WOFF2は、最新のすべてのブラウザーで圧縮およびサポートされています。

-WOFFは少し悪くなりますが、優れたサポートがあります。

-EOTは古いIE専用です。 -TTF、それも良いサポートがあり、それをダウンロードすることで、OSにインストールできます。

-非推奨のSVGは、現在のところ1つまたは2つのブラウザーでのみサポートされています。



また、ローカルなどのクールなCSS機能もあり、その助けにより、ユーザーのOSにフォントが存在するかどうかを確認できます。 しかし、あなたは本当に彼女に頼る必要はありません。 フォントの名前が同じであっても、同じフォントであることを意味するわけではありません。 したがって、使用する場合は注意してください。







フォントを発表した後、ブラウザがダウンロードに失敗した場合に備えて、いくつかのフォールバックを指定することを忘れないでください。



フォントのUnicode範囲を指定できることを多くの人が知っていると思います。フォントがダウンロードされた後、指定された文字にのみ使用されます。 たとえば、このフォントで英語のテキストのみ、または数字のみなどを表示したい場合。







また、ユーザーに送信するトラフィックを大幅に削減できます。







上記では、フォントを2つの個別のファイルに分割できます。1つはラテン文字のみ、もう1つはキリル文字です。 これらが単一のフォントの一部であることをブラウザが理解できるように、同じフォントファミリ名を付けました。 これで、ページにキリル文字のみがある場合、ユーザーは2番目のファイルのみをダウンロードするため、ユーザーがダウンロードするトラフィックが減少します。



その結果、サブセット化を行うことはそれほど難しくありません。このためのGUIツールとCLIツールの両方があり、それらを見つけて対処することは難しくありません。

_{^{スライドからのリンク： first 、 second 、 third 、 fourth}}

今日のサポートはかなり良好です。 恥ずかしがらずに使用してください。

_{^{スライドからのリンク}}

「7回測定-1回安息」という偉大なことわざを忘れないでください。さもないと、かなり不快な状況に陥ることがあります。

_{^{スライドからのリンク}}

JSを使用してフォントをダウンロードすることもできます。これにはFontFace APIがあり、かなり似ています。







新しいフォントを宣言してロードし、非同期でロードします。 ロードした後、ページに追加できます。



一見したところ、この方法は、フォントサービスに関与していない限り、役に立たないように見えるかもしれません。 しかし、レポートの終わりまでに、気が変わるかもしれません。



さて、私たちにはサービスがあり、それにいくつかのフォントを追加しました。 そして、ユーザーは私たちのページに来て、そのような写真に会います。







どうして起こったの？ HTMLが到着し、スタイルが読み込まれ、フォントがまだ到着していないため、ブラウザの動作はさまざまです。 一部のブラウザはテキストのレンダリングをブロックしますが、テキストがないように見えますが、実際にはブラウザは独自の透明フォントでテキストを描画します。これは、ページがテキストを占めるスペースをすべて知る必要があるため、すべてのインデントが類似しているためです。 フォントがロードされると、テキストがフォントで再描画され、ブラウザに表示されます。



このような場合のブラウザの動作を統一できれば素晴らしいと思います。 実際、一部のブラウザーはテキストを透明フォントでレンダリングできますが、他のブラウザーは折り畳まれたフォントでレンダリングできます。 このため、コードは1行だけです。

_{^{スライドからのリンク}}

基本的には、ブロックまたはスワップのみがこれに役立ちます。 ブロックは、ブラウザを待機させ、透明なフォントでページ上のコンテンツをレンダリングします。これは、見た目がまったくない非常に美しいカスタムフォントがある可能性があるためです。 したがって、ユーザーにテキストが表示されないように、ユーザーを待機させます。 永久に待機することはなく、わずか3秒で、その後は次のフォントを使用し、到着するまで完全な無限を待ちます。



または、ブラウザがすぐに次の折りたたまれたフォントを取得し、それを使用してコンテンツを描画し、フォントが到着するまで無限の時間待機するときにスワップします。

_{^{スライドからのリンク}}

現在、サポートは非​​常に良好です。これは既に使用できます。 結局、CSSはJSではありません。突然ブラウザーが何かを理解しない場合、大丈夫です。このルールを無視して先に進みます。 そのような場合、以前と同じ動作をします。



素晴らしい、私たちはブラウザを促しました、今ではほとんどすべての非レガシーブラウザで同じ振る舞いをしています。



しかし、問題自体は解決しませんでした。 フォントがこんなに長くなったのはどうしてですか？ 昔、私がまだYandexで働いていなかったとき、私は少し上陸しましたが、特別なことはしませんでしたが、たくさんの写真とちょっとしたスタイルを作りました。







フォントが文字通り6-7秒で到着するという問題に遭遇しましたが、これはネットワークを高速3Gに調整するだけでしたが、最初のレンダリングは既に2.5秒間どこかに表示されており、ユーザーは単に空白のページを見ました。



青いHTMLが上部にロードされ、紫色のスタイルが適用されます。 そして、私たちのフォントはどこにありますか？







彼がいる。 どうして起こったの？ スタイルの最初にフォントを宣言した場合でも、ブラウザはすべてのCSSをダウンロードし、完全に解析し、このフォントで描画する必要があるページにテキストがあることを確認した後にのみ、リクエストを送信します。



ブラウザに伝えることができれば素晴らしいと思います。聞いてください。私は間違いなくこのフォントを使用し、今すぐダウンロードします。

_{^{スライドからのリンク}}

だからできる。 これはフォントの読み込みと呼ばれます。 スタイルのリクエストを送信する前であっても、この特定のフォントをダウンロードしてリクエストを送信する必要があることをブラウザに1行で伝えることができます。 現在、リクエストのウォーターフォールは異なっています。







正しいフォントのテキストは、他のすべてのコンテンツとともに約3秒間表示されます。 これによりサイトの速度は上がりませんが、ユーザーはすぐにこのコンテンツのナビゲートを開始できます。 そしてそれは良いことです。

_{^{スライドからのリンク}}

リンクのプリロードはかなり新しいブラウザーでのみ機能し、主にwoff2で使用する価値があります。 リクエストは常に送信されるためです。



プリロードのもう1つの優れた方法：ブラウザーが理解するファイルを1つだけ指定する必要があります。 MDNでそれについて読み始めると、似たようなものが表示されます。

_{^{スライドからのリンク}}

これは、ブラウザーが1つだけを使用している場合でも、各形式のフォントに対する多くの要求を送信する方法であるため、実行する価値はありません。 IE専用のeot形式をここに追加したのはなぜですか。IEは開発されておらず、Microsoftでもサポートされていません。 彼らが私たちにこれを伝えることはまずありません。



同様のコードはそう見えるはずです。







おそらく、アプリケーションを初期化するときに完了する必要がある他のタスクがありますか？ たとえば、ページが読み込まれたときに測定する必要がある重要なメトリックで、すぐにフォントのリクエストを送信するのではなく、他のアセットをダウンロードする必要があります。



これには別のアプローチがあります-フォントを置き換える。 結局、JSでフォントを読み込むことができ、フォントが読み込まれた後、テキストを表示する必要のあるフォントを記述するクラスをページに追加するだけです。







しかし、ここで問題に直面します。 フォントはすべて異なり、文字間隔や単語間の間隔が異なる場合があります。 この問題も解決するとよいでしょう。 これを行うには、フォントスタイルマッチャーを使用します。これにより、あるフォントを別のフォントにオーバーレイし、異なるCSSプロパティで少し遊んで、可能な限り同じように表示されることを確認し、デフォルトのフォント動作をコピーして、その後確認することができます、カスタムフォントを読み込むと、ページのコンテンツが「ジャンプ」しなくなります。

_{^{スライドからのリンク}}

Webフォントは本当に必要ですか？ ユーザーにとって、どのフォントを使用するかはそれほど重要ではないでしょう。



この質問に答えるには、3つの小さな質問に答える必要があります。 フォントは私たちのブランドの一部ですか？ もちろん、Yandexでは、はい、Yandex Sansを拒否することはできません。 おそらくあなたの会社ではこれは異なった働きをします。 おそらく、カスタムフォントを使用すると、ページ上のテキストを読みやすくなりますか？ または、すべてのデバイスで1つのフォントを使用したいだけですか？



これらの質問に対するすべての答えが「いいえ」である場合、Webフォントを拒否する可能性が最も高くなります。 安全なフォントには欠点が1つしかなく、あまり魅力的ではありません。 それについて何ができますか？ 解決策があり、これらはシステムフォントです。 各ボックスには、すぐに使えるすばらしいフォントがあり、それらを使用できます。

_{^{スライドからのリンク}}

ブラウザがデフォルトでシステムフォントの使用を開始するsystem-uiのような大きな価値がありますが、まだステージ2にあり、サポートが不十分であり、Windows上のすべてを壊しますので、お待ちください。







大丈夫です。システムにあるネイティブフォントとまったく同じものをリストできます。 1つのブラウザがそうでない場合、さらに進んで、そのブラウザを見つけます。 これはかなり人気のあるパターンで、github、Twitter、Mediumなどの有名なサービスで使用されています。 また、これは面白くて便利かもしれません。







また、私がリストしたサービスは、最初にブートストラップを書いた人が働いていたサービスです。 それはとても起こりました。



この会議でアクセシビリティのようなことについて多くの人が話してくれたことを非常に嬉しく思います。そして、それを大事にする必要があるのは素晴らしいことです。これは開発者とデザイナーの間で共有される作品です。



しかし、視覚障害者はどうでしょうか？ 誰かが色をそれほどうまく区別していないのか、それとも見苦しいのでしょうか？

_{^{スライドからのリンク}}

インターネットがあらゆる種類のコントラストチェッカーで一杯になっていることを誰もが発見しないことを願っています。コントラストチェッカーを使用すると、ページ上でテキストがどれだけ簡単に読めるかがわかります。 私たちは開発者です。毎回他のサイトに行って手動で確認したくないので、自動化するのは素晴らしいことです。



はい、これにはaxとpa11yのアクセシビリティテストランナーがあり、これらをビルドまたはCIチェックに追加できます。 どちらもスクリーンリーダーに適しています。 pa11yは、対照的に説明することもできます。



かつて、デザイナーからページに小さなダイを追加するように頼まれました。 誰がそれを好きで、誰がそれを読みやすいと思いますか？ いくつかの手があります。







私はそれがどのように起こったのか本当に理解していなかったので、それを理解することにしました。 最近、開発ツールでカラーピッカーを開くと、Chromiumブラウザに新しい行が表示されます-コントラスト。















開くことができ、理解できる弧が表示されます。ブラウザは、フォントがレンダリングされる背景と色を教えてくれます。 また、円弧の下にある色をドロップして選択すると、さまざまな色の円弧が表示されます。ここでは、2つの緑色のチェックマークが下に表示され、ブラウザから読みやすいことがわかります。











視覚的には、すべてはそれほど変化していませんが、おそらくそれについてデザイナーと話し、視覚障害のある人でも読みやすいテキストにする必要があります。



フォントを扱う際の悪い習慣に言及するしかありません。







5年前、localStorageにフォントを保存できる多くの人気記事がありました。ページが読み込まれ、そこからフォントが取得されます。 人々がこのことをどう考えたのかは、私にとって大きな秘密です。 実際、いずれにせよ、あなたが最初にサイトにアクセスしたとき、そこにフォントはありません。ユーザーはそれをダウンロードする必要があります。



これが悪い考えであるもう1つの理由：まず、localStorageはこれを目的としていませんでした。通常のキーと値のストレージですが、さらに悪いことに同期です。 そこから何かを読んでいる間、ブラウザは何もできないので、スレッドを詰まらせてフォントをそこに入れないようにしましょう。



別のアプローチはインラインフォントです。 これは、ページのHTMLコードの先頭にフォントを埋め込むときです。 キャッシュされていないため、これは重要なポイントです。 ただし、サービスの直帰率が高い場合、これが役立つ可能性があります。 たとえば、葬儀場用のアプリケーションを開発している-人々が年に1回以上そこに行くとは思わない。



疑問に思われるもう1つの方法は、アイコンフォントです。 奇妙な状況：人々はアイコンフォントを使用し、200キロバイトを数百の異なるアイコンでダウンロードしますが、サイトでは5つしか使用しません。 すでにこれに近づいている場合は、おそらくサブネット化し、余分な部分をすべて削除する必要があります。 しかし、デザイナーはあなたに来て、1つのアイコンを変更するように頼みます-あなたはsvgが長い間どこでもサポートされていましたが、フォント全体を再生成する必要があり、ユーザーはそれを再度完全にダウンロードする必要があります。 これは、このアプローチに最適なテクノロジーのようです。 svgを使用すると、CSSハンドルを使用してアイコンの個々の部分に移動し、選択的に色付けまたはアニメーション化することもできます。



そして最も奇妙なことは、私もそれを追加する必要がありました。 ロゴのフォント。 ページにロゴを表示するためだけに、別のフォントをダウンロードする人がまだいます。 再び-svg。







コピーライターの話を聞いてみてください。 彼らは、あなたと同じように、最高の製品を作ることに興味があります。 したがって、最終製品はコラボレーションの結果です。つまり、私たちとコピーライター、デザイナー、マネージャーです。 一緒に働きましょう。



明らかなことを書くことを恐れないでください。すべてのユーザーが私たちほど熟練しているわけではありません。テキストの読みやすさを確認してください。これはあなたとデザイナーの間で共有される作品です。そして、あなたのデザイナーがこれに従わないなら、おそらくあなたに彼にそれを思い出させるべきです。



おそらく、カスタムフォントをオプトアウトし、トラフィックを減らし、サイトでのコンテンツの表示を高速化できます。しかし、突然できない場合は、フォントの読み込みや置換などのオプションを見てください。よろしくお願いします！