レスポンシブウェブタイポグラフィ

「本を表紙で判断しないでください」と言われていますが、調査によると、オンラインユーザーがウェブサイトにとどまるかどうかを決めるのにかかる時間は50ミリ秒です。

Webの信頼性を調査したスタンフォード大学の別の調査によると、ユーザーの75％が、Webサイトのデザインに基づいて企業の信頼性について判断することを認めています。 優れたWebタイポグラフィは、より多くのビジネス問い合わせとその後のコンバージョンを生み出すための入り口です。

言うまでもなく、情報は魅力的かつ効果的に表示されなければなりません。 ただし、問題は、さまざまなモバイルデバイスがあるため、タイポグラフィはこれらすべてのプラットフォームに準拠する必要があることです。

では、どのようにしてWebタイポグラフィを最大限に活用するのでしょうか。

1.フォントの賢明な使用により、タイポグラフィは応答性が高く、しかも効果的です。

フォントフェイス機能が導入されて以来、Webデザイナーは、デザインでさまざまなフォントを自由に使用できることを歓迎していました。 これは、ウェブセーフカラーのみが使用されていた以前の時代とはまったく対照的でした。

多くのフォントを自由に使用できるため、設計者はそれらの正しい使用方法を知る必要があります。 レスポンシブウェブデザインはほとんどのウェブサイトで使用されており、さまざまな種類のデバイスとそれぞれの画面サイズに応じてデザインされているタイポグラフィのプレイに制限を設けています。 したがって、レスポンシブWebデザインシステムで複数のフォントを組み合わせる場合、Webデザイナーは注意する必要があります。 Webサイトにあまり多くの書体を使用しないでください。 むしろそれを3つのセットに保ちます。 それはよりクリーンでより効果的なウェブデザインを確実にします。 同時に、非常に人気のあるフォントも使用しないでください。ページが他のフォントよりも優位に立つことができない場合があります。

ケーススタディ：vox.comをチェックアウトします。 このサイトは2つのサンセリフフォントを組み合わせており、簡単に実行できます。 サイト内に散在しているハリエットを除いて、すべての見出しにBaltoを使用し、本文にAlrightSansを使用しています。 結果として得られる外観は、すっきりとエレガントです。

それどころか、angelfireサイトをチェックしてください。 このサイトには複数のフォントが含まれており、みすぼらしい、プロフェッショナルではないように見えます。

2.見出しを強調します

Webタイポグラフィの研究により、Webサイトのタイポグラフィがその見出しを際立たせることが明らかになりました。 これは、Web訪問者がサイトにより多くの時間を費やしていることを意味します。 これを実現するには、グリフと合字を使用して、見出しに独自の外観を与えます。

結紮は、一緒に接続されているように見える文字です。 たとえば、fishという単語の最初の部分を形成する文字fとiは、フォントで「fi」として結合されます。 ブラウザのfont-feature-settingsを使用するか、「Text Rendering-OptimiseLegibility」機能を使用して、合字を簡単に追加できます。 Firefoxにはすでにデフォルトの合字があります。 特定のフォントタイプで合字の特定の組み合わせを使用すると、Webデザインに美しさとスタイルを追加できます。 合字は、ページレイアウトソフトウェアの[テキスト]、[タイプ]、または[タイプを開く]メニューでオンまたはオフにできます。 ソフトウェアは、関連する文字が一緒になる場所に合字を自動的に挿入します。

ケーススタディ：このウェブサイトをチェックすると、合字がどれほどエレガントに見えるかを簡単に確認できます。 これらの美しく細工された見出しをWebサイトに追加すると、外観が確実に向上し、視聴者のユーザーエクスペリエンスが向上します。

3.さまざまなサイズと色のフォントを適切に使用して、Webサイトにオーディエンスと話をさせます

上の図から明らかなように、デスクトップ画面だけでなくモバイル画面でもはっきりと読み取って表示できるフォントを選択する必要があります。 フォントが印刷メディアに表示されるスタイルは、デジタルメディアに表示される方法とは異なります。 フォントファミリー、スタイル、効果を理解する必要があります。 Webフォントの仕様は、Serif、Sans-Serif、Monospace、Fantasy、およびCursiveがフォントファミリーであると述べているW3CによるCSS仕様に記載されています。

次に、Webサイトのテーマまたはカテゴリに応じて書体を選択します。 これはあなたのウェブページがあなたのターゲットオーディエンスに話しかけ、望ましい結果を生み出すことを確実にします。 セリフフォントを使用してテキストの読みやすさを向上させることもできます。これにより、音声のインパクトをさらに鮮明にすることができます。 ここでの問題は、Serifのこの属性は高解像度の画面ではうまく機能しますが、低解像度の画面では望ましくない結果になる可能性があることです。 短い見出しには芸術的なフォントを使用し、本文にはより控えめなフォントを使用することをお勧めします。

4.メジャーの変調は、レスポンシブタイポグラフィにとって重要です

Webページの行の長さを調整する必要があります。 フォントのメジャーまたは行の長さの変調は、タイポグラフィの応答性に貢献します。 レスポンシブデザインには、さまざまな画面サイズの要件に応じたフォントのレスポンシブ変更が含まれます。 したがって、これは必須です。

「測定」または「行の長さ」という用語は、読みやすさ、または人々がWeb上のテキストをどのように読むかと関係があります。 フォントの行の長さを増減することは、レスポンシブWebタイポグラフィを生成する1つの方法です。 理想的な行の長さまたはメジャーは、スペースと句読点を含めて、印刷物またはWebページごとに1行あたり45〜75文字です。 これは、1行あたり45〜85文字に拡張できます。 これは、人々がテキストを読む方法とそれに対応する目の動きに関する研究から導き出されました。 これに基づいて、一部の専門家は、目の読み取り動作が水平方向の左から右方向に従うため、Webコンテンツに適した左揃えのテキストを推奨しています。

ケーススタディ：Webサイトスイートでは、1行あたりの文字数が約75文字に制限されています。 ご覧のとおり、エレガントに見え、視聴者が読んでいる間、興味を持ち続けることができます。

一方、ウェブサイトのgatesnfencesには、1行あたり少なくとも120文字が含まれています。 その結果、それは不快に見え、内容を読むことを思いとどまらせるでしょう。

5.さまざまなフォントサイズを使用すると、画面からのさまざまな距離での読みやすさが向上します。 これは、レスポンシブタイポグラフィの要件です。

フォントが表示および読み取り可能になるように、フォントサイズを選択してください。 これは、設計者にとって少し難しいかもしれない「理想的な手段」に妥協する必要があるかもしれません。 トリッキーな部分は、「理想的な対策」には、フォントサイズの縮小またはフォントサイズの拡大が伴い、テキストが読めなくなる可能性があることです。 肝心なのは、コンテンツは視聴者にとって快適に読めるものでなければならないということです。 したがって、レスポンシブタイポグラフィの重要な要素の1つは、さまざまな読み取り距離に対してさまざまなフォントサイズが使用されるようにすることです。 さまざまな読み取り距離で認識されるフォントサイズを計算する方法があり、これを実現するためにサイズ計算機を使用できます。

ケーススタディ：ウェブサイトmoonbaseをチェックしてください。 これは、クライアントがWebサイトを設計し、ビジネスをブランド化するのに役立つWebサイトです。 画像の中央にあるテキストは目立ち、ウェブサイトが何であるかについての意味を伝えています。 一目でわかります。 これはユーザーの注意を引き、標準のフォントサイズで書かれたウェブサイトの残りの部分を通過するように促します。

6.レスポンシブタイポグラフィでは、Webブラウザがさまざまなフォントをサポートできる必要があります

特定のカスタマイズされたフォントを使用してWebサイトを設計する場合は、ブラウザがそれらのフォントの読み込みと表示をサポートできることを確認する必要があります。 コードにエラーがなく明確である場合でも、ブラウザーの非互換性の問題により、作業が妨げられる可能性があります。 また、フォントファイルが保存される形式が、Webページで使用するフォントと互換性があるかどうかを確認する必要があります。 非互換性の問題は、フォントの読み込みに影響を与える可能性があり、したがってWebページの表示に影響を与える可能性があります。

ケーススタディ：上記から、標準フォントを使用するか、「フォントスタック」を使用する必要があると推測できます。 最初のステップは、フォントが「Webセーフ」であるかどうかを確認するための「フォントテスト」です。 基本的に、ブラウザはフォントの各シーケンスを最初のフォントの選択、2番目のフォントの選択、3番目のフォントの選択などと見なします。 ブラウザがシーケンス内のフォントを見つけることができない場合、使用されているフォント分類に応じて、デフォルトのSerif、Sans Serif、またはMonospaceに戻ります。

たとえば、オペレーティングシステムの大部分はCenturyGothicフォントを使用しています。 したがって、最初のフォント選択としてCentury Gothicで始まり、Arial、Helvetica、最後にSans-Serifの一般的な分類が続くフォントスタックを作成できます。 CSSでは、タイトルに複数の単語が含まれるフォントは引用符で囲む必要があることに注意してください。 たとえば、font-family：“ Century Gothic”、Arial、Helvetica、Sans-Serif。

これにより、ブラウザは最初にCenturyGothicフォントを探すようになります。 システムの大部分がこのフォントを使用しているため、ほとんどの視聴者は、CenturyGothicを使用して表示されたサイトを見ることになります。 Century Gothicを使用していない視聴者の場合、ブラウザは最初にArialにフォールバックし、次にHelveticaにフォールバックし、最後にSans-Serifの代替にフォールバックします。

7.フォントの物理的特徴に関連する要因は、デザインでのフォントの使用の柔軟性に影響を与える可能性があります

測定、行間隔、フォントサイズに関してはかなりの柔軟性があり、レイアウトに合わせてこれらのバリエーションを作成できますが、応答性のあるタイポグラフィは、グリフ自体に影響を与える要因によって制限される可能性があります。 これらは、重量、幅、ストロークコントラスト、降下、および光学サイズです。 これらのパラメータの変更は、サイトに影響を与える可能性があります。 設計者が設定した物理パラメータ内のフォントファミリ間の数学的補間を通じてさまざまな種類のフォントスタイルを設計することにより、これらの制限を克服するのに役立つツールが利用可能です。

このようなツールの2つの例は、SuperpolatorまたはFlowType.jsです。 画面サイズが小さくなると、スケール間の相対的な比例差が大きくなります。 したがって、画面のサイズと相対的なスケールのバランスをとる必要があります。 これを念頭に置いていくつかのスケールが考案されており、これらはより影響力のあるWebサイトの設計に使用できます。 比率とは、見出しのフォントが本文のテキストよりも大きいまたは小さい回数を指します。 これが、レスポンシブタイポグラフィが必要な理由です。 デザイナーはページ上のすべての活版印刷要素のすべてのベースラインスタイルをリセットするという問題を経験できないため、ブレークポイントで縮小するように調整される活版印刷が必要です。

ケーススタディ：フロータイプを確認します。 スライダーをドラッグすると、SuperpolatorやFlowType.jsなどのツールのおかげで、レスポンシブタイポグラフィがどのように機能するかがわかります。

レスポンシブタイポグラフィは練習で完成します。 メディアクエリとさまざまな画面サイズのデバイスのセットを使用してテストする方法についての知識があれば、これをマスターできます。 最高のタイポグラフィを実現し、より多くのビューを引き付け、より多くのリードを変換するために何をする必要があるかを理解したので、上記の原則を実装して、それらが物理的な現実に具体化するのを見ることができます。