フォント識別ブラウザ プラグインを使用して Web のテキストを詳しく調べる

インターネットは、その中心部から最も遠い周辺部まで、広大なテキストの世界です。

今朝、本を読みながらこの事実を思い出しました会話の記録私の編集者のアレクシスとピンタレストの共同創設者エヴァン・シャープの間で。

「これがインターネットの設計方法だ」とシャープ氏は語った。 「HTML は Web のアーキテクチャであり、テキストの表示に関するものです。これはハイパー テキスト マークアップ言語です...インターネット上のコードが行うものです。テキストをマークアップします。」

覚えておいてください: これは、最高にビジュアルなサイトである Pinterest の創設者によるものです。インターネットの文化に密接に織り込まれているすべての GIF、ビデオ、写真にとって、オンラインでの体験、つまり、ある場所から別の場所にどうやって移動するか、そこにいるときに何をしているかということは、主にテキスト構造によって形作られます。テキストは、Web サイトとのやり取りに目に見えない形でコード化されており、その上に重ねられて、どこにでも目に見える形で存在しています。しかし、私たちが目にしているテキスト、つまりあなたが今読んでいる単語でさえ、通常は意味が曖昧になっています。ほとんどの場合、コンテキストは美学よりも優先されます。たとえば、スキャンしているこれらの文字が 16 ポイントで書体 Georgia であるという事実にこだわっていなかったのかもしれません。 (つまり、通常の古いラップトップまたはデスクトップを使用している場合はそうです。)または、この記事の上部の見出しがジョージア太字で 34 ポイントであること。

これが、オンラインで目にしたフォントをマウスオーバーして識別できることに夢中になる理由の 1 つです。それがブラウザのプラグインですフォントフェイス忍者許可します。テキスト以外のページ上のすべてを非表示にできるボタンもあります。そのため、ニューヨーク・タイムズのチェルトナムの大胆な見出しのおなじみの曲線を満喫することができます。あるいは、American Apparel ウェブサイトのサンセリフ体、Helvetica Neue、Verdana、Arial ボールドの融合に驚嘆してください。または用途を比較するHelvetica Neue と Gotham Narrow の Twitter でご覧ください。

(1 つの制限: FontFace Ninja はテキストに対してのみ機能するため、ロゴなどのテキストの画像は応答を登録しません。そのような場合、次のようなサイトは、フォントとはスクリーンショットを受け入れ、謎のデザインを特定します。)

今日私は学びましたヴォックスの分厚いサンセリフの見出しが表示されるバルトボールド。 (ハリエットと呼ばれるセリフも使用されています。) 以下はバルトの例です。ヴォックスのウェブサイトより:

クレジット: Vox

The Verge は見出しに Adelle Regular と FF DIN Web と呼ばれるクレイジーなオールキャップの書体の両方を使用しています。 Mashable は Museo Slab Regular と相性が良く、Courier New の遠いいとこを思い出させます。 The Atlantic のホームページにアクセスすると、Times New Roman ボールド、Helvetica Neue、Arial の組み合わせが見つかります。 (そして、The Atlantic のロゴがあります。実際、これは去年少し修正しました。これは、凝縮された斜体の Bauer Bodoni をベースにしたカスタム フォントです。) FontFace Ninja のもう 1 つの優れた点は、表示されているフォントを通知するだけでなく、見つかったフォントをすべてテストできることです。プラグインをアクティブにして、興味のあるフォントの上にカーソルを置き、クリックします。 ブラウザ ウィンドウの上部には、同じスタイルで必要なものを入力できる領域があります。

これは、通常は目立たない書体のニュアンスの一部を明らかにするため、楽しいツールです。 FontFace Ninja を使用して、BuzzFeed の頼りになる Proxima Nova Semibold に自分の名前を入力すると、The Atlantic で記事の見出しに使用している、より球根状の Georgia ボールドと比較して、小文字の「r」の弧がいかに唐突に終わっているかがわかりました。 。

クレジット: バズフィード

クレジット: NPR

また、NPR の小文字の「r」は、ネットワークの象徴的なロゴ (Trebuchet の太字) と比較して、見出しに使用されるフォント (Gotham SSm の太字) とどのように異なるかに注目してください。

クレジット: アトランティック

(ああ、当然のことながら、FontFaceNinja は自社のサイトで Futura 風の Brandon Grotesque ボールドを使用しています。)

言葉の見え方や形について考え始めると、あなたの感じ方に影響を与える読んでいるものについては、止めるのが難しいです。少し立ち止まって周りを見回してください。文字はどこにでもあります。つまり、私たちはほぼ常に活字の選択肢に囲まれています。

英国のデザイン作家リック・ポイナーは、2007年のドキュメンタリーの中で、「私は皆、潜在意識に刺激を受けていると思います」と語っている。ヘルベチカ。 Helvetica が非常に人気があるのは、これが長い間発展してきたデザイン推論の集大成であるためだと理論化するグラフィック デザイナーもいます。

「おそらく、パッケージに特定のタイポグラフィーが使用されているのを見たときに感じる感情は、単に『その見た目が気に入っている。いい感じだ。これが私のタイプの製品だ』ということだろう」とポイナー氏は言う。 「しかし、それは秘密の魔法を唱えるタイプです。」

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe Now & Never Miss The Latest Tech Updates!

Enter your e-mail address and click the Subscribe button to receive great content and coupon codes for amazing discounts.

Don't Miss Out. Complete the subscription Now.