タイポグラフィとは何ですか、なぜそれが重要ですか？ 初心者のガイド

それは私たちの携帯電話上で、本やウェブサイト上でだかどうか、私たちは常に書かれた言葉を消化しています。 指示の小冊子から店の前部への、タイプは私達のまわりに完全にある。 私達は頻繁に書かれた単語の力で反映するが、まれに私達は単語または文の調子の模範とすることのデザイナーの役割を考慮しない。

舞台裏では、デザイナーは、テキストの外観とテキストが言うこととの関係を検討するために時間を取っています。 実際には、異なる気分、雰囲気、感情は、タイプの選択によって単純に表現することができます。 しかし、実際にはタイポグラフィとは何ですか—そしてなぜそれが非常に重要ですか？

この記事では、タイポグラフィについて知っておく必要があるすべての蓋を持ち上げます。 私たちは、その起源の簡単な歴史を含むタイポグラフィの定義から始めましょう。 次に、優れたタイポグラフィの利点と、それがユーザーに与える影響について説明します。 最後に、タイポグラフィを構成するさまざまな要素と、それらすべてが何を意味するのかを調べます。

ここでは何をカバーしますか:

1. タイポグラフィとは何ですか？
2. なぜタイポグラフィが重要なのですか？
3. タイポグラフィのさまざまな要素
4. あなたのウェブサイトの正しい書体を選択する方法
5. 結論

準備はできましたか？ で潜ろう！

タイポグラフィとは何ですか？

のは、基本をキックオフしてみましょう：実際にタイポグラフィは何ですか？ 本質的には、タイポグラフィは、コピーを読みやすく、明確にし、視覚的に読者に魅力的にする方法で文字とテキストを配置する芸術です。 タイポグラフィは、特定の感情を引き出し、特定のメッセージを伝えることを目的としたフォントのスタイル、外観、および構造を含みます。 要するに、タイポグラフィは、生活にテキストをもたらすものです。

下のビデオでは、CareerFoundry UIデザインのメンターオルガは、タイポグラフィが重要な理由と、それがユーザーにどのような違いをもたらすかについての蓋を持ち上げ

タイポグラフィは、可動型の革新の間に、11世紀にさかのぼることができます。 デジタル時代の前に、タイポグラフィは、書籍や雑誌、そして最終的には公共事業に関連する特殊な工芸品でした。 タイポグラフィの最初の例は、西洋でタイポグラフィ革命を開始したグーテンベルク聖書に見ることができます。 楽しい事実：グーテンベルク聖書で使用されるタイプのスタイルは、現在Texturaとして知られており、あなたは今日の主要なデスクトップアプリケーションのフォ

タイポグラフィは、主にデジタルの世界と印刷の両方に関連付けられている現代に早送りします。 インターネットの誕生に伴い、タイポグラフィの芸術の創造的な爆発が来ました。 突然、ウェブデザイナーは豊富なフォントとタイプオプションを自由に使用でき、タイポグラフィはこれまで以上に視覚的に多様になりました。

なぜタイポグラフィが重要なのですか？

タイポグラフィは、単に美しいフォントを選択するだけではありません。 よいタイポグラフィは強い視覚階層を確立し、ウェブサイトに写実的なバランスを提供し、プロダクトの全面的な調子を置く。 タイポグラフィは、ユーザーを導き、通知し、可読性とアクセシビリティを最適化し、優れたユーザーエクスペリエンスを確保する必要があります。

なぜタイポグラフィが非常に重要なのかを少し深く掘り下げてみましょう。

タイポグラフィは、ブランド認知を構築します

良いタイポグラフィは、ウェブサイトの個性を強化するだけでなく、あなたのユーザーはsubliminallyあな ユニークで一貫性のあるタイポグラフィは、強力なユーザーフォローを確立し、ユーザーとの信頼を構築し、ブランドを前進させるのに役立ちます。

タイポグラフィは、意思決定に影響を与えます

タイポグラフィは、ユーザーがテキストによって伝えられる情報を消化し、知覚する方法に深遠 目を引くタイプは、テキストのメッセージを強化しない弱いフォントよりもはるかに説得力があります。

タイポグラフィは、読者の注意を保持しています

良いタイポグラフィは、一分または半時間のためにあなたのウェブサイトに滞在誰かの あなたのウェブサイトが視覚的に刺激的で記憶に残ることが重要であり、タイポグラフィはこのプロセスで大きな役割を果たします。

タイポグラフィのさまざまな要素

タイポグラフィを始めるには、まず8つの重要なタイポグラフィデザイン要素を把握する必要があ

フォントと書体

書体とフォントの違いを取り巻く混乱があり、多くの人がこの二つを同義語として扱っています。 書体は、フォントがテキスト文字のグラフィカルな表現であるのに対し、様々なサイズと重量の文字の無数を含むデザインスタイルです。 簡単に言えば、書体は関連するフォントのファミリですが、フォントは書体を構成する重み、幅、およびスタイルを指します。

書体には、serif、sans-serif、decorativeの三つの基本的な種類があります。 インターフェイスを整頓し、合理化しておくために、良いデザイナーは三つ以上のフォントを使用することはありません—と最小限に装飾的なフォント ほとんどのUIデザイナーは、本文テキストをセリフフォントに入れたり、タイトルをsans-serifフォントに入れたりするなど、セリフフォントとsans-serifフォントをペア

コントラスト

階層のように、コントラストは読者に強調したいアイデアやメッ 対照に時間を使うことはあなたのテキストを興味深く、意味を持った、注意把握にさせる。 ほとんどのデザイナーは影響を作成し、ページを分割するために様々な書体、色、スタイル、およびサイズで遊んでコントラストを作成します。

一貫性

あなたの書体を一貫性を保つことは、混乱して乱雑なインターフ 情報を伝えるときは、同じフォントスタイルに固執することが不可欠なので、読者は何を読んでいるのかを即座に理解し、パターンに気づき始めます。 ある程度の階層レベルで遊んでも問題ありませんが、書体の一貫した階層（ヘッダー用の一貫したフォント、小見出し用のフォント）を確立し、それに固執す

ホワイトスペース

多くの場合、”負のスペース”と呼ばれ、ホワイトスペースは、テキストやグラフィックスの周りのスペースです。 これは、多くの場合、見落とされ、ユーザーによって見過ごされる傾向がありますが、空白を適切に使用すると、インターフェイスが整頓されており、テキストが可 空白はテキストに注意を引くことができ、全面的で審美的に喜ぶ経験を提供する。 空白は、多くの場合、余白、パディング、またはテキストやグラフィックスのない領域だけの形をとります。

Alignment

Alignmentは、各要素間に等しいスペース、サイズ、距離があることを確認するた 多くのUIデザイナーは、ロゴ、ヘッダー、およびテキストの本文が互いに整列するように余白を作成します。 ユーザーインターフェイスを調整するときは、業界標準に注意を払うことをお勧めします。 たとえば、テキストを右に整列させると、左から右に読む読者にとって直感に反するように見えます。

色

色はタイポグラフィの最もエキサイティングな要素の一つです。 これはデザイナーが実際に創造的になり、新しいレベルにインターフェイスを上げることができるところである。 テキストの色は、しかし、軽く取られるべきではありません: あなたのフォントの色を釘付けすると、テキストが目立つようにし、メッセージのトーンを伝えることができます—しかし、それを間違って取得すると、サイトの色と衝突する乱雑なインターフェイスとテキストになる可能性があります。

色には、値、色相、彩度の三つの重要なコンポーネントがあります。 優れたデザイナーは、視覚障害のある人でも、これらの三つのコンポーネントのバランスをとることで、テキストを目を引くとはっきりと読みやすくする方法を知っています。 多くの場合、設計者はテキストをグレースケール（色なし）で表示し、テキストが背景色に対して暗すぎるか明るすぎる場合は微調整を行うことでこれをテス

Hierarchy

階層を確立することは、タイポグラフィの最も重要な原則の1つです。 タイポグラフィ階層は、最初に気づいて読むべきコピーの著名な部分と、標準的なテキストコピーとの明確な区別を作成することを目指しています。 ソーシャルメディアによってもたらされる短い注意スパンの時代には、デザイナーは簡潔であり、ユーザーが必要な情報を短時間で消費できるような書体を作

階層は、サイズ、色、コントラスト、および配置を使用して作成することができます。 たとえば、最初に感嘆符アイコンが赤で前のコピーよりも大きいコピー行がある場合、これは読者にとって行動を促すという視覚的な手がかりです。 見出しは常に小見出しや標準テキストよりも大きくする必要があります。

どのようにあなたのウェブサイトのための右の書体を選択しますか？

さまざまなタイポグラフィ要素に慣れたので、インターフェイスに書体を選択するプロセスについて話しましょう。 から選択するので、多くの異なるフォントや書体で、それは圧倒感じるのは簡単です。 正しい選択をすることは、見栄えの良いものを見るだけではなく、はるかに多くに依存します。 ここではいくつかの重要な考慮事項があります：

人格について考える

ユーザーが最初にあなたのウェブサイトに入ったときにどのように感 あなたはフレンドリーな雰囲気をエミュレートしたいですか？ あなたは、サイトがハイエンド、歓迎、遊び心、または深刻な感じにしたいですか？ タイポグラフィは、ブランドや製品の個性を反映していることが不可欠です。 この課題に直面したときの良い出発点は、あなたのブランドのコア特性を定義し、これらの特性を反映した書体を収集するために開始することです。 そこから、あなたは傾向に気づくことができます。

reflect on tone

フォントがメッセージのトーンとどのように調和するかを考慮することも同様に重要です。 たとえば、深刻な情報や重要な情報を伝えたい場合は、はっきりと読みやすく、気晴らしを制限する、あまり様式化されていない装飾的なフォントを選

機能けちるしないでください

機能は、フォームと同じように重要です：きれいに見えるが、完全に判読不能であるウェブサイトよりも悪い インターフェイスに含める書体を決定するときは、スタイル、美的、声を脇に設定し、フォントが読みやすく、読みやすく、アクセス可能であるかどうかを反映 テキストは緊張せずに読みやすいことができますか？ 文字は十分に区別されていますか？

パフォーマンスを考慮してください

多くのデザイナーがよく見落とすことの一つは、webブラウザに優しい書体を選択することです。 Googleフォントなどの一般的に使用されるフォントライブラリは、問題なくブラウザで完全にレンダリングできるwebベースのフォントファイルを提供 Proのヒント：webフォントをダウンロードするときは、必要以上に多くの文字セットをダウンロー この方法では、余分な体重を避けることができます！

インスピレーションを得る

どこから始めればよいのかわからない場合は、他の人が何をしているのかを時間をかけて確認してくださ あなたの周りを参照してくださいタイポグラフィに目を開きます。 あなたは同様のパターンに気づくことができますか？ タイポグラフィの良い例と悪い例を見ることができますか？ ソーシャルメディア上のタイポグラフィハッシュタグに従うか、Pinterestの上のタイポグラフィを検索しても、あなたにそこに何のいくつかの良いア また、さらにインスピレーションを得るために、これらの八つのタイポグラフィの傾向に見ることができます。

テストに時間がかかる

あなたのインターフェイスに使用するフォントを解読するための最良の方法は？ テスト、テスト、およびテスト！ 実際のユーザーからの有用なフィードバックを収集することにより、何が機能するのか、何が機能しないのか、読みやすいもの、直感に反するものや不格好な

結論

タイポグラフィはしばしば見落とされていますが、ユーザーインターフェイス設計の重要な要素です。 タイポグラフィをマスターすると、素晴らしいUIデザイナーになるためにあなたの方法でよく あなたがどこから始めるべきかわからない場合は、なぜあなたのお気に入りのウェブサイトに向かい、彼らが行ってきた書体のメモを作り始

UIデザインについての詳細を学ぶために熱心？ これらの関連するブログ記事をチェックしてください：

• UIデザインを釘付けにした美しいブログの10の例
• UIデザイナーのための32のユー: あなたの究極の用語集
• ここでは、ゼロからアイコンを設計する方法です：ステップバイステップガイド