タイポグラフィーの歴史: グーテンベルク印刷機から Google Fonts まで

タイポグラフィとは、文字を読みやすく、読みやすく、視覚的に魅力的にするために活字を配置する芸術および技術であり、何世紀にもわたる豊かな歴史があります。

ヨハネス・グーテンベルクによる印刷機の発明から Google Fonts によるデジタル革命に至るまで、タイポグラフィーは時代の変化と技術の進歩を反映して継続的に進化してきました。

この記事では、タイポグラフィーの興味深い旅、そのマイルストーン、そしてデザインとコミュニケーションへの影響について探っていきます。

グーテンベルク革命

近代タイポグラフィーの歴史は、ドイツの鍛冶屋、金細工師、印刷業者、出版者であったヨハネス・グーテンベルクが 1440 年頃にヨーロッパに活版印刷機を導入したことに始まります。

Gutenberg

PrintMus 038

グーテンベルクの可動活字印刷の発明は書籍の製造に革命をもたらし、書籍をより入手しやすく、手頃な価格になりました。

彼の最も有名な著作であるグーテンベルク聖書は 1455 年に印刷され、可動活字を使用して印刷された最初期の主要書籍の 1 つと考えられています。

Gutenberg Bible on display at the U.S. Library of Congress

グーテンベルクの印刷機は、単語や文章を形成するために配置できる個々の金属文字、つまり活字を使用していました。 この革新によりテキストの大量生産が可能になり、ルネサンス期の知識と読み書き能力の爆発的な増加につながりました。

Metal movable text

金属活字

初期の印刷本で使用されていた書体は、当時の手書きの書体、特にブラックレターに基づいており、濃く、暗く、ややゴシック的な外観が特徴でした。

Gutenberg Bible B42 Genesis cropped

ルネッサンスと新しい書体の誕生

印刷がヨーロッパ全土に広がるにつれ、より読みやすい新しい書体の需要も高まりました。

ルネッサンス時代、書体デザイナーは古典的なローマの碑文にインスピレーションを得た書体を開発し始めました。

Garamond

この時代の最も重要な人物の 1 人は、16 世紀に Garamond 書体を作成したフランスの書体デザイナー、クロード・ガラモンです。

Garamond-claude

Garamond の書体は、その優雅さ、読みやすさ、バランスの良さで有名であり、今でも人気があります。

Claude Garamond Gros Canon image basic characters

18 世紀には、トランジショナルおよび モダン書体の開発により、タイポグラフィーにさらなる革新が見られました。

Baskerville

イギリスの印刷業者兼タイポグラファーのジョン・バスカヴィルは、太いストロークと細いストロークの間のより大きなコントラストと、より直立した文字形を特徴とするトランジショナル・スタイルを作成しました。

John Baskerville (1706–1775) by James Millar

Baskerville font sample

Bodoni と Didot

これに続いて、イタリアのジャンバティスタ・ボドニ

Bodoni portrait

Bodoni mostres

フランスのフィルミン・ディドットが、

Early Master Printers, Ambroise Firmin Didot, by R H Summer

Firmin Didot (7242027998)

ストロークの太さの極端なコントラストと、より機械的で幾何学的なデザインを特徴とするモダンなスタイルを開発しました。

産業革命と広告の台頭

産業革命はタイポグラフィーに大きな変化をもたらしました。

蒸気動力の印刷機などの新しい印刷技術の出現により、印刷はより速く、より効率的になりました。 この時期には、大胆で注目を集める書体が必要となる広告も隆盛しました。

これらのニーズに応えて、書体設計者は、スラブセリフやサンセリフなどの新しい表示書体を作成しました。

Two-Line Great Primer Antique No. 1

スラブセリフ書体は、19 世紀初頭にヴィンセント・フィギンズによってデザインされたものと同様、太いブロック状のセリフが特徴で、広告で広く使用されました。

Figgins Two-Line Great Primer Antique No. 1

Two Lines English Egyptian

サンセリフ書体はセリフをまったく持たず、すっきりとしたモダンな外観を提供しました。 最も初期かつ最も有名なサンセリフ書体の 1 つは、1816 年にウィリアム・カスロン 4 世によって作成されました。

William Caslon painting from Caslon specimen of 1915

Caslon Two Lines English Egyptian

デジタル時代とデスクトップ パブリッシング(DTP)

20世紀後半には、デジタル テクノロジーとデスクトップ パブリッシングの出現により、タイポグラフィーに新たな革命が起こりました。

パーソナル コンピュータと、Adobe IllustratorQuarkXPress などのソフトウェアの導入により、デザイナーは前例のない簡単さと精度で活字を作成および操作できるようになりました。

Apple II IMG 4214

Adobe Illustrator CC icon

Font Manager Palette in QuarkXPress 2024

この時代の重要な発展の 1 つは、Adobe Systems によって開発されたページ記述言語である PostScript の作成でした。

Adobe PostScript logo

PostScript により、テキストやグラフィックの高品質印刷が可能になり、デジタル フォント開発の基礎が築かれました。 TrueType および OpenType フォント形式の導入により、デジタル タイポグラフィの機能と多用途性がさらに強化されました。

Web タイポグラフィと Google フォントの台頭

インターネットが日常生活の至る所に浸透するにつれて、タイポグラフィーは新しいデジタル環境に適応しました。

初期の Web デザインは、ほとんどのコンピューターで使用できるフォントの数が少ないために制限されており、多くの Web サイトの外観が均一になってしまいました。 しかし、Web フォントの導入により状況は一変しました。

Google Fonts

2010 年に発売された Google Fonts は、Web タイポグラフィーの民主化において重要な役割を果たしました。

Google Fonts logo

https://fonts.google.com/

Web サイトに簡単に統合できるオープンソース フォントの膨大なライブラリを提供する Google Fonts により、デザイナーは幅広い書体を試して実装することができます。

これにより、Web サイトの美的品質が向上しただけでなく、読みやすさとユーザー エクスペリエンスも向上しました。

まとめ

タイポグラフィーの歴史は、人間の創意工夫と、書き言葉を通じてより良いコミュニケーション方法を絶え間なく追求してきた証です。

グーテンベルクの印刷機から Google Fonts のデジタル イノベーションに至るまで、タイポグラフィは新しいテクノロジーや文化の変化に適応しながら進化し続けてきました。

現在でも、タイポグラフィーはデザインの重要な側面であり、書籍や広告からウェブサイトやモバイルアプリに至るまで、あらゆるものに影響を与えています。

未来に目を向けると、タイポグラフィがどのように進化し続け、私たちが世界を読み、世界と交流する方法を形作るのかを想像するのはとても楽しいことです。

参考サイト

欧文書体の基本的な歴史と知識から学ぶことサンセリフ体編 | Swings
https://bulan.co/swings/sanselif_basic-knowledge_history
(2024年5月16日アクセス)

Toshi Omagari | ゴシックという名称の由来
https://tosche.net/jp/blog/origin-of-gothic
(2024年5月16日アクセス)

書体について学べる本

欧文書体―その背景と使い方 (新デザインガイド)

欧文書体―その背景と使い方 (新デザインガイド)

欧文書体―その背景と使い方 (新デザインガイド)

小林 章
2,750円(05/18 13:50時点)
Amazonの情報を掲載しています

「ゴシックMB101」に似たおすすめのフリーフォントをご紹介します!

モリサワの人気フォント、「ゴシックMB101」に似た、おすすめのフリーフォントをご紹介します。

ゴシックMB101とは

ゴシックMB101はモリサワの伝統的なフォントで、以下のような特徴があります。

  • 「ゴシックMB101」は、伝統的なゴシック体の流れを引き継ぐ、風格あるフォント。
  • 骨格がしっかりしており、ハネやハライの先端まで力強さと流れを感じさせるエレメント(要素)があり、親しみやすく信頼感がある。
  • 太いウエイトはタイトルやコピーに向き、肉声をイメージさせる骨太な表情で定評がある。
  • 細いウエイトは雑誌などの本文組みから中見出しといった幅広い用途に対応し、実力を発揮する。

参考:https://www.morisawa.co.jp/fonts/specimen/1197

ゴシックMB101は、LからUまでフォントのウェイト(太さ)が7段階用意されており、非常に使い勝手の良いフォントです。

しかし、使おうと思うとモリサワのフォントサブスクリプションサービスに加入することが必要となり、1年間で6万円程度の費用がかかります。(もちろん、他のフォントも使えますが。)

そこで、ゴシックMB101のようにウェイトが豊富で、使い勝手の良い日本語のゴシック体フォントをフリーフォントでご紹介します。

ゴシックMB101に似た、おすすめのフリーフォント

私がおすすめするゴシックMB101に似たフリーフォントをご紹介します。

似ている、という具合については、あくまでもデザイナーでは無い一般の方の目で見て、という範囲ですので、グラフィックデザイナーや書体デザイナーの方からすると完全に別フォントと思われるかと思います。

こちらのフォントです。

Noto Sans JP
https://fonts.google.com/noto/specimen/Noto+Sans+JP

Google Fontsにラインナップされている日本語のフォントです。

Noto Sans JPとは

  • NotoフォントはGoogleが開発したオープンソースのフォントファミリー。
  • 世界中のすべての言語と文字に対応することを目指している。
  • Noto Sans JPは日本語を含む多くの言語をサポートしている。
  • Noto Sans JPは、ウェブや印刷物など、さまざまなデザインプロジェクトで利用されている。

参考:https://fonts.google.com/noto/specimen/Noto+Sans+JP

ゴシックMB101とNoto Sans JPの比較

ゴシックMB101とNoto Sans JPの比較

ゴシックMB101は7ウェイト、Noto Sans JPは9ウェイトあるので、Noto Sansの方がウェイトが多いです。

ゴシックMB101/BとNoto Sans JP/ExtraBoldの比較

上の画像はゴシックMB101で最もよく使われるBのウェイト(太さ)とNoto Sans JPのExtraBoldの比較。

太さは近いですが、ゴシックMB101の方が「はね」や「はらい」、「打ち込み」などの形が強く出ており、古風な印象があります。

Noto Sans JPはゴシックMB101よりもクセが少なく、ニュートラルな印象です。

Noto Sans JPの入手方法

以下のWebサイトからダウンロードができます。
https://fonts.google.com/noto/specimen/Noto+Sans+JP

Get fontをクリック
Download allをクリック

ダウンロードしたらOS毎に適した方法でフォントを有効にします。

まとめ

モリサワの人気フォント「ゴシックMB101」に似たフォントをフリーフォントで探している方には、Google Fontsの「Noto Sans JP」は非常におすすめです。

モリサワの2023新書体「つぶてん」を使ってポップな雰囲気のイベントバナーをデザインしました

モリサワの2023年の新書体、「つぶてん」を早速使ってイベントのバナーを作ってみました。

「つぶてん」とは

明るく元気な印象の見出し用太ゴシック風デザイン書体です。コロコロとした印象のかなに安定感のある漢字を合わせており、可愛らしさの中に真面目さを感じさせます。動画テロップやパッケージ、ポスターの見出しなどで、キャッチーな印象を与えます。

つぶてん | 2023 モリサワ新書体 | 株式会社モリサワ https://www.morisawa.co.jp/topic/upg2023/detail/tsubuten/
引用:モリサワ公式サイト

「つぶてん」はとてもポップな雰囲気の書体です。

ウェイト(太さ)は「H」のみですが、漢字もしっかりセットになっています。

「つぶてん」を使ったデザイン

これを使って作ったのがこちらのイベントのバナーです。

百年(ペンニョン) at 高麗博物館
NOジェノサイドのワッペンをつくって、かたろう!
関東大震災朝鮮人虐殺と植民地主義
ミニレクチャー+ワークショップ

イベントのWebサイト

「つぶてん」を使ったバナー

どんなイベント?

私が参加している百年(ペンニョン)主催のイベントです。

大久保(東京都新宿区)の高麗博物館という場所で、NOジェノサイドの願いを込めたワッペンを作りながら、関東大震災で起きた朝鮮人虐殺事件と植民地主義についてかたりあおう、という内容です。

デザインのコンセプト

シリアスなテーマですが、できるだけ若いお客さんにたくさん参加してほしい、という思いがあったので、ポップなテイストでデザインをしました。

「つぶてん」は、可愛らしさがありながらも、しっかりとしたウエイトの太さで可読性も高いのでイベントのバナーにピッタリだと思いました。

背景のイラストは、様々な形のワッペンのシルエットをグラデーションをかけて入れることで、「多様性」を表現しています。

—–

今後も、色々なデザインで使ってみたいと思います。

私の“推しフォント”3選(2023年6月16日版)

グラフィックデザイナーの最近の私が最近、仕事やプライベートワークで良く使っている推しのフォント3選をご紹介します。

Avenir next

欧文サンセリフ体の推しはこちら、Avenir nextです!迷ったらこれを使っています。

Helveticaより特徴を出したくて、Universよりも親しみやすさや新しさを感じるデザインだと個人的には感じています。

Macにデフォルトで入っているフォントという点もデータの受け渡しに気を使わなくて良いのでかなりポイントが高いです。

あおとゴシック

以前本ブログでも、気になるフォントとして取り上げたモリサワの新しいゴシック体。

2020年に登場したフォントですが、良い意味で「透明」といえるニュートラルさ、そして、豊富にウェイトを展開しているので本文から見出しまでデザイントーンを揃える事ができます。

モリサワのゴシック体でウェイト展開が多いフォントは、これまで、新ゴ(UD含む)やMB101くらいでした。

これらのフォントは悪くないのですが、昔からあるフォントなのでさすがに、古さを感じていました。

そんな中、登場したこちらのあおとゴシック。

モリサワ純正のフォントなので、字形の追加や、バージョンアップなど、将来への安心度も高いです。

今後もガンガン使っていきたいと思います。

ヒラギノUD角ゴシック

UDのゴシック体ではこちらが推しです。

あおとゴシックが出る前は汎用性の高いフォントとして、本文や小見出しなどに使っていました。

和文はヒラギノベースなのでMacユーザーには見慣れた字形。それに加えて、このフォントは欧文が良いと思っています。

FrutigerやMyriad系列のデザインなので、洗練された印象が出ます。

合成フォントをしなくても和文と欧文の組み合わせが美しいので、プレゼンテーションボードや、デザインの解説文などに使用しています。


今回ご紹介する推しフォントは以上です。

もちろん案件に応じて非常にたくさんのフォントを使い分けするのですが、今回紹介した3つは、私が良く使うフォントといえば、、すぐに名前があがる3書体です。

フォント選びの参考になれば幸いです。

グラフィックデザイナーの私がオススメする「サンセリフ書体」10選

はじめに

タイポグラフィは、グラフィックデザインにおいて重要な役割を担っており、デザイントーンを設定し、メッセージを伝え、視覚的な魅力を高めます。

様々なフォントの中でも、サンセリフ書体はそのクリーンで現代的な印象から人気を誇っています。

今回は、グラフィックデザイナーである私がオススメするサンセリフ書体10書体を厳選してご紹介します。

これらの書体は汎用性が高いだけでなく、あらゆるデザインプロジェクトにおいてモダンさとエレガントさを与えてくれます。

それでは、珠玉の書体をご紹介します!

1. Helvetica(ヘルベチカ)

不朽の名作として知られるHelveticaは、多くのデザイナーに愛用されている書体です。

読みやすさとニュートラルさで知られるこの万能な書体は、ブランディングからウェブデザインまで、さまざまなデザイン分野で広く使用されています。

2. Gotham(ゴッサム)

大胆でありながら親しみやすい印象のGothamは、近年ますます人気が高まっています。

モダンな美意識を感じさせるこの書体は、印刷デザイン、パッケージ、デジタルインターフェースなど幅広い用途に適しています。

3. Avenir(アベニール)

Adrian FrutigerがデザインしたAvenirは、エレガントさと読みやすさのバランスが絶妙な、幾何学的なサンセリフ書体です。

すっきりとしたラインと均整のとれた字形で、見出しにも本文にも使える信頼性の高い書体です。

4. Futura(フーツラ)

Futuraは、シンプルさとモダンさを体現する幾何学的なサンセリフ書体です。

幾何学的な形と円形のストロークで知られるこの万能なフォントは、ロゴからポスターまで、さまざまなデザインの文脈で活躍します。

5. Proxima Nova(プロキシマ・ノヴァ)

Proxima Novaは、現代的なサンセリフ書体で、その多用途性と読みやすさで広く評価されています。

バランスのとれた字形と豊富なウェイトとスタイルで、印刷物にもデジタルプロジェクトにもシームレスに適応します。

6. Montserrat(モンセラート)

Montserratは、ブエノスアイレスの伝統的なMontserrat地区の看板からインスピレーションを得たオープンソースの書体です。

そのクリーンで幾何学的なデザインは、多数のウェイトとスタイルと相まって、見出しと本文の両方に優れた選択肢となります。

7. Roboto(ロボト)

元々Androidオペレーティングシステム用にデザインされたRobotoは、そのクリーンでモダンな外観から、多くのデザイナーに人気のある選択肢となっています。

このサンセリフ書体は可読性が高いため、ウェブデザインやモバイルインターフェースなど、さまざまな用途に適しています。

8. Gilroy(ギルロイ)

Gilroyは、独特の個性を持つ現代的なサンセリフ書体です。

洗練されたミニマルなデザインに加え、さまざまなウェイトと幅を備えているため、インパクトのある見出しやロゴの作成に多用途に使用できます。

9. Univers(ユニヴァース)

Adrian Frutigerによって作られたUniversは、汎用性と読みやすさで知られるクラシックなサンセリフ書体です。

ウェイトと幅のバリエーションが豊富で、さまざまなデザインプロジェクトに柔軟に対応することができます。

10. Lato(ラト)

Latoは、ヒューマニズムのサンセリフ書体で、その暖かく親しみやすい外観で人気を博しています。

印刷物でもデジタルメディアでも使えるので、ウェブデザイン、ブランディング、エディトリアルレイアウトなど、幅広いデザイン用途に適しています。

まとめ

サンセリフ書体の選択は、視覚的に説得力のある効果的なデザインを作るために不可欠です。

今回取り上げた10種類の書体は、汎用性、読みやすさ、モダンな美しさにおいて、グラフィックデザイナーに高く評価されています。

時代を超えたエレガンスさを持つHelveticaから、現代的な魅力を持つGilroyまで、これらのフォントは、デザイナーに幅広い選択肢を提供し、インパクトのあるデザインを生み出します。

ブランディング、ウェブデザイン、印刷物のいずれにおいても、これらの書体をデザインに取り入れることで、全体のビジュアルアピールを高め、印象に残るものにすることができます。

欧文書体―その背景と使い方 (新デザインガイド)

欧文書体―その背景と使い方 (新デザインガイド)

小林 章
2,750円(05/18 13:50時点)
Amazonの情報を掲載しています