Webページのタイポグラフィを知る方法

タイポグラフィのウェブサイトを知っている

デザイナーとして、私たちはタイポグラフィの世界が大好きであり、それが私たちの出版物の多くがそれについて語っている理由です。 書体の裏話から勝利の組み合わせまで、私たちは話してきました。 今日は、Webページのフォントをどのように知っているかについてお話します。、他のクリエイティブの作品で参照を探すよりもインスピレーションを得るのに良い方法はないからです。

確かに、いくつかの機会に、あなたはさまざまなWebポータルにアクセスし、美学と活版印刷の選択があなたの注意を引きました。。 多くの出版物ですでに指摘しているように、タイポグラフィは私たちがデザイナーとして自分自身を表現するのに役立つ非常に強力な要素です。 目的に応じて、さまざまなWebサイトで見つけることができるフォントは無限にあり、それらはXNUMXつの活版印刷スタイルまたは別のスタイルを選択します。

Webページにアクセスするのは初めてでも最後でもありません。書体に惹かれ、個人の活版印刷カタログに追加するには、それがどの家族であるかを知る必要があると感じます。 この投稿では、 注目を集めているタイポグラフィを見つけられるように、いくつかの方法をお教えします。

検索オプション1:画像の使用

私たちがあなたに指摘する最初の方法は、 Webサイトにアクセスできない場合にのみ使用することをお勧めします。 フォントのスクリーンショットがある場合 これが注目されているので、正確なフォントでは発生しない可能性がありますが、同様のフォントが表示されます。 特定のブランドが使用している書体を知りたい場合は、画像またはベクター形式であることが理想的です。

アクセスする必要のあるオンラインプラットフォームはMyFontsであり、その名前は WhatTheFonts。 このツールは、探しているフォントを知る可能性を与える拡張機能です。。 あなたがしなければならないのはそのウェブサイトにキャプチャされた画像をアップロードすることです、そしてプログラムはあなたが分析したいテキストをあなたに尋ねます。 選択すると、スクリーンショットにあるものと同様のさまざまなフォントが表示されます。

Facebookのロゴの例を残します。 このプロセスは少し面倒であり、結果として正確なタイポグラフィが得られないことを考慮に入れています。 このツールは内部フォントライブラリによって制限されているためです。

Facebook検索

検索オプション2:ブラウザインスペクター

Webページのタイポグラフィを検索するこのXNUMX番目のオプションでは、 Webブラウザからインスペクタを使用することを選択しました。 このオプションは、設計者が最もよく使用するオプションのXNUMXつです。 グラフィックおよびWebデザイナー。 この場合、私たちはこのツールから多くのことを引き出すつもりですが、おそらくあなた方の何人かは知らなかったでしょう。

まず、異なるブラウザ、特にXNUMXつのブラウザを区別します。 一方では、ChromeやChromiumをベースにした他のブラウザがあり、他方ではFirefoxがあります。 指摘する、それ どちらのブラウザを使用する場合でも、インスペクタにアクセスするには常に同じショートカットCtrl + Shift+Iを使用します。

Chromeを使用している場合インスペクターオプションを開くと、XNUMXつの異なるパネルが表示されます。 使用されているフォントを知るには、Webで使用されているテキストを検索する必要があります。 表示されるXNUMX番目のパネルで、検索して 「計算済み」オプションを選択します。 次に、「フォント–ファミリ」を検索します ご覧のとおり、タイポグラフィファミリの名前がその横に表示されます。

次の画像では、今お伝えしたこの情報がどのように表示されるかを示しています。 使用した書体のデータに加えて、サイズ、色、重さなどの重要なデータが表示されます。

グーグルチェッカー

さらに、 Mozilla Firefoxブラウザーを使用する場合、プロセスはChromeで見たプロセスと似ています。、変更されるのは、探している情報が別の領域に表示されることだけです。 このブラウザには、Webサイトに表示されるフォントスタイル用の特定のタブがあります。

前の場合と同様に、前述したのと同じショートカットでインスペクターを開くと、XNUMXつの異なるパネルが表示されます。 「書体」という名前のタブがあるものに移動する必要があります、その名前が示すように、そこにはすべての必要なデータがあります。 「ページ上のすべてのフォント」というセクションがあり、すべてのフォントのリストが表示されます。

Firefoxの検索

この場合、 メーターを使用してさまざまなタイポグラフィパラメータを変更することも可能です。 これにより、タイポグラフィが変更された場合にどのように見えるか、どのように異なるかを体験する機会が得られます。

検索オプション3:プラグインを使用する

私たちがあなたにもたらす最後のオプションは、短期間知られている方法であり、それは非常に最近であるため、おそらく最も使用されていない方法です。 これは、ブラウザプラグインを使用したWebフォントの検索オプションです。

ニーズに対応するために、デバイスに追加して特定のタスクを実行するプラグインは数千あります。 このオプションは、そのシンプルさのおかげであなたのお気に入りのXNUMXつになるはずです。 Fontface Ninja、WhatTheFonts、またはVisbugをお勧めします。

選択したプラグインをブラウザにインストールしたら、 アイコンをクリックするだけで、オプションのメニューがすぐに表示されます 画面の左側にあります。 このメニューのXNUMX番目のアイコンをクリックすると、分析するテキストの領域にマウスカーソルを合わせるだけで、そのフォントに関する情報ボックスが自動的に表示されます。

プラグインを検索

このオプションでは、前のXNUMXつで起こったように、 フォントの色、太さ、線のサイズなどのデータも表示されます。 タイポグラフィの世界が好きで、どのフォントが注目されているのかを数秒で知りたい方にとても便利なツールです。

この出版物では、Webページで使用されている書体を見つけるためのXNUMXつの非常に単純な検索オプションがあることがわかりました。 自分に最適で、快適に作業できるオプションを選択するだけです。 多くの場合、これらの検索ツールは作業負荷を軽減し、魅力的なデザインを作成するのに役立ちます。


記事の内容は、次の原則に準拠しています。 編集倫理。 エラーを報告するには、 ここで.

コメントを最初に

コメントを残す

あなたのメールアドレスが公開されることはありません。 必須フィールドには付いています *

*

*

  1. データの責任者:MiguelÁngelGatón
  2. データの目的:SPAMの制御、コメント管理。
  3. 正当化:あなたの同意
  4. データの伝達:法的義務がある場合を除き、データが第三者に伝達されることはありません。
  5. データストレージ:Occentus Networks(EU)がホストするデータベース
  6. 権利:いつでも情報を制限、回復、削除できます。