タイポグラフィについて学習できる4つの海外Webサイト

タイポグラフィについて学習できる海外のWebサイトを4つご紹介します。

基本的には英語で書かれているのでGoogle翻訳などで訳しながら読んでみてください。

1. Typography.com

https://www.typography.com/

このサイトは、有名なタイプフェイスデザイン会社であるHoefler&Co.によって運営されています。

Newsの項目に、Hoefler&Co.のフォントが使用されている実例や、フォントの紹介などをかなり詳しく記事として書いてあります。Hoefler&Co.以外のフォントにも通じる内容だと思いますので、勉強になります。

2. Typewolf

https://www.typewolf.com/

このサイトは、世界中のWebサイトから最高のタイポグラフィを抽出して紹介しています。デザインのトレンドを通したフォントのペアリング(組み合わせ)や流行のフォントなどについて学ぶことができます。

私はこのサイトのメールマガジンを購読しています。有名なフォントに似ているGoogle fontsのフォントをまとめたPDFなどを購読特典として読めるようになるので、メルマガの登録がおすすめです。

管理人さんはTwitterでも頻繁に情報発信しているようですので、こちらもフォローしておくと良いかと思います。

3. Canva Design School

https://www.canva.com/designschool/

Canvaはデザインの初心者向けのツールであり、Canva Design Schoolはタイポグラフィやデザインの基本を学ぶためのチュートリアルを提供しています。ステップバイステップのガイドやビデオレッスンを通じて、基礎から応用まで学ぶことができます。

グラフィックデザイン、ブランディングなど、様々なデザインの講座があります。

タイポグラフィに特化しているのは以下でしょうか。

Typography & Layout – Design School
https://www.canva.com/designschool/courses/typography-and-layout/?lesson=understanding-typography-theory

とにかく動画がわかりやすい!

4. Fonts In Use

https://fontsinuse.com/

このサイトは、さまざまなデザインプロジェクトで使用されているフォントの例を提供しています。広告、本、ポスター、ロゴなど、さまざまなデザインプロジェクトにおいてどのようにフォントが使用されているかを見ることができます。

トップページの、写真とフォント名の組み合わせが非常にわかりやすいですね!

まとめ

これらのサイトは、タイポグラフィについて学ぶ上で非常に役立ちます。

興味のある方はぜひ、これらのサイトをチェックして、自分に合った学習リソースを見つけてみてください。

Header/ Stefan SchweihoferによるPixabayからの画像

【年5万円近く浮くかも!?】モリサワフォントに似たフォントを無料のGoogle Fontsで考えてみた!

デザイナー、特に印刷系の媒体を扱っているデザイナーであれば多くの方が契約していると思われるモリサワパスポート(Morisawa Passport)。

今度から新サービス、Morisawa Fontsに変わるようですが、年間で5万円と、決して安くは無い金額がかかります。もちろん、この価格であれだけたくさんのプロフェッショナル向けフォントが使い放題なので、それを考えると安すぎるくらいなのですが。。。

フォントにそんなにこだわらない、または、特にモリサワのフォントを使わなくても良い、というお仕事をされている方も多いと思うので、今回の記事では、モリサワの有名なフォントを、無料のGoogle Fontsで代用できないかを考えてみます。

1. スタンダード明朝体

豊富なウェイト(太さ)を揃え、オールマイティに使えるスタンダードな明朝体です。

【モリサワ】リュウミン

リュウミン/R-KL

モリサワの明朝体といったらこの書体です。

豊富なウェイトとニュートラルな表情が特徴です。

デザイナーでなくとも名前は聞いたことがあるという方も多いのではないでしょうか。

【モリサワ】黎ミン

黎ミン/R

モニターなどで見る横組みでの見やすさを意識して開発された現代的な書体です。

ウェイト展開が「グラデーション」と呼ばれるくらい細かく刻まれていて、なんと34書体もあります!

【Google Fonts代替】Noto Serif Japanese

Noto Serif JP/Regular

Google Fontsでリュウミンや黎ミンの代替で使用できそうなのはこのNoto Serif Japaneseだと思います。

オーソドックスな書体の場合、最も重視すべきはウェイトの豊富さです。

Noto Serif JPは7ウェイトあるので、本文から小見出し、大見出しまで柔軟に使用できます。

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

2. モダンゴシック体

【モリサワ】新ゴ

新ゴ/M

これもとても有名な書体です。フォント名としてはリュウミンよりも知られているのでは無いでしょうか。

機械的な印象もあるクールな書体。パンフレットなどでもよく見かけると思います。

【Google Fonts代替】M PLUS 1p

PLUS 1p/Medium

最近追加された書体ですが、これはかなり新ゴの代替として良さそうです!

新ゴの英数字は設計が古いので今見ると古さを感じてしまうのですが、このM PLUS 1pの英数字は、現代的なデザインになっているので、そのままで使うならこちらの方がモダンな印象になると思います。

M PLUS 1p
https://fonts.google.com/specimen/M+PLUS+1p

3. スタンダードゴシック体

新ゴよりもよりオールマイティに使えるゴシック体です。

【モリサワ】ゴシックMB101

ゴシックMB101/B

この書体は先にB/H/Uという太い方のウェイトから開発されて、後年になりL/R/M/DMといった細いウェイトが生まれた、という特徴的な書体です。

歴史があるだけあってB/H/Uという太いウェイトの完成度はかなり高いです。

【モリサワ】見出しゴ MB31

見出ゴMB31

こちらも歴史のある見出し向けゴシックです。MB101と異なり、こちらは1ウェイトだけです。

【Google Fonts代替】Noto Sans Japanese

Noto Sans JP/Black

Google Fontsで代替するとしたら、このNoto Sans Japaneseだと思います。

6ウェイトあります。

形もかなり良い感じなのですが、太さに関しては、MB101BとNoto Sans JPのBlackを比較すると、Noto Sansはやや細いです。

一番太いウェイトでもMB101よりはやや細い、という印象になります。さすがMB101は太いウェイトから開発されただけありますね。

Noto Sansでさらに太さを求める場合は、アプリケーション側で線幅で太らせるなどの調整が必要になります。

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

4. 丸ゴシック体

【モリサワ】新丸ゴ

新丸ゴ/DB

新ゴの丸ゴシック体バージョンです。

【Google Fonts代替】M PLUS Rounded 1c

Rounded Mplus 1c /Bold

M PLUSフォントの丸ゴシックです。新丸ゴよりもかわいい雰囲気になりますね。

結構特徴的なので、使いどころを選ぶかもしれません。

M PLUS Rounded 1c
https://fonts.google.com/specimen/M+PLUS+Rounded+1c

5. オールドスタイル明朝体

小説やエッセイなど、雰囲気が重視される媒体で使いたいオールドスタイルなあたたかみのある明朝体です。

【モリサワ】秀英明朝

秀英明朝/M

これもモリサワパスポートを代表する書体だと言えるのでは無いでしょうか。大日本印刷の伝統的な書体がモリサワのフォントとして提供されることは、当時とても話題になりました。

ただの復刻では無く、「平成の大改刻」として現代向けにリ・デザインされています。

【モリサワ】リュウミンM-KO(漢字はR-KL)

リュウミンM-KO

リュウミンの仮名のみの書体、オールドスタイルを表すOを含むR-KOをR-KLの漢字と合成フォントにしたものです。リュウミンKLよりも仮名がやわらかい印象になっています。

【Google Fonts代替】Zen Old Mincho

Zen Old Mincho/Bold

ZENオールド明朝は、1997年にリリースされたファンの多い書体です。

近年、突然Google Fontsに搭載されて話題になりました。

秀英明朝よりはリュウミンのKOにかなり似ていますね。ウェイトは3展開。とても美しい書体なので積極的に使ってみたいです。

Zen Old Mincho
https://fonts.google.com/specimen/Zen+Old+Mincho

6. オールドスタイルゴシック体

仮名などに味のあるゴシック体です。

【モリサワ】秀英角ゴシック銀

秀英角ゴシック銀/M

秀英明朝のゴシック体バージョン。

金と銀がありますが、私はこの銀の方が好きで、よく使います。

【Google Fonts代替】Zen Kaku Gothic New

Zen Kaku Gothic New/Medium

Google Fontsで近い書体はこちらのZen Kaku Gothicです。

明朝体は3ウェイトでしたが、こちらの角ゴは5ウェイトあるのでより使い勝手が良さそうです。

字形も、「の」の形などが非常に似ていますね。似ていない文字もありますが、こちらの書体もこの書体ならではの美しさがあります。

Zen Kaku Gothic New
https://fonts.google.com/specimen/Zen+Kaku+Gothic+New


いかがでしたでしょうか。

Google FontsもZenフォントなどが搭載されて、グッとバリエーションが増えた感じがします。

このようにまとめてみると、モリサワフォントのクオリティの高さを再確認すると共に、お仕事の内容次第ではGoogle Fontsの書体だけでも対応できそうな気もします。

他にもこんなフォントがある、などありましたらコメント欄などで教えて頂けると嬉しいです。


オススメのタイポグラフィ本

タイポグラフィ・ハンドブック 第2版

タイポグラフィ・ハンドブック 第2版

タイポグラフィ・ハンドブック 第2版

小泉 均, akira1975
4,620円(04/25 07:21時点)
Amazonの情報を掲載しています

For new designers! Easy to obtain, high quality Frutiger compatible fonts

This article is especially for new designers who are just starting out.

Frutiger font is popular among designers.

The typeface has been loved by many designers since its birth and has become a typeface that we see all around us because of its legibility and universally beautiful typeface design.

If you want to purchase the Frutiger font from the online store of Linotype, the distributor, you will have to pay from 3,991 yen per weight. If you want to purchase a set of all 19 weights, it will cost you 34,093 yen. (Prices as of February 9, 2019.)

Linotype’s Frutiger sales page (click on the image to jump to the site)

The price is not expensive considering that the font can be used for a lifetime after purchase. However, for a novice designer, it may be difficult to afford it because of other equipment that needs to be prepared.

Here are some compatible fonts that you can use instead when you want to use Frutiger, which are easily available from applications, OS bundles, and free Google Fonts.

type sample

Frutiger

First, here is the original Frutiger as a reference; Frutiger is called the “humanist sans serif”. The image shows the Frutiger LT series purchased from Lynotype.

Myriad Pro

Attached to Adobe paid applications such as Illustrator, Photoshop, CC (Creative Cloud), etc.

Fonts that become available after installing Adobe’s paid software.

Myriad’s letterforms are quite similar to Frutiger. The font is as rich in weights as the original Frutiger, making it an easy-to-use typeface.

I often use it when I want to use a typeface that looks like Frutiger, but I want to make a change from the original.

Lucida Grande

Standardized in Mac OSX

This typeface was the standard font for Mac until OSX 10.10.

Named after the word “lucid,” which means “clear” and “easy to understand,” the font was designed for high visibility when printed in small sizes or displayed on low-resolution screens. The font is designed for high visibility when printed in small sizes or displayed on low-resolution screens.

The font is very easy to read, but note that there are only two weight developments, Regular and Bold.

Calibri

Comes standard with Windows; included with Microsoft Office

These fonts are created by Microsoft and come standard in Windows, and are also available on the Mac when Microsoft Office is installed.

The letter skeleton is quite similar to that of Futura, but Calibri has slightly more rounded corners, giving it a softer look.

Tahoma

Standard for both Mac and Windows

Tahoma is a standard font for both Mac and Windows, also developed by Microsoft, and is quite similar to Lucida Grande.

Like Lucida Grande, Tahoma is available in only two weights, Regular and Bold.

Open Sans

Google Fonts: Free download from the following URL
https://fonts.google.com/specimen/Open+Sans

The fonts are from Google Fonts, an open source font service provided by Google, and can be downloaded and used free of charge.

Although the shape of the “g” differs from that of the original Frutiger, the numbers and other basic features are similar.

Ten different weights are available, making it easy to use from body text to headlines and creating a unified design tone.

Many of the fonts provided by Google Fonts are recent in age when they were designed, so the fonts have a new look.

Fira Sans

Google Fonts: Free download from the following URL
https://fonts.google.com/specimen/Fira+Sans

This font is also provided by Google Fonts.

Font developed for the famous web browser “Mozilla Firefox” and Firefox OS.

The weight range is quite extensive, with 18 different weights.

The similarity with Frutiger is not that high among the fonts introduced in this issue, in terms of the solidity of the number’s expression and so on. However, it has a more futuristic atmosphere, so I use it when I want to use a font that looks like Frutiger, but with a newer atmosphere.

Hind

Google Fonts: Free download from the following URL
https://fonts.google.com/specimen/Hind

Fonts provided by Google Fonts.

This Hind looks quite a bit like Frutiger! The numbers, the shape of the “g”, etc., are all so similar that unless you are a serious Frutiger fan, you would probably mistake the two side-by-side.

The Frutiger compatibility is very high, but unfortunately there are no italics, and only orthographic weights are used. If you need italics, you may need to use italic effects in your application.


The Frutiger-compatible fonts introduced here are all of high quality, although the similarity to Frutiger is different. Please use these fonts to improve your designs.

And by all means, buy the original Frutiger!

By using the real thing, you will realize why Frutiger is loved by so many designers.

Related Books

Adrian Frutiger – Typefaces: The Complete Works


私がデザイン業務で「欧文組版」をする際に参考にしている本・Webサイトを紹介!

普段使用している日本語と違い、ルールや作法に馴染みがうすい欧文での組版。

どんなにカッコイイデザインを作っても、英語圏の方が見たらありえないような文字組をしてしまっては、良いデザインとは言えません。

「正しく美しい」欧文組版をするために、私が参考にしている本とWebサイトをご紹介します。

Contents

書籍

Webサイト

書籍

欧文組版: タイポグラフィの基礎とマナー

欧文組版: タイポグラフィの基礎とマナー

新宿にある活版印刷会社「嘉瑞工房」の髙岡昌生さんによる欧文組版の解説書。

書体の選び方、文字間、ワードスペース(単語間)、組版の種類とルール、イタリック体やハイフンなど約物の扱い方まで、「正しく」「美しい」欧文組版の作法について丁寧に分かりやすく書かれています。

全ページ大変役に立つのですが、欧文組版の組見本に赤字を入れて添削しているコーナーが特に勉強になりました。

やりがちなミスや、基本的な文字の設定などについて知ることが出来て業務に役立ちます。

欧文やアルファベットの文字組をする機会がある方は持っておいて損のない一冊です。

〔増補改訂版〕 欧文組版: タイポグラフィの基礎とマナー

欧文書体 その背景と使い方

欧文書体 その背景と使い方

ドイツのフォントベンダー「ライノタイプ社」でタイプディレクターを務める小林章さんの著書。

代表的な欧文書体の種類とその歴史、使用シーンなど、書体にフォーカスした内容になっています。

BodoniやGaramondなど、名前は有名なフォントもその背景にある歴史や開発の目的を知ることで使う時の意識が変わってきます。

スクリプト体の効果的な使い方や、見出しと本文における2種類の書体の組み合わせまで、欧文だけでなく文字好き、フォント好きの人にとって楽しく勉強になる内容になっています。

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

タイポグラフィ・ハンドブック

タイポグラフィ・ハンドブック

当ブログで何度も取り上げている本ですが、欧文タイポグラフィについての教科書なので今回もご紹介します。

この本は他の本に比べて、より「レイアウト」についての内容が充実しています。

グリッドシステムや版面の作り方、ノンブル、柱などのページを構成する要素まで、欧文タイポグラフィを用いて高品質なデザインを作る際には大変参考になる本です。

タイポグラフィ・ハンドブック

アシンメトリック・タイポグラフィ

アシンメトリック・タイポグラフィ

ドイツ生まれ、スイス・バーゼルで活動した偉大なタイポグラファ・グラフィックデザイナー、ヤン・チヒョルト(Jan Tschichold )の著書「Typographische Gestaltung」を日本語訳した本。

書体の選択、組版の理論はもちろん、タイポグラフィを主体的に使用したポスターや本の表紙紹介・その構造の分析など、ニュー・タイポグラフィのムーブメントを代表するデザイナーであったチヒョルトさんならではの「グラフィック」な分析がふんだんになされている一冊。

文字だけでグラフィックを作りたいデザイナーの方には色やコンポジション(構成)の解説がとても役に立ちます。

アシンメトリック・タイポグラフィ

Webサイト

I Love Typesetting: InDesignによる欧文組版の基本操作その1

http://typesetterkon.blogspot.com/2011/05/indesign1.html

英文・和文・和欧混合の書籍デザイン・組版の仕事に、約25年以上たずさわられている Rose Toyoko Kon さんの欧文組版についてのブログ。

こちらのブログの「InDesignによる欧文組版の基本操作」の記事はハイフネーションやジャスティフィケーションの細かい設定まで書かれていてとてもわかりやすいです。

私が業務で欧文組版をおこなう時は、毎回こちらのブログ記事の内容を参考にして設定を作っています。

デザインの現場 小林章の「タイプディレクターの眼」

https://blog.excite.co.jp/t-director/

「欧文書体 その背景と使い方」の著者、小林章さんのブログ。

ドイツ在住の小林さんが街中やご自身の仕事などから印象に残った文字・書体を写真で紹介されているブログです。

欧文書体が実際にどのように使われているのかを、ライトな読み物として知る事ができます。

まとめ

日本にいるとなかなか馴染みの少ない欧文組版ですが、その分、しっかりとした文字組ができるようになるとクライアントからの信頼も厚くなると思います。

今回ご紹介した本やブログを参考に、皆様のお仕事に役立てて頂ければ嬉しく思います。

ヘッダー画像:Willi HeidelbachによるPixabayからの画像

2018年に業務で活用した実戦的なタイポグラフィ本5冊

2018年の1年間に私がグラフィックデザインの業務で活用した実戦的なタイポグラフィの本を5冊ご紹介します。

駆け出しのデザイナーさんや文字に興味がある方に是非参考にしてもらいたい珠玉の5冊です。

1. 定番フォント ガイドブック

和文・欧文の定番フォント、和欧混植のフォントなど約700種類の定番フォントの組見本を収録したガイドブック。タイトル向けの大きいサイズ、本文用の小さいサイズ、五十音、記号、アルファベットなどの組見本を掲載…

Amazon – 商品の説明より

定番のフォントの書体見本が掲載されている本。業務でフォントを選ぶ時は、スケジュールの都合上、時間が無い時も多いので、こういった本の形になっているとパラパラとめくって、案件に合ったフォントを見つける事が出来ます。

自分のアンテナだけだと、どうしてもいつも使うフォントが偏ってきてしまうので、デザイン表現の幅を広げるという意味でも持っておくと良い一冊です。

おすすめ度:8点

2. 欧文組版 組版の基礎とマナー

『欧文書体』『欧文書体2』に続く、「タイポグラフィの基本BOOK」シリーズ第三弾。デザイナー、編集者、企業担当者向けに、実務的な欧文の組み方を指導した本。実際にコンピュータ上で欧文を組んでみる練習問題や、欧文を組むときの具体的な19の注意事項などを掲載。デザイナーが組む機会の多い名刺、レターヘッド、招待状などの組版事例や海外のいい組版事例も多数掲載…

Amazon – 商品の説明より

昨年くらいから業務で欧文の組版をする事が増えたので、前から持っていた本ですが、再度、制作時に熟読しています。英語がネイティブの国では無いので難しい部分もありますが、出来るだけ、英語圏の人が見てもおかしくないようなデザインにしたいので、こちらの本はとても頼りになります。

長い英文を組む機会の無い方でも、キャッチコピーなどで欧文を扱う事は多いと思うのでそういった時に、やはりこの本を一冊持っておいた方が良いと思います。

おすすめ度:9.5点

3. タイポグラフィ・ハンドブック

★欧文書体・組版(タイポグラフィ)のすべてが分かるハンドブック
★著者自ら組版も手がけた、まさに本そのものが「お手本」

Amazon – 商品の説明より

2016年の記事でもご紹介している一冊ですが、今年も何度となく参照してきたので再びご紹介します。

2016年に私が最も助けられたデザイン書トップ3

まさにタイポグラフィ本のマスターピース

紙や印刷媒体のみならず、文字を扱う全てのデザイナー必携の一冊です。

アルファベットの文字の構造、書体の種類、欧文組版の基礎、グリッドシステム、レイアウトフォーマット、伝統的な欧文書体のリストなど、文字を理解して使うための情報が凝縮されています。

タイポグラフィや文字組に苦手意識がある方でも、この本を熟読すればほぼ間違いなく上達出来ると思います!まだ読んでいない方はぜひ!!

おすすめ度:10点

4. 文字組デザイン講座

2012年よりデザインノートで連載した「文字組デザイン講座」を再構成し、大幅に加筆修正して工藤流の「文字組方法論」を多角的に解説した一冊。…(中略)…本書を隈なく紐解くことにより、グラフィックデザイナーとしての文字組の知識やスキルが確実にアップするプロ必携の一冊だ。

Amazon – 商品の説明より

グラフィックデザイナー、デザイン実験室主宰の工藤強勝氏による著書。こちらも以前の記事でも紹介しています。

『文字組デザイン講座』by 工藤強勝:超マニアックな文字組本が発売されました!

私が考える本書のポイントは、以下のような点です。

point 1. 実際の仕事で制作されたデザインを作例としている

こういったデザイン解説書では、本の為に作例を作っている様な物も見かけますが、その場合、仕事で制作されたデザインではないため、クオリティが今ひとつだったりします。

ところが、この「文字組デザイン講座」は、トップデザイナーの工藤氏が実際に仕事で制作した本や雑誌のデザインを、本人が分析しているのでクオリティは勿論のこと、超実戦的な内容になっています.

point 2. 判型が大きくて見やすい

本の判型(サイズ)が、天地286mm × 左右222mmのA4変形で大きいです。

本書は、工藤氏がスタッフに渡す指定紙と呼ばれるデザイン指示書を分析しながら解説していくスタイルで進むのですが、判型が大きいおかげで指定紙に書かれた緻密な指示(フォントやレイアウト、色など)を細部まで読み取る事ができます。

ルーペなどを使用して、指定紙に書かれている手書きの指示も読み込んでいったら、ものすごい量のデザインのノウハウを身につける事ができます。

point 3. 価格が安い

このサイズでオールカラー159ページ、この内容で2400円+税という価格はとても安いです。

本の紹介文ではプロのグラフィックデザイナー向けと書かれていますが、デザインを勉強中の学生さんにも十分買える値段ではないでしょうか。

情報の密度もものすごく高いので、デザイナーではないけど文字や本が好き、という方でも楽しめる内容だと思います。

おすすめ度:9.5点

5. Otl Aicher(オトル・アイヒャー作品集)

ドイツのデザイナー兼教育者、Otl Aicherは、20世紀のグラフィックデザインのパイオニアであり、数多くの企業のヴィジュアルアイデンティティとサインシステムに関する仕事で有名です。 この本は重要な記録資料を元に、Aicherの知的で重要なデザイン哲学を紹介しています。

Amazon – 商品の説明をGoogle翻訳で意訳

最後の1冊は変わり種、ドイツのグラフィックデザイナー、Otl Aicher(オトル・アイヒャー)のグラフィックデザイン作品集です。

20世紀ドイツを代表するグラフィックデザイナーとして、ドイツのルフトハンザ航空のロゴマークやミュンヘンオリンピックのサイン・ピクトグラムシステムRotis書体の開発など、後年のタイポグラフィデザインやインフォグラフィックスに大きな影響を与える仕事をしてきた偉大なデザイナーです。

本書にはポスターの作品もたくさん収録されていて、シンプルかつひと目を引く仕掛けを施されたデザインで見ていてとてもワクワクします。

洋書でボリュームもあるので、これまでの4冊に比べると値段は高いですが、グラフィックデザインに興味があるなら持っていて損は無い一冊だと思います。

おすすめ度:7.5点

どの本も、読んでみて損の無い内容です!