タイポグラフィは、グラフィック デザイン プロジェクトの重要な部分です。フォントは Web サイトの見栄えを良くし、ユーザーの感情や気分に影響を与えることができます。そのため、グラフィック デザインを確実に成功させるには、Web サイトに適したフォントを選択することが不可欠です。 ただし、プロジェクトに最適なフォントを見つけるのは難しい場合があります。正しいフォントを選択するには、長い時間がかかる場合があります。正しい選択をするために、覚えておくべきことがいくつかあります。 フォントとは 同じ意味を示すためによく使用される 2 つの用語です。実際には、ほとんどの人が と言うとき、実際には を指しています。グラフィック デザイナーにとって、この 2 つの違いを知ることは非常に重要です。 書体とフォントは、 font typeface 共通のデザイン機能を共有する特定のグリフのセットであり、同じ基本デザインを持つフォントのファミリーとして説明できます。 書体は、   よく知られているのは 書体で、サイズ、太さ、その他の特性が異なるさまざまなフォントが含まれていますが、すべてサンセリフのネオグロテスクなデザインに基づいています。したがって、Arial は書体、14 ポイントの Arial Black はフォント、14 ポイントの Arial Regular は別のフォントです。 Arial を検索すると 、同じファミリに属するフォントを使用するのが一般的であることを覚えておいてください。 ウェブサイトのフォントの組み合わせ フォントが重要な理由 フォントをさまざまなコンテキストに適したものにするさまざまなフォントの特性について説明する前に、すべてのタイポグラフィ デザインが果たす目的を概説しましょう。 可読性を提供する 訪問者が文書をどれだけ読みやすく理解しやすいかを測定します。 ウェブサイトの読みやすさは、 可読性に寄与する要因には、次の 3 種類があります。 読者の個人的属性 (視覚障害およびその他の健康要因); テキストの内容 (トピックの関与、適切な文法、構文の複雑さ); タイポグラフィ (書体とそのフレームワーク、つまりフォントの選択)。 は必然的に関連していますが、混同しないでください。 . 可読性 読みやすさ 各文字を他の文字と区別できるようにする書体デザインの特徴です。多くのフォント特性は、読者がテキスト記号をどれだけ簡単に解読できるかに貢献し、結果として全体的なテキストの読みやすさに貢献します。これらについては、記事の後半で詳しく説明します。 読みやすさは、 高度に装飾された書体は、ブランドに多くの個性を与えますが、テキストの読みやすさを大幅に犠牲にします。 そのため、ロゴ、バナー、T シャツ プリント、ヘッダーなど、独立した大規模なフォーマットの作成に主に使用されます。タイポグラフィはメッセージを伝えるために作成されたものであるため、ほとんどの場合、読みやすさがデザインより優先されます。 テキスト階層を示す タイポグラフィ階層を使用すると、異なるフォントを使用し、異なるテキスト レイアウトを作成することで、消費者を特定の種類の情報に導く階層的な分割を設計できます。 タイポグラフィ階層を使用する最も簡単な方法は、さまざまなテキスト部分にさまざまなフォント サイズを使用することです。小さいタイプは本文コンテンツに使用されることが多く、大きいタイプはタイトルとヘッダーに使用されます。異なる情報セクションを区別する他の方法には、箇条書き、空白、フォントの色などがあります。 視覚的に異なるデータを作成するためのオプションが非常に多いため、タイポグラフィの階層は画一的なソリューションである必要はありません。代わりに、Web サイトの読みやすさを向上させながら、プロジェクトに最適なオリジナルのデザインを作成するために使用してください。  デザイナーの最も重要な仕事の 1 つは、Web ページのコンテンツを効果的に配置して、簡単に利用できるようにすることです。デザイナーが扱うデータの多くはテキストベースであるため、さまざまな要因が階層の構築にどのように寄与するかを学ぶことが不可欠です。 ウェブサイトのナビゲーションを改善する 1 つのページに効果的なタイポグラフィ階層を既に作成している場合、つまり、複数の階層レベルを設定し、フォントの種類、サイズ、色などを選択して、すべての種類のコンテンツを区別している場合は、Web サイトのどこでも同じ方法を適用するようにしてください。 . ユーザーが初めてプラットフォームにアクセスするとき、 。 Web サイトのすべてのページでこれらの側面を一貫させると、読者にとってより良いユーザー エクスペリエンスが作成されます。 ナビゲーション ツールの場所、最も重要なコンテンツの表示方法、リンクの色などを把握する必要があります ビジネスブランドを作る フォントはウェブサイトのブランディングの重要な要素であり、ユーザーがウェブサイトをどのように見るかに大きな影響を与えます。ブランドに対する 、そのロゴの優れたタイポグラフィ コンポーネントの使用によってプラスの影響を受ける可能性があり、美的に魅力的なフォントの組み合わせを使用することで、製品の説明をより魅力的にすることができます。 消費者の認識は 効果的なタイポグラフィは、コンテンツの本質から目をそらすことなく、読者の注意を引き付けます。それはあなたのウェブサイトをより際立たせるだけでなく、訪問者があなたのブランドをあなたのサイトで使用されている書体と関連付け始める原因にもなります.ユーザーが毎日何十ものインターネット リソースにアクセスしているこの時代では、強力なブランド イメージの価値と、それを作成する上でのフォントの役割を強調しすぎることはできません。 気分や感情を伝える フォントを選択するときは、 タイポグラフィの機能の 1 つは、消費者を感情的なレベルでテキストと結びつけることです。チャット中に叫び声を表すためにすべての文字を大文字にするのと同じように、さまざまなフォントがムードや感情を生み出します。 文字の外観が読者のコンテンツの認識に影響を与える可能性があることを覚えておくことが重要です。 各フォントには独自の声があり、特定のフォントが伝えようとしているムードを区別するのは簡単ですが (特に複数の書体を比較する場合)、ほとんどの人は、異なる文字デザインを見たときに異なる感情を感じる理由を説明できません. あまり意味のない単純化された説明は ことを教えてくれます。したがって、私たちは無意識のうちに特定の感情を知覚します。 、私たちがステレオタイプを扱うのと同じようにフォントや書体を扱っている その答えは、ウェブサイトのフォントを自信を持って選択し、意図したムードや読者の感情を呼び起こす必要があるウェブ デザイナーにとって、あまり役に立ちません。 次のセクションでは、どの条件でどのフォントを使用する必要があるかをより実践的に理解するために、フォントの特性とその使用法を見ていきます。 メインフォームの特徴と使い方 潜在意識に働きかけることで、フォントは読み始める前から視聴者の気分や感情を形成する上で重要な役割を果たします。 事実上無限であり、独自のデザインを簡単に作成できます。ただし、特にどこから始めればよいかわからない場合は、適切なフォントの選択が複雑になる場合があります。 利用可能なフォントの数は このセクションでは、どのようなフォント特性がフォントを特定のコンテキストにより適したものにするかを説明します。 重さ あらゆるフォントの書体ストロークの太さを指します。文字を太くしたり細くしたりすることは、テキスト階層を作成する簡単な方法です。 、 、 フォントの太さは 3 つの主なカテゴリであり、レギュラー フォント タイプが読書用に最も人気があります。明るく大胆なタイプは、一方では繊細さともろさ、他方では強さと無礼など、より多くの感情を伝えます。 ウェイトとは、 ライト レギュラー ボールド の 極細の書体は、気遣いや軽やかさ、繊細さを表現するため、化粧品・美容業界で人気があります。ボールド体 (特にいわゆるブラック フォント) は読みにくく、主に広告、ゲーム、またはショー ビジネスの短いフレーズで見られます。  幅 重量と同様に、 読み取り速度に大きく影響する、簡単に識別できる特性です。コンデンス フォントは、コンデンスされていない対応するフォントよりも水平方向のスペースを占有せず、小さな領域に多くのテキストを収める必要がある場合に表示されます。 幅は このようなフォントは、通常幅のフォントを使用できない狭い新聞スタイルのコラムで 1 行の見出しとしてよく使用されます。 窮屈感があり、読み手に不快感を与えることさえあります。グリフの水平線が減って読みにくくなり、文字を区別するのが難しくなります。 幅の狭いフォントは 短い単語でさえ長く見えるようになり、読者はそれらを読むのが遅くなる傾向があります。言葉はより記憶に残り、大きな注目を集めます。このようなフォントはより多くの横線を使用するため、斜めに読むことを意図したバナーのロゴやフレーズを作成するのに最適です。  フォント スタイルを拡張すると、 セリフとスラブ 文字のストロークの端を横切る短い線はセリフと呼ばれ、セリフを使用するフォントは です。セリフなし – サンセリフ。 セリフ フォント セリフ体は最初に作られた書体です。 あ ローマ帝国では、文字は最初にブラシで石に描かれ、次に労働者が各行の最初と最後に広がったブラシの跡に沿って石を彫刻し、セリフを形成した. 通説 小さなセリフでも文字間のコントラストが増し、フォントが読みやすくなります。そのため、セリフ フォントは、特にインクの鮮明さが時間の経過とともに低下する可能性がある印刷されたテキストで、大規模な科学および文学作品で人気があります。 長い間使用されてきたセリフ フォントは、多くの個性と特徴を提供する多用途で安全なオプションです。多くの有名ブランドのロゴに時代を超越した伝統を感じさせ、ジャーナリズム、法律、ジュエリー、ファッション、映画の分野で特に人気があります。  セリフ フォントと比較して、 モダンな外観を提供し、ミニマルなデザインに好まれます。彼らは、テクノロジー、ゲーム、自動車業界で頻繁に採用されています。 サン セリフは セリフは、まっすぐで長方形で、文字のメイン ストロークと同じ太さの場合、スラブになります。 頑丈で信頼性が高く、工場のフロア、電動工具店、ステーキハウス、その他の「男らしい」業界で自然に見えます。 スラブ セリフ フォントは 斜体および斜めフォント 斜体と斜体は、角度のあるフォントを表す 2 つの関連する用語ですが、別の用語です。 。歴史的に、それらの目的はテキストを強調することです。斜めに傾いているため、縦線が少なく、曲線が優美になり、上品で心地よい音色になります。斜体または手書きのフォントは個人的な感情を伝え、挨拶や招待状に使用されます。 タイプ デザイナーは、手書きのカリグラフィーに似たイタリック フォント タイプを作成します   (  と呼ばれることもあります) は、既存の書体の直立した文字を傾けて表示されます。最近のほとんどの書体には、他の書体と一緒に斜体フォントが含まれています。テキストの一部を強調し、時にはスピード感を加えます。デザイナーは、斜めのサンセリフ体は斜めのセリフ体ほどテキストで目立たないと報告しています。  Oblique フォント タイプ false italic 対比 文字の細いストロークと太いストロークの幅の違いです。中程度または低いコントラストのフォントは、長時間の読書に適していますが、必ずしもムードや感情を呼び起こすとは限りません。 フォントのコントラストは、 (ストロークが均一) は読みやすさに優れています。ムラのある筆跡とのつながりが少なく、モダニズムとインダストリアルの雰囲気をテキストに加えています。 モノウェイト フォント  Classicism フォントの特性を継承しています。細いストロークと太いストロークの違いが劇的な感覚を生み出し、読みやすさを犠牲にしながらエレガントなヘッダーを作成できます。 エクストラ コントラスト フォントは、   Xハイト 大文字と比較した小文字の高さです。ボディ サイズが小さいフォント (小文字の文字の高さが大文字の 2 倍以上小さい) は、1 つのフォントの文字間に大きなコントラストを提供し、目が各文の先頭にジャンプしやすくします。このようなフォントは、テキストの行間により多くのスペースを必要とします。より表情豊かに見えるので、詩や音楽作品を読むのに最適です。 x-height、または本体サイズは、 逆にエックスハイトが大きいフォントは統一感のある文字になり、安定感があります。また、特定のスペースにより多くのテキスト行を収めることもできます。  コーナー 文字の直線の交点は、鋭いエッジを持つ角を形成します。これらのエッジを丸くすることで、滑らかで心地良い表面との関連性を形成するフォントの認識に大きな違いが生じます。 も自然界に広く普及しているため、食品やベビー用品業界では角の丸いフォントが人気があるのは普通のことのようです。  丸みを帯びた形 一方、 緊張や不快感さえも表現することがあります。誇張されたシャープネスを持つフォントは、あらゆる種類のロゴを作成するために人気があり、メタル バンドの一番の選択肢です。  鋭いエッジは デザインに適したフォントを選択するためのヒント トレーニングを受けていないデザイナーにとって、Web サイトのフォントを選択するのは難しいかもしれません。主要なフォント要素に慣れてきたので、フォントをよりよく分析して、自分に適したものを選択できます。考慮すべきいくつかの追加のヒントを次に示します。 あなたのサイトを真面目、遊び心、ハイテク、またはエレガントに見せたいですか?サイトの特性を反映するフォント属性を定義し、適切な書体の収集を開始します。 個性について考えてみましょう。 たとえば、大量のテキストに対して読みにくい装飾的な書体を使用したり、カリスマ性を伝えないニュートラルなデザインを避けたりします。また、変わったフォントは読者の気を散らす可能性があるため、フォントの選択は常にバランスの問題です。 フォントの主な機能をスキップしないでください。  1 つの Web サイトで 3 つ以上のフォントを使用すると、構造化されていないように見え、集中するのが難しくなります。 フォントの数を最小限に抑えます。   さまざまなフォントを使用することで、視覚的な多様性とより興味深いデザインを作成できます。 1 つのプロジェクトで類似のフォントを使用しないでください。 気に入ったフォントが見つかったら、ファミリ内の他のフォントをチェックしてください。さまざまなサイズ、太さ、およびその他のフォントで文字がどのように見えるかを確認します。 拡張書体ファミリーを選択します。 フォントの選択とグラフィック デザインの作成は、困難で時間がかかる場合があります。しかし、この記事が、適切なフォントを選択するための基本に飛び込むのに役立つことを願っています. 😉

2022 - HackerNoon Contributor of the Year - Website Development

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Partner Manager at Crocoblock

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

Make resilience your competitive advantage

ウェブサイトや広告に最適なフォントを選択する方法

About Author

コメント

ラベル

この記事は

Related Stories

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

Telegram: クリプト島と本土を結ぶ橋

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

Telegram: クリプト島と本土を結ぶ橋

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps