Web ページ上のフォントの種類が、Web サイト全体に個性を与える最も重要な要素の 1 つであることは明らかです。付随する画像、使用される色、ロゴ、および一般にその他の美的または装飾的な要素など、他のパラメータもあります。
広告の専門家は、読者に感情を伝える際にタイポグラフィーが重要であることをよく知っています。製品の販売に関しては、何も偶然に任せることはできません。ましてや、公式ウェブサイトの製品に添えられたコピーに使用されているタイポグラフィなどはなおさらです。個人ブログの場合は、自分のスタイルを実現しながら、同時に読者の目が疲れない読みやすさを維持することも重要です。マドリッドにある TAI 大学芸術学部には、最も一般的なフォントの主な特徴と、それらがどのように異なるかを説明した記事があります。
テキストは通常、Web サイト上で最も多くのコンテンツを提供する部分であり、画像やビデオの許可が必要です。魅力的で読みやすいフォントも不可欠です。したがって、Google Fonts、DaFont、または 1001 Fonts からダウンロードするために特定の Web サイトで使用されているフォントを知る必要がある場合、または単に興味がある場合、それを識別する方法がいくつかあります。
ブラウザからフォントを検査する
閲覧している Web サイトのソースを知る最も簡単な方法は、ブラウザインスペクタを使用することです。このツールは、ブラウザーによって「翻訳」され、私たちが見ているとおりのページを表示する Web サイトに使用されるコードを表示します。
グーグルクローム
Google Chrome でブラウジングしている場合、インスペクターを開くには 3 つの方法があります。
- トップ メニューから: [表示] をクリックして [開発者向けオプション] を開き、[要素の検査] をクリックします。
- Web サイト内でCTRL キーを押します。 Windows では+ SHIFT + I 、macOS ではALT + CMD + C を押します。
- テキスト上で右クリックし、 「検査」をクリックします。
開くと、 Chrome 画面が 2 つに分割されていることがわかります。左側には引き続き Web サイトが表示され、右側にはそのすべてのコードが表示されます。 Web サイトのさまざまな要素の上にマウス カーソルを移動するだけで、インスペクターに HTML および CSS コードのすべての情報が表示されます。
以前のバージョンでは、各セクションの出典の名前を見つけるには、テキストに「飛び込む」必要がありました。画面上のテキスト自体の上に直接表示されるので、はるかに簡単になりました。この場合、記事の本文は Montserrat で編集され、サイズは 16 ピクセルです。
右マージンにある関連記事のタイトルの上にマウス カーソルを置くと、フォントの種類がどのように変化するかがわかります (この場合はサイズが 20 ピクセルに変わります)。
サファリ
Apple Web ブラウザのユーザーは、Chrome で行うのと同様の他の 3 つの方法でElement Inspector にアクセスできます。
- 次のパスに従ってトップメニューに移動します: 「開発」/「Web インスペクターを表示」。
- Alt キーを押します。 +CMD。キーボードの+ I (macOS)。
- Web サイトのテキストをマウスの右ボタンでクリックし、 「要素の検査」をクリックします。
この場合、Safari のインスペクターは Chrome ほど直感的ではありません。画面も 2 つに分割され、左側に Web サイト、右側にインスペクターが表示されますが、テキストの上にマウスを移動してもソースは直接表示されません。
したがって、コードを直接分析する代わりに、インスペクターの上部メニューにある「ソース」ボタンをクリックします。これにより、左側にサイド メニューが表示され、[フォント] が表示され、Web サイトで使用されているフォントが表示されます。
マイクロソフトエッジ
Microsoft Edge は、Google Chrome や Safari に次いで最もよく使用されるナビゲーション ツールの 1 つです。このブラウザは時間の経過とともに更新され、Windows ユーザーに広く受け入れられてきました。現在では、Edge がより最適化され、Copilot と呼ばれる人工知能が統合されているため、一部のユーザーはデフォルトで Edge を使用することを選択しています。それはともかく、Google Chrome と同様の非常に簡単な手順をいくつか実行するだけで、Web サイトで見つかったフォントの種類を知ることができます。
Microsoft Edge ブラウザを開いて Web ページにアクセスするときは、次の手順を実行して、どのフォントが使用されているかを確認する必要があります。
- Web ポータルを開きます。
- 画面上の任意の場所でマウス ボタンを右クリックします。
- 「検査」をクリックします。
- 「検査」メニューまで下にスクロールし、 「スタイル」タブを選択します。
- フィルター検索バーに「font」という単語を書き込みます。
- 次に、 font-familyコマンドを実行すると、その Web サイトで使用されているフォントが表示されます。
この検査メニューはDevToolsとして知られており、ソース ファイルを編集したりプロジェクトを作成したりできる Web 開発者オプションを備えています。フォントに関する情報に加えて、太さ、色、サイズ、幅などの他の種類のデータも見つけることができます。
マウスを使用せずに「検査」メニューを開くもう 1 つの方法は、 SHIFT + F10キーの組み合わせを使用することです。したがって、マウスの右ボタンをクリックした場合と同じコンテキスト メニューが開きます。ただし、開発画面に直接移動したい場合は、このCTRL の組み合わせを押す必要があります。 Windows コンピュータを使用している場合は+ SHIFT + I 、Mac を使用している場合はCommand+Option+Iを押します。
モジラ Firefox
Firefox Inspector は、次の3 つの方法でも呼び出すことができます。
- トップメニューから[ツール] / [ブラウザ ツール] / [Web 開発者ツール] をクリックします。
- ショートカットCTRL を使用します。 +シフト。 Windows では+ C 、macOS ではALT + CMD + I を押します。
- マウスを右クリックして「検査」をクリックします。
この場合、インスペクタはブラウザ画面の下部に 3 つのセクションで表示されます。すべてのタイポグラフィ情報を表示するには、右側の列の「タイポグラフィ」ボタンをクリックする必要があります。
オペラ
Opera は、他の Web ブラウザーとあまり変わりませんが、代替デザインの Web ブラウザーです。要素インスペクターには次のようにアクセスします。
- 上部のメニュー バーで[作成者]をクリックし、次に[開発者ツール]をクリックします。
- キーボードの CTRL キーを押します。 +シフト。 Windows の場合は+ I 、macOS の場合はALT + CMD + Iです。
- マウスの右ボタンで要素を検査します。
Opera ウィンドウの右半分にインスペクターが開きます。フォントに関連する情報を表示するには、 「スタイル」セクションの下部にあるフィルターバーに「FONT」と入力します。このようにして、Web サイト上のフォントに関連するすべての情報が強調表示されます。
ブラウザ拡張機能を使用する
これらのアプリケーションは、タスクをより高速に実行し、追加の機能を追加することで、いくつかのタスクを容易にします。
フォントとは
これは、 Web サイトで使用されているフォントを知るプロセスを容易にする拡張機能です。頻繁に見る必要がないものであれば、上で説明したように Web ブラウザのインスペクタを使用できます。
ただし、専門的な理由や好奇心のため、ナビゲーションに表示されているフォントを知りたい場合は、拡張機能のアイコンをクリックして (インストール後) 拡張機能をアクティブにするだけで、マウス カーソルをテキスト上に置くとフォントが画面に表示されます。唯一の欠点は、歌詞情報が表示されるフローティング ウィンドウが気にならないように、使用するたびに無効化する必要があることです。
フォントの名前だけを知りたい場合は、前の手順と同様に、WhatFont アイコンをクリックし、クリックせずに文字の上にマウスを置くだけです。フォントの名前だけが記載された小さなボックスが表示されます。それに伴い、次のような考慮事項があります。
- これは非常に簡単に使用できるツールであり、複雑なことはありません。
- Web ページ上のフォントはわかりますが、画像上ではわかりません。
- Web デザインに専念している場合、これはブラウザーに欠かすことのできない拡張機能の 1 つです。
- 無料です。
Google ChromeとSafariの両方で利用できます。
フォンタネッロ
Web ページのフォントを識別するために最もよく使用されるもう 1 つの拡張機能。この拡張機能をインストールすると、Google Chrome と Mozilla Firefox で使用できるようになります。
出典を調べたい選択したテキストを右クリックするだけです。 2 番目のメニューには Fontanello というドロップダウン メニューがあることがわかります。これを表示すると、フォントの名前、そのスタイル (細字、標準字、太字など)、サイズと色、16 進コードが表示されます。
WhatFont ほど視覚的な美しさはありませんが、侵襲性が低いことは事実であり、拡張機能を有効にしたり無効にしたりする必要はありません。
フォントファインダー
この拡張機能は当初 Firefox 用に作成されましたが、現在は Chrome でも見つかります。その操作は非常に簡単です。この拡張機能をブラウザにインストールしたら、アイコンをクリックするだけで有効になります。次に、Web サイトからタイポグラフィに興味のあるテキストを選択するだけです。クリックすると、ウィンドウが開き、そのフォントの特徴に関する詳細情報が表示されます。つまり、色、タイポグラフィー、装飾、間隔の種類、およびその他の関連する特殊性です。
同様に、Font Finder のおかげで、行の高さ、垂直方向の配置、文字と単語の間の間隔、インデント、配置、フォントのバリエーションなどのいくつかの側面を見つけることができます。そのため、これは、特に Web ページのフォントを操作する場合に、かなり正確で具体的なツールとなります。このツールはデザイナー、タイポグラファー、開発者向けに作成されましたが、どのユーザーでも (予備知識に関係なく) 簡単に使用できます。
ただし、この拡張機能は画像内のフォントを検出しないことに注意することが重要です。したがって、特定の写真やデザインのフォントも知ることができるツールを探している場合は、おそらく他のオプションを検討する必要があります。
CSS ピーパー
おそらくそれは、すべてのオプションの中で最も美しく快適なオプションです。 Google Chrome でのみ利用可能な拡張機能をインストールすると、閲覧している Web サイトのソースを確認したいときにそのアイコンをクリックするだけで済みます。
右側にポップアップ ウィンドウが開き、タイトル、サブタイトル、本文などのタイプごとにすべての情報が表示されます。
フォントフェイス忍者
Web ページ上で使用できるフォントの種類を調べるための拡張機能として用意されているもう 1 つの優れたサンプルは、FontFace Ninja であり、これも広く使用されており、最も完成度の高いサンプルの 1 つとして知られています。
ここで話しているのは、フォントを簡単に識別するために使用できる FontFace Ninja であり、たとえば WhatFont と比較してはるかに多くの価値を提供するものです。これを使用するには、その拡張アイコンをクリックするだけで、ページ内のすべてのソースのリストが生成されます。すべての詳細を一目で知ることができると非常に便利です。
価値のある側面の 1 つは、これまでに知られていた他のものとは異なり、画像内の情報源を識別できるため、その側面の中でも傑出しており、ほとんどの場合に優れたツールとなることです。 Fontface Ninja 拡張機能アイコンをクリックした後、画像をクリックすると、数秒後に結果が生成されます。
FontFace Ninja をここで Chrome に追加し、ここで Safari を追加できます。
何が実行されるか
WhatRuns はWeb 開発者向けに作成されているため、この拡張機能をインストールするときは注意が必要です。 WhatRuns は、ソースに関する単純な情報を抽出します。この拡張機能は、ソース、分析ツール、WordPress プラグインに関する情報を提供できるため、Web サイトを作成する人に最適です。
インストールは非常に簡単です。 Chrome 拡張機能ストアからダウンロードし、スキャンしたい Web サイトの URL を入力するだけです。 WhatRuns は、その Web ページで使用されているすべてのフォントのリストと、サイズ、太さ、スタイルなどのその他の情報を表示します。したがって、すべてのデータの中から探しているものを特定する方法を知る必要があります。
フォントピッカー
FontPicker は、コンピュータに詳しくなく、Web ページでどのようなフォントが使用されているかを知りたい場合に最適です。 FontPicker はインストールも使用も簡単です。 Web 開発者の助けを必要とするツールは必要ありませんし、望まない情報も提供しません。
FontPicker がインストールされたら、アクセスする各 Web サイトを分析できるようにアクティブ化します。この方法では、テキストと「フォントの詳細」を右クリックするだけで、サイズ、太さ、スタイルなどの詳細情報を取得できます。
ウェブツールを使って
ここでは、画像形式のドキュメント内のフォントをサポートするいくつかの Web アプリケーションを紹介します。したがって、事前にWebサイトのスクリーンショットを撮る必要があります。
Windows 10 のスクリーンショット ツールは、 WIN キーを押すとアクティブになります。 +シフト。 + はい、 macOSでは SHIFT キーを押します。 + CMD + 4 を押して、キャプチャしたい画面の表面を選択します。
マイフォント
MyFonts.com Web サイトでこのツールを入力すると、画像をアップロードできます。MyFonts はそれを分析して、そのデザインにどのフォントが使用されているかを調べます。
画像を MyFonts 画面にドラッグするか、 [画像をアップロード]ボタンをクリックしてハード ドライブ上のファイルを選択するだけです。
マッチェレーター
WhatTheFont と同じように、Matcherator を使用すると、Web サイトで使用されているフォント(より正確には Web サイトのスクリーンショット) を分析することもできます。
ファイルをアップロードすると、Matcherator は分析したい画像の部分を選択するように求めます。マッチさせてボタンを押すだけです。そして、画像のスタイルを見てみましょう。
フォントは何ですか
What Font Is は、画像で使用されているフォントの種類を知らせる Web 上の 3 番目のツールです。これを行うには、「ここをクリックして参照」リンクをクリックするか、画像を画面に直接ドラッグして、スクリーンショットをアップロードします。
What Font Is に含まれる追加オプションは、 Web サイト上の任意の画像の URL を含めることができ、テキストが含まれている場合は、このアプリケーションがそれを分析します。
アイデンティティフォント
このウェブサイトを通じて、異なるアプローチではありますが、その書体がどのような書体であるかを知ることができます。実際、このプラットフォームが行うことは、文字やフォントの形状に関する具体的な質問です (たとえば、曲線が使用されている場合、太字形式であるか、行間に区切りがあるかなど)。このようにして、Web サイトには 5,113 種類のフォントがあるため、探しているフォントが「ヒット」するまで破棄されます。
あまり実用的なツールではありませんが（特にデザインやタイポグラフィーの知識があまりない方）、ゲーム感覚で操作できるので楽しみながら知識を学べるサイトです。さらに、Web サイトやプロジェクトで使用できるフォントを見つけるのにも最適です。もちろん、現時点では英語なので、この言語を話せない場合は、いくつかの質問を理解するのが難しいかもしれません。
プリントワークス ボウフィン
この Web サイトを通じて、探している情報源に関する大量の情報と詳細を見つけることができます。さらに、特定のフォントや文字を識別する方法を学習するガイドなど、他の機能も提供します。 Identifont と同様に、Web サイトは英語なので、この言語を使用する必要があります。また、両方の Web サイトは非常に似た方法で機能しますが、こちらの方がもう少し直観的で正確です。
すべての情報が同じメイン ページにあるため、フォントを見つけるためにサイド メニューに移動したり、ページごとに移動したりする必要はありません。
フォントスプリング
Fontspring は無料のフォント ダウンロード Web サイトであり、補足として、プラットフォームにアップロードする必要がある写真からフォント スキャン機能を提供します。このウェブサイトは、データベースの一部である 900,000 の無料または有料のソースとの類似点を検索できるようになります。
Fontspring は、光学式文字認識 (OCR) を使用して分析を実行します。テキストの写真をアップロードするときは、写真がぼやけていないこと、テキストが傾いていないこと、そして写真内に多くの物体や図が写っている場合に備えてコントラストが高いことが重要です。 Web サイトがフォントを特定すると、有料の場合は購入できる場所へのリンクが提供され、無料で使用できる場合は無料でダウンロードできる場所へのリンクが表示されます。 YouTube で彼のチュートリアルをチェックして、その方法を確認できます。
ロゴのフォント
Font in logo は、プロ向けではなく、好奇心旺盛な人向けのWeb サイトです。 Web やテキストを含む画像は分析されません。これはむしろ、最も有名なブランドのロゴのデータベースであり、それらのロゴに含まれるフォントの名前が表示されます。
これを行うには、検索エンジンを使用し、ブランド名 (Coca Cola、Nutella、Chanel…) を入力すると、フォント名とともにロゴが表示されます。
ほとんどの場合、これらのフォントは独占的であり、著作権によって保護されており、そのロゴ専用にデザインされています。そのため、商業目的での使用は禁止される場合があります。いずれの場合も、ロゴをクリックするとフォントに関する詳細情報が表示され、コンピュータにダウンロードできます。
アプリを使う
Web ページ上のさまざまなフォントを識別するもう 1 つの方法は、モバイル アプリを使用することです。以下では、Android と iOS で最も人気のあるものをレビューします。
フォントとは
このアプリケーションは、視覚的な検索に人工知能を適用することで機能し、あらゆる Web ページのソースを確認できるほか、写真を撮った場合はオフライン ソースも確認できます。アプリは写真をデータベースに送信し、分析されたページまたは写真に含まれるものに最も近いソースを提供します。
さらに、このアプリには、さまざまな Web ソースのさまざまな無料トライアル、幅広い専門オファーと購入用のオリジナル フォント パッケージも含まれています。
アドビキャプチャ
これはグラフィック デザイン向けに設計されたアプリですが、 Android および iOS で無料で利用でき、画像ベースの検索と同様の方法で、基本画像を使用したり、写真を撮ったり、レビューしたい Web ページのスクリーンショットを撮ったりするだけで、類似したフォントを検索できます。
このアプリでは、興味のあるフォントに似たフォントを検索し、それらを Creative Cloud と同期して、後で Photoshop または Illustrator で使用することもできます。さらに、このアプリでは、さまざまなフォント ファミリ、スタイル、タイポグラフィ コレクションを検索できます。
自分のフォントを探す
Find my Font モバイル アプリを使用すると、表示されたテキストやロゴがどのフォントを使用しているかを検出できます。アプリケーションから写真を撮るだけで、使用されているフォント、またはそれに最も似ているフォントが表示されます。さらに、画像をトリミングして、興味のある文字を正確に分析できるようになります。 Android と iOS で利用でき、無料です。最新のアップデートは 2018 年のものであるため、完全に現代的な外観ではないかもしれませんが、Play ストアと App Store での肯定的なコメントから判断すると、アプリは依然としてその役割を果たしています。
参考資料一覧
- https://www.fontsquirrel.com/matcherator
- https://play.google.com/store/apps/details?id=com.softonium.findmyfont&hl=es
- https://chrome.google.com/webstore/detail/whatruns/cmkdbmfndkfgebldhnkbfhlneefdaaip?hl=ja
- https://apps.apple.com/us/app/find-my-font/id1224842785
- https://fonts.google.com
- https://www.fontinlogo.com
- https://taiarts.com/blog/tipos-de-tipografia-caracteristicas-y-eleccion/
- https://chrome.google.com/webstore/detail/font-finder/bhiichidigehdgphoambhjbekalahgha
- https://apps.apple.com/es/developer/adobe-inc/id331646274?uo=4
- https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh?hl=es&authuser=1
- https://addons.mozilla.org/es/firefox/addon/fontanello/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search
- https://www.whatfontis.com
- https://chrome.google.com/webstore/detail/font-picker/mmjbimgpcbaegjiieojddickpjbdkeej?hl=ja
- https://play.google.com/store/apps/details?id=com.adobe.creativeapps.gather
- https://apps.apple.com/es/app/whatthefont/id304304134?uo=4
- https://play.google.com/store/apps/details?id=com.monotype.whatthefont
- https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm/popular?hl=ja
- https://apps.apple.com/us/app/fonts-ninja/id1480227114
- http://www.bowfinprintworks.com/SerifGuide/serifsearch.php
- https://apps.apple.com/es/developer/myfonts-inc/id304304137?uo=4
- https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk
- https://apps.apple.com/es/app/whatfont/id1437138382?mt=12
- https://chrome.google.com/webstore/detail/fontanello/jdlhfjlpaijjhklfadlhbbmpjfddkglc
- https://www.fontspring.com/matcherator
- https://apps.apple.com/es/app/adobe-capture-herr-de-ps-ai/id1040200189?uo=4
- https://www.myfonts.com/WhatTheFont/
- http://www.identifont.com/identify?4+.+1QY+8B+A0