Uiデザイン

Webおよび印刷デザインの書体スタイル

大多数の人は、朝起きてから夜寝るまで書体に襲われます。携帯電話のアプリからバスルームのグルーミング製品、朝の通勤時に目にする看板まで、タイポグラフィはいたるところにあります。しかし、毎日囲まれている書体のスタイルに本当に気付いている人はどれくらいいるでしょうか。

でもデザイナー書体を過小評価し、客観的な理解ではなく、大まかに基づいた意見に基づいて書体の決定を行うことがよくあります。ほとんどの設計者は、さまざまな書体が設計された元の産業コンテキストについてさえ知っていますか？これらのコンテキストと履歴は、特定の書体の読みやすさ、適切な文字、および使用法を決定するために何を意味しますか？どんなデザイン分野で働いていても、それがビジュアルデザインであろうと、 UX または伝統的なプリントデザイン、書体は、作成されるデザインのほぼすべてのビットに不可欠な要素です。

開発者が問題を抱えて電話をかけます。彼らはデバッグしようとしていました

今日使用されている最も影響力のある書体のいくつかは、市場に新しく、時には当然のことながら、独自の書体デザインを支持して見過ごされがちです。この記事の各書体は、数世紀ではないにしても数十年前のものであり、すべて異なる技術的コンテキスト向けに設計されています。したがって、それらが導入されて以来、多くの代替案または更新が作成されてきました。ディスプレイやプリンターの解像度が高くなり、より複雑な形状を正確に表示できるようになると、元々画面用に設計されたフォントの一部でさえ時代遅れになっています。

セリフ書体

Webタイポグラフィ用のさまざまなセリフ書体の例

バスカヴィル、ジョージア、ガラモン、タイムズニューローマンはセリフ書体の人気のある例です。

セリフとサンセリフの書体スタイルの違いを理解することは、タイプの最も基本的なルールの1つです。多くの人にとって、これは明白かもしれませんが、セリフは文字の主な水平線と垂直線の終わりに与えられるストロークです。セリフには、ヘアライン、ウェッジ、スラブセリフなど、多くのサブクラスがあります。これらはすべて、セリフ自体の視覚的品質を表します。

セリフ書体とサンセリフ書体、異なる書体スタイルの比較

一般に、セリフは、グーテンベルク印刷機の発明に続いて本を印刷するために使用された最初の書体であったため、サンセリフよりも長い歴史があります。本質的に、セリフは文字から文字へと目をスムーズにガイドするため、長さをより快適に読むことができ、長い形式の印刷物に理想的です。このため、絶対的なルールではありませんが、セリフは依然として一般的に本やレポートなどの印刷物の頼りになる書体です。それぞれの書体には固有の性質があり、本文テキストの大きなチャンクにはあまり適していないセリフ書体がいくつかあります（また、長い形式の作業で完全に読みやすく読みやすいサンセリフ書体もあります）。

バスカヴィル

バスカヴィルは、時の試練に耐え、今日でも広く使用されている古典的なセリフの1つです。バスカヴィルは、最初の植字面（ボドニとディドット）と19世紀および20世紀の書体の間の移行期に設計されました。 Baskervilleは、その著しく高いコントラストの文字形式により成功しました。

デザイナーのジョン・バスカヴィルは完璧主義者であり、美しいディテールのフォントを作成しました。書体をページに正しく転送するために、書体は自分のマシンでのみ印刷できました。バスカヴィルは私たちが今日取り組んでいるさまざまな媒体に適応しているため、この歴史は重要です。各レターフォームに組み込まれた詳細により、Baskervilleは、低解像度ディスプレイや不良プリンターなどの低解像度メディアには適していません。そうは言っても、バスカヴィルがその品質を表現する機会を与えられたとき、それは優れたセリフ書体です。

Baskervilleが大きな影響を与えた最新のデジタル書体の良い例は、AmazonがKindle、Bookerlyに委託した書体です。画面上で読みやすくなるように更新されながら、200年前の豊かさを維持する、バスカヴィルの代替品をお探しの場合は、ブッカーリー良い解決策かもしれません。他の選択肢は次のとおりですイーブス夫人そしてプランタン。

タイムズニューローマン

Times New Romanは、広く使用されている多くのフォントと同様に、多くの人に愛されているが、一部の人にも嫌われている偏光書体です。多くの場合、人々がTNRについて好きか嫌いかは同じです：その無関心な中立性。

Matthew Butterickは、次のように書いています。「Times New Romanは、深宇宙の黒さが色ではないように、フォントの選択肢がないほど、フォントの選択肢ではありません。 Times New Romanを見るということは、虚空を見つめることです。」タイムズニューローマンは、それが設計された紙、タイムズオブロンドンからの露出の結果として、その圧倒的な遍在性のために非常に明白に感じます。

Times New Romanは、新聞の商業的利益のために設計されました。それは、できるだけ多くの単語を1行、つまり1ページに詰め込みながら読みやすさを維持することでした。デザイナーは、新聞でのフォントの使用について非常に一般的でした。フォントは細く、細い列で読みやすくなっていますが、行の長さが長い本には理想的ではありません。この効率は、エックスハイトを増やし、トラッキング、つまり文字間のスペースを大幅に減らすことで達成されました。

Timesでの書体の成功により、Times New Romanはすぐにほとんどのアメリカの新聞に採用され、最も普及している書体の1つになりました。この遍在性のために、一部の設計者は、無関心または安さの印象を与える可能性があるため、Times NewRomanの使用を推奨していません。あなたが考えるかもしれない他のいくつかの編集スタイルのフォントはアーネム、ルモンドジャーナル、またはプランタン。

ギャラモン

ガラモンドアンティクアは、象徴的なパリのパンチカッター、クロードガラモンドによってデザインされた純粋な古いスタイルの書体です。ギャラモンは、タイプセット用に設計された最初の顔の1つでした。つまり、当時の最新の流行である小説の長い本文に理想的でした。

ガラモンは、それが設計された時代の固有の品質として、テキストに旧世界のスタイルの感覚を与えます。それでも、その丸みを帯びたセリフは、そのセリフの対応物の多くよりもテキストをより非公式に保ちます。 Garamondは、その明確なフォームのおかげで多作のフォントであり続けており、ユーザーは疲れることなく長々と読むことができます。キャラクターの大きな体と背の高いエックスハイトは、各文字の周りに多くのスペースを作成し、単語を知覚的に大きくして読みやすくします。

多くのデザイナーがGaramondの時代を超越したものであると主張しますが、そのフォームはWebタイポグラフィには理想的ではありません。ガラモンの印刷物の長所には、文字ごとに混ざり合う柔らかな曲線が含まれているため、長期間にわたって読みやすくなっています。欠点は、これらの曲線が画面上の小さいサイズでぼやけてしまい、読みやすさが妨げられることです。したがって、オンラインで見つけることができるガラモンの多くのレクリエーションにもかかわらず、画面のほとんどのデザイナーは、それが時代遅れになっていると信じています。そうは言っても、 EBガラモンドまだ別のことを考えて、オープンソースコミュニティでこの古典を活性化しようとしています。

米国を拠点とするフルタイムのフリーランスUIデザイナーが望んでいた

ガラモンの代替品をお探しの場合は、石鹸またはミニオン。

ジョージア

おそらく、Garamondの画面上の失敗などの書体に対応して、Matthew Carterは1990年代にマイクロソフトから、画面上の読みやすさのために特別に書体を設計するよう依頼されました。そしてジョージアが生まれました。

多くの人が、ジョージアはTNRなどの他の大量生産されたセリフのニュートラルな品質を欠いており、テキストに親しみやすく魅力的な品質を与えると信じています。したがって、カーターの印象的なデザインの偉業は、印刷面の魅力的な特徴を維持しながら、画面上の読みやすさの問題を解決することに成功したことです。

物語は、カーターが19世紀のフォントスコッチローマンの新しいバージョンに取り組んでいる間にジョージアを設計したということです。ジョージアは前任者の資質の多くを維持しています。ただし、画面用にジョージアを作成するために、カーターはいくつかの重要な変更を行いました。エックスハイトを増やし、数字を四捨五入し、キャラクターの感覚を維持するためにわずかなずれを作成しました。

ビジュアルデザインとグラフィックデザイン

ジョージアは現在クラシックとして確立されていますが、他の多くのセリフ書体よりもモダンな雰囲気があると広く考えられています。ミラーそして 4月同様の感触を持ち、良い選択肢です。

サンセリフ書体

さまざまなサンセリフ書体の例

Verdana、Gill Sans、Helvetica、Franklin Gothic、およびFuturaは、最も一般的に使用されるサンセリフ書体の一部です。

サンセリフ書体のスタイルは古代に最初に発生したと主張する人もいるかもしれませんが、19世紀まで、広く使用され、現代社会に正式に組み込まれていませんでした。広告、新聞、メディアが急成長するにつれ、遠くからでも明確な見出しとして読み取れるだけでなく、業界の新時代を代表する書体が必要でした。

ヴェルダナ

Verdanaは、いとこのジョージア州と同様の話を共有しています。どちらも90年代にMicrosoftのMatthewCarterによって設計されたためです。したがって、Verdanaは画面用に特別に設計されたサンセリフです。明瞭さを追求する多くのフォントと同様に、Verdanaは読みやすさを向上させるために大きなエックスハイトを備えています。 Verdanaは、ヒューマニストのサンセリフと呼ばれます。これは、セリフ書体の品質と設計ロジックの一部を維持していることを意味します。

ただし、Matthew Carterは、一部のテキストが画面に詰め込まれる可能性のある潜在的な制約スペースを認識していたため、Verdanaの文字サイズは、アプリや安定したリードのないプラットフォームでの詰め込みを回避するのに十分なバランスが取れています。 Verdanaは90年代に使用するように設計されていることを考えると、低解像度のデバイスでも特に効果的です。ただし、画面の品質が高くなると、Verdanaの長所が失われ、以前ほどのパフォーマンスが得られなくなります。

Verdanaを印刷で使用する場合、間隔が広いため、等幅タイプライターフォントの品質が得られます。この品質により、Verdanaは印刷物の大きなテキストには適していません。あなたが今代わりに考えるかもしれない代替案はコルファックスです。 Colfaxの設計者は、今日の書体デザインに機械的な制約がないことを考慮し、高解像度ディスプレイとインクジェット印刷の両方により適したフォントを作成しました。

ゲスタそして PT Sans どちらもVerdanaの優れた代替手段です。

フランクリンゴシック

フランクリンゴシックは、1902年にAmerican Type Founders（ATF）のMorris Fuller Bentonによって作成され、1970年代と1990年代にITCによってより多くのウェイトを含むように拡張された、現実的なサンセリフ書体です。書体のデジタルバージョンは、Adobe、International Typeface Corporation（ITC）、Monotype Imaging、およびURWによって作成されています。

ベントンが認めた元の書体は、ベンジャミンフランクリンへのオマージュとして設計されたものであり、本文の長いブロックよりも見出しや業界での使用に最も適していました。追加の重みとスタイルを使用した更新により、使用オプションが拡張されました。

フランクリンゴシックの時代を超越した品質は、最初のリリースから1世紀以上経った今でも、多くのメディアで人気があります。 TimeMagazineとTheNew York Timesはどちらもさまざまな見出しに使用しており、ゲームの米国版とカナダ版のスクラブルタイルにはそれがあり、凝縮版はスターウォーズ映画のオープニングクロールにも使用されていました。

フランクリンゴシックは今でも信じられないほど人気がありますが、人気のある代替品はニュースゴシックです。これは、ベントンのオリジナルの後継で人気があり、ビルドが狭く、ストロークのコントラストが低くなっています。他の選択肢は次のとおりですトレードゴシック、ベントンサンス、およびメープル。

未来

1927年にリリースされたFuturaは、最初の幾何学的なサンセリフ（ヒューマニストのサンセリフではなく）書体の直接の結果です。 Futuraの最大のライバルであるErbarGrotesk（1926年にリリース）は、20世紀の変わり目に学校が現代的であると感じたすべてのことを伝えることを目的として、非常に影響力のあるBauhausで設計されました。これは、幾何学的論理が装飾のヒントを排除し、作成された文字形式の純粋な論理を目指したことを意味しました。

Erbar Groteskと同様に、Futuraには、主に円を中心とした幾何学的形状に基づく文字形式が含まれています（ただし、円が適切でない場合は正方形や三角形も含まれます）。ストローク間のコントラストが低く、背の高い小文字のアセンダーと大文字の文字がローマ字の大文字と同様の比率を共有しています。そのデザイナーであるポール・レナーは、現代の書体は単に以前のデザインの繰り返しではなく、現代の感性を持つべきだと信じていました。

アポロ11号の宇宙飛行士がフーツラの月に盾を残したため、フーツラは20世紀の間に多くの名声を経験してきました。フォルクスワーゲンや他の多くのブランドがそれを採用しています。そして、スタンリー・キューブリックやウェス・アンダーソンを含むいくつかの映画製作者がそれを再利用しました。 Futuraのモダンな品質に感謝しているが、試してみることを検討して、少し使いすぎていることに気付いた場合 FFスーパーグロテスク、 HKグロテスク（オープンソース）、または現代。

ギルなし

タイムズニューローマンをもたらしたのと同じ書体ファウンドリであるモノタイプは、ロンドンのモダンな看板のフォントの作成をポリマスのエリックギル（彫刻家/タイプセッター/グラフィックアーティスト）に依頼しました。 Gill Sansは、Futuraとは対照的に、ドイツの同時代の人々よりも統制の取れていないスタイルのヒューマニストフォントです。「R」はわずかにフレア状になっており、「眼鏡」の小文字の「g」はほぼ象徴的です。フォントの自然な大胆な品質は、ディスプレイや見出しに適していますが、後でリリースされる軽量のウェイトは、本文に適しています。

書体のスタイルと書体の歴史

ギルサンはに基づいていますエドワードジョンストンの1916年「地下アルファベット」とは、の公式フォントです。ロンドン地下鉄。

ロンドン地下鉄、BBC、イングランド国教会での歴史に加えて、モダンでありながら人間的な品質により、書体は典型的な英国風になっています。フォントはプロポーションがクラシックですが、芸術的なフレアがいくつかあり、ドイツの厳格な対応物であるDINよりも明るくなっています。

とは言うものの、これらの芸術的なフレアの多くは、ギルサンを望ましくないものにしている人もいますグラフィックデザイナー。具体的には、小文字の「a」は、バランスが崩れ、読みやすさが損なわれていると批判されることがよくあります。

ギルサンの代替品をお探しですか？チェックアウト ITCジョンストンまたは P22地下。

ヘルベチカ

Helveticaは、独自の映画（2007）に影響を与えた唯一の書体です。これは間違いなく、今日最も有名でユビキタスなフォントです。このフォントは、広く普及しているGroteskフォントの新しいバージョンをめぐる50年代の広範な競争から生まれました。

Groteskフォントは、読みやすさを向上させるために徐々に進化してきました。ただし、すべての書体がハンドセットのライノタイプと機械式の両方でうまく機能するわけではありません。ライノタイプマシンでは、通常の文字と斜体の文字の両方を同じ幅に設定する必要がありました。そのため、斜体は広すぎ、通常は狭すぎます。

Helveticaは、デザイナーが大量生産のメリットを享受できるようにしながら、Grotesk書体のモダンな美しさと読みやすさを維持するために、アキュートアクセントを使用して特別に設計されました。「グラフィック57」見本市で最初にリリースされたこのフォントは、スイスのデザイン全体に普及しました。

Helveticaの優れた代替品となる他の書体には次のものがあります。メゾンノイエ、宇宙、および請求書。

等幅書体

等幅書体スタイルは、もともとタイプライター用に設計されました。このカテゴリの書体について理解する主な品質は、タイプライターが各文字を等間隔で入力する必要があることです。したがって、すべての文字はテキスト本文の単一の編成マトリックス内に配置されますが、他のフォントは読みやすさを管理するために間隔が異なることがよくあります。

最終的に、タイプライターのコンテキスト外では、等幅の書体を使用することが理にかなっているアプリケーションはほとんどありません。間隔が等しいということは、効率が低く、一般的に読みにくいことを意味します。この規則の例外は、コードを記述するために設計されたアプリケーションであり、等間隔で実際に読みやすくなります。

これらの例としては、Courier、Consolas、Letter Gothic、またはSource Code Pro（無料）があります。ただし、ノスタルジックな美学を否定できないデザイナーもいます。したがって、それらは人気があり続けます。

システム書体

システム書体は、デバイスまたはプログラムに付属しているものです。 Mac、Windows、さらにはAdobe製品にもさまざまなシステム書体があります。この記事に含まれているすべての書体には、システムフォントである少なくともいくつかのバリエーションがあります。

システムフォントを使用することにはいくつかの欠点があります。最大のものは、これらの書体が一般的に信じられないほど露出オーバーであるということです。それらはほとんどすべてのコンピューターに含まれているため、優れたデザインとひどいデザインの両方で、人々は毎日それらを目にします。すべての活版印刷プロジェクトが独創性の最先端にある必要はありませんが、あなたがデザインしているブランドの場合、それを理解することが重要です。ですユニークでオリジナルであるはずですが、システムフォントを使用すると、それが損なわれることがよくあります。

システムフォントを使用することのもう1つの大きな欠点は、一部のフォントがあまり良くないことです。 Arialが思い浮かびます…

最後に、多くのシステムフォントは、画面上で非常に読みやすいように特別に設計されており、印刷物では特に読みにくい場合があります。これは、設計者が行うすべてのプロジェクトで問題になるわけではありませんが、覚えておく必要のあることです。

デザイン作業に最適な書体の選択

特定のブランド向けにデザインする場合、特に一部の書体ファミリーのライセンスが1,000ドルを超える可能性があることを考慮すると、適切なプロの書体を選択することは、どのデザイナーにとっても重要な仕事です。

多種多様なウェイト、幅、さらにはセリフとサンセリフの両方のバリエーションを含む書体ファミリーを選択することは、多くのプロジェクトにとって賢明なアイデアです。これにより、デザイナーは特定のブランドのパイプラインをたどる可能性のあるプロジェクトに多くのオプションを提供し、実際にはそれほど変わらない（したがって、消費者やブランドの支持者に香を与える可能性が低い）「異なる」フォントを使用してマーケティング資料を更新することもできます。、主要なブランドからの多くの大規模な再設計で起こったように）。深いフォントファミリーは、それ自体と簡単に組み合わせることができ、さまざまな個性を持っています。

プロジェクトでより一般的に使用するために既存のタイプライブラリとペアにする書体を探すときは、同様の特性を持つフォントの選択に焦点を合わせてください。これは、キャップと小文字、エックスハイト、および形式的なジオメトリのすべての品質を考慮することを意味します。のようなサイトタイプウルフすでに利用可能な既存のオプションとペアにするフォントを見つけるために非常に貴重な場合があります（また、クライアントがHelveticaのようなものが欲しいと言ったときのための優れた代替手段ですが、間違いなくないヘルベチカ）。

基本を理解する

フォントの種類は何ですか？

フォントには、serif、sans-serif、monospaced、displayの4つの基本的なタイプがあります。これらの各タイプには、スクリプト、スラブセリフ、グロテスクなサンセリフ、古いスタイルなどの複数のサブタイプがあります。

ユーザーがテーブル内の特定のフィールドにのみアクセスする場合、どうすればパフォーマンスを向上させることができますか？

タイポグラフィとは何ですか？なぜそれが重要なのですか？

タイポグラフィは、書かれた言葉を視覚的に表現したものです。優れたタイポグラフィは、テキストの意味を強化し、読みやすく、読みやすくします。悪いタイポグラフィは、テキストを読みにくくしたり、間違った意味を伝えたりする可能性があります（Garamondのようなより正式なものではなく、法的文書でComic Sansを使用するなど）。