webデザインの勉強

【Adobe fonts】webデザイナーおすすめ欧文フォントまとめ〜20選以上〜

【Adobe font】webデザイナーおすすめ欧文フォントまとめのブログのバナー

デザインをしている時に「フォント何使おう。。。」って誰もが悩むところだと思います。

デザインをしている方は「Adobe Fonts」からダウンロードされることが多いかと思いますが、たくさん種類があるので迷いますよね・・・

そんな方(自分も含め)に向けて、使いやすくておすすめの素敵なアドビフォントを20種類以上まとめてみました!随時更新していきます^^

フォントの印象実際に使ったデザインの例なども合わせてご紹介していきます!

▼ピンタレストで保存してね📌♡【Adobe fonts】webデザイナーおすすめ欧文フォントまとめのピンタレストの画像

日本語フォントはこちら♪

【Adobe font】webデザイナーおすすめ日本語フォントまとめ〜26選〜のブログのバナー
【Adobe fonts】webデザイナーおすすめ日本語フォントまとめ〜26選〜デザインをしている時に「フォントどうしよ〜」って誰もが悩むところだと思います。 デザインをしている方は「Adobe Fonts」か...
shio
shio
それでは早速いきましょう♪

セリフ体

Garamond Premier Pro

adobefont「Garamond Premier Pro」の画像

Garamond (ギャラモン)は、オールド・ロマンを代表するフォントで歴史が長く、伝統的なフォントです。
フランスの活字彫刻師ギャラモンさんの書体で、細かい部分まで複雑で特徴的なフォルムをしています。

  • クラシカル高級エレガント強めな印象
  • 見出しなどで大きく使うシーンで活躍

「ロクシタン」などに使われています。(以前Appleにも使用されていました。)

▼インスタのGaramond使用の画像

garamond使用のビのインスタの画像
shio
shio
インスタでよく使ってます♡
良かったら、覗いてみてください
▶︎@shio_designer

Trajan Pro 3

adobefont「Trajan Pro」の画像

TRAJAN(トレイジャン)は、石碑にノミで刻まれた文字が起源となっています。

「Q・J」などの足に見られる長い字画が特徴的。美脚!
小文字はありません。

  • 厳格伝統的な印象
  • 映画タイトルなど印刷物との相性が良い◎

「TITANIC」など海外映画のタイトルで多様されています。

▼こちらのブログのアイキャッチで使用しました

6月の活動記録〜web制作会社に勤めて1年・ブログも頑張る〜の画像
6月の活動記録〜web制作会社に勤めて1年・ブログも頑張る〜の画像
webデザイナー6月の活動記録〜制作会社に勤めて1年・デザインブログを書く〜こんにちは! 今回は久しぶりにwebデザイナーとしての活動記録のブログです。 web制作会社に勤めて1年 今月でweb制作...

Mrs Eaves

adobefont「Mrs Eaves」の画像

MrsEaves (ミセス・イーヴス)はフォントを作った奥さんの名前だそうです!素敵ですね。
とても優しい雰囲気で、フォントファミリーも充実しています。

  • 上品・高級感もあるし、丸みがあり可愛らしく女性的で、親しみやすい
  • 女性ファッションやwedding関係のフォントにぴったり
  • 注意を引きたい部分・ゆっくり読んでほしい部分に使える

Athelas

adobefont「Cantoni Pro」の画像

Athelas(アセラス)は、本文での使用を目的とされたフォントなので、クセもなく読みやすく、シンプルです。
綺麗な形なので高級感も出ます。

  • クセが少なく本文向き
  • どんなデザインにもマッチ!
  • 数字が特徴的で強調できるフォント

▼こちらのブログのアイキャッチで使用しました

webデザイナー9月の活動記録ブログ〜商品バナーや婚姻届けデザインしました〜の画像https://watashino-design.com/memory2021-9/

Didot

adobefont「Didot」の画像

Didot(ディド)は、書体の細い部分と太い部分のコントラストが強く、特にセリフ部分が細いのが特徴的です。
点の部分やJやyの先の丸まったところが可愛らしいです。

手書き感を弱めて幾何学的な直線や曲線を入れることで、当時のトレンドの書体にし、モダンな雰囲気が出ています。

※細い部分はかなり細いので、小さいと読みづらいです。

  • 女性的で優美・華やか
  • 幾何学的でモダンな印象

女性向けハイブランド系のロゴや見出しなどによく使われている

▼こちらのブログのアイキャッチで使用しました

7月の活動記録〜webサイト公開ラッシュ・ブログを書く〜の画像https://watashino-design.com/memory2021-7/

▼こちらのバナーでも使用

サンセリフ体

Nimbus Sans

adobefont「Nimbus Sans」の画像

Nimbus Sansは「Helvetica(ヘルベチカ)」に似ていることで有名なフォント。

  • ベーシックでクセの少ない書体

ちなみに似ているHelveticaは、『MUJI』『evian』『THE NORTH FACE』『TOYOTA』などで使用されています。

DIN 2014

adobefont「DIN 2014」の画像

DIN(ディン)はデザイン業界で人気の有名フォントです。
もともとは工業用につくられたフォントで、海外の道路標識などでよく使用されています。

  • 長方形で飾り気のない書体
  • 現代的クールな印象
  • 視認性に優れている

UNIQLO」のロゴのもとになっていたり、「東京オリンピック2020」などにも使用されています。

佐藤可士和展のユニクロのロゴの画像 佐藤可士和展のユニクロのロゴの画像 佐藤可士和展のユニクロのロゴの画像
shio
shio

佐藤可士和展に行った時の写真です。
ユニクロのロゴが展示されていました。
スッキリしていて綺麗な素敵なロゴだな〜としばらく眺めてしまいました。

▼こちらのブログのアイキャッチで使用しました

Adobe ccの1番安い購入方法|社会人デザイナーが契約するコンプリートプランのアイキャッチ画像
Adobe ccの1番安い購入方法・比較|社会人デザイナーが契約するコンプリートプラン

webデザイナー10月の活動記録〜バナー作成スピードUP!ブログpv数UP!〜の画像

Futura PT

adobefont「Cantoni Pro」の画像

Futura(フーツラ)は、コンパスで書いたような幾何学的な形をしており、
特徴は、ほぼ正円な「O」や大文字のような小文字の「U」。
正円や三角形・正方形をベースに作られている。

Futuraは“未来”という意味。
アポロ11号の銘板の文字にも使用されていたそうです。

  • 清潔感高級感があり、ファッションブランドや化粧品などで使える
  • 現代的幾何学的な美しさ

日本でも「GU」「Smap」などあちらこちらで使われている王道書体です。

▼こちらのブログのアイキャッチで使用しました(Canva部分)

canvaでプロフィールリンクをデザインしました。インスタやsnsに貼れる!のアイキャッチ画像

Alternate Gothic

adobefont「Alternate Gothic」の画像

Alternate Gothicは、縦長で横幅が狭くスマートシンプなフォントです。

  • 太目なため視認性
  • シンプルで読みやすい

「YouTube」ロゴのベースとして使用されています。

Century Gothic Pro

adobefont「Century Gothic Pro」の画像

Century Gothic(センチュリーゴシック)は、直線的な部分や丸みが共存しているので、FuturaやAvant Garde Gothicと似ているフォントです。

Futuraよりも丸みがあるのでカジュアル優し印象になります。
Futuraの妹って感じがします♪

  • 幾何学的なフォント
  • 丸みが強いので、ガーリーなデザインに使えそう
shio
shio
幾何学的なデザインのサンセリフ体を「ジオメトリックサンセリフ」というそうです。

Quicksand

adobefont「Quicksand」の画像

Quicksandは、丸みが可愛らしいシンプルなフォントで、親しみやすさカジュアルな印象を与えます。
ウェイトの種類が豊富です。

  • 丸みが可愛い!
  • 親しみやすさ・カジュアルな印象
  • ウェイトをすると…ポップ
  • ウェイトをすると…可愛すぎずエレガント

Acumin Pro

adobefont「Acumin Pro」の画像

Acuminは、ウェイトが豊富で、上のように細くしてもバランスの良いフォントです。
クセがなくHelveticaにも似ています。

  • 細いフォントを使用したいときにおすすめ!

poiret one

adobefont「poiret one」の画像

poiret oneは、1度見たら忘れられないクセの強いフォント。
丸っこくって、小文字の「e」は回転していて、遊び心のある可愛いフォントで個人的に好きです。

数字も可愛い。「8」はスタイルの良い雪だるま感☃がとても好きです。

  • 丸みのあるフォント
  • オリジナリティを出したいときに^^

Dunbar Low

adobefont「Dunbar Low」の画像

均一な太さで、形が綺麗なフォント。

▼こちらのブログのアイキャッチで使用しました

ネイルの記録〜2020上半期〜のバナー
ネイルの記録〜2020上半期〜ネイルができなかった保育の仕事を辞めてから、ネイルが趣味になりました♡ 今年に入ってから写真を撮り溜めていたので、記録用にまとめて...

Brandon Grotesque

Brandon Grotesque(ブランドン・グロテスク)は最近お気に入りのフォントです!
webサイトに使われていて、シンプルだけど可愛いフォルムに一目惚れしました😍

▼使用例

  • ロゴデザインや見出しにおすすめ!
  • 角が丸くなってるので洗練されているのにカッチリしすぎない
  • シンプル・可愛い・おしゃれ・親しみやすい

私は太字で文字間をゆったりとって使うのが好きです。

筆記体

個人的に筆記体はフォントの中で特に好きなので、たくさんアクティベートしてあります^^
中でも一般的に使えそうなフォントとお気に入りのフォントをご紹介します!

Shelby

adobefont「Shelby」の画像
  • 女性デザイナーの手書きカリグラフィがもとになっている
  • ポップだけど少し大人びた印象

Renata

adobefont「Renata」の画像
  • 優雅でおしゃれ
  • 太い部分と細い部分があり、女性的

Adobe Handwriting

adobefont「Adobe Handwriting」の画像
  • 欧文の手書フォント「Handwriting」
  • かすれ具合がおしゃれ
  • 綺麗で読みやすい手書きなので、日本語フォントの「花とちょうちょ」と同じような雰囲気

▼「Handwriting」を使用したブログのアイキャッチ

webデザイナー11月の活動記録〜新規webサイトエオ3つデザイン!〜の画像

 

Sheila

adobefont「Sheila」の画像
  • 書き出しの吹き溜まりが特徴的
  • 手書きっぽいけど上品な印象

Cantoni Pro

adobefont「Cantoni Pro」の画像
  • くるんと丸まっている形が特徴的
  • 文字が踊っているような印象

Adorn Garland

adobefont「Adorn Garland」の画像
  • ひとつ前の「Cantoni Pro」と少しだけ雰囲気が似ている
  • 横長で大人女子向けな雰囲気

▼weddingデザインにもおすすめ!

友人にプレゼントした婚姻届のデザインの画像

Duos Round

adobefont「Duos Round」の画像
  • とっても柔らかい雰囲気

▼使用例

「ほんとに、フォント。」で勉強したデザインの画像(ファッションデザイン)

Professor

adobefont「Professor」の画像
shio
shio
オーガニック系カフェとかにぴったりですね!

▼使用例

「ほんとに、フォント。」で勉強したデザインの画像(カフェデザイン)

その他

Cheap Pine

adobefont「Cheap Pine」の画像
  • 手書き感・立体感がおっしゃれかっこいい
筑紫b丸ゴシックを使用したバナー画像

ProvidenceSans

adobefont「ProvidenceSans」の画像
shio
shio
このフォント可愛くないですか???
手書きっぽくて、幼さ・可愛らしさがあって、絵本に使われてそう。。。
ひとつひとつの形が味があって、ずっと見ていられます。
個人的に大好きなフォントです!
見つけた瞬間即アクティベートしました🥺♡

早速使ってみました♪

バナー制作実績【2021年秋】| webデザイナーshioの画像
バナー制作実績【2021年秋】| webデザイナーshioの画像
商品バナーの制作実績 | webデザイナーshio【2021年秋】こんにちは^^ 最近デザインした商品バナーが増えてきたので、ここで一度まとめてみました。 2021年秋の制作実績です。 制作実...

gが特徴的ですね^^

shio
shio
adobeに登録すると紹介した以外にもたくさんのフォントが使えるようになりますよ!

\ オンライン講座もついているのに、adobeを安く購入できます! /

私もデジハリONLINEを利用してます^^🌿
詳しくはこちらの記事で▼

Adobe ccの1番安い購入方法|社会人デザイナーが契約するコンプリートプランのアイキャッチ画像
Adobe ccの1番安い購入方法・比較|社会人デザイナーが契約するコンプリートプランこんにちは、webデザイナーのShioです^^ Adobe製品は価格がなかなか高いので、購入するのを躊躇される方が多いかと思います。 ...

おわりに

どのフォントも素敵で、「素敵な作品だなぁ〜」とあらためてじっくり観察してしまいました。
推しフォントは見つかりましたか?
他にも素敵なフォントがたくさんあるので、ぜひadobe fontでフォントをいろいろアクティベートして使ってみてください^^

フォントの参考書の紹介

私は欧文フォントの勉強として『となりのヘルベチカ』を読みました!
新しい発見があったり、フォントを擬人化して物語を通して学ぶので、分かりやすいし学びが定着しやすいと感じています。

日本語フォントは『フォント辞典』で、勉強しています。
事例もついているのでありがたい!お気に入りの1冊です♡

『ほんとに、フォント。』もおすすめです^^
日本語と英語の組み合わせなど参考になりました!

日本語フォントはこちらの記事でご紹介しているので、良かったら読んでみてくださいね♡

【Adobe font】webデザイナーおすすめ日本語フォントまとめ〜26選〜のブログのバナー
【Adobe fonts】webデザイナーおすすめ日本語フォントまとめ〜26選〜デザインをしている時に「フォントどうしよ〜」って誰もが悩むところだと思います。 デザインをしている方は「Adobe Fonts」か...

▼Google fonts のまとめはこちら

【Google fonts】webサイトに使えるおすすめ日本語フォント〜10選〜の画像
【Google fonts】webサイトに使えるおすすめ日本語フォント(無料)〜10選〜こんにちは!webデザイナーのshioです^^ webサイトのデザインで、フォント選びはデザインを左右する重要な工程ですが、何を使...
【Google fonts】webサイトに使えるおすすめ欧文フォント〜20選以上〜の画像
【Google fonts】webサイトに使えるおすすめ欧文フォント(無料)〜20選以上〜こんにちは!webデザイナーのshioです^^ webサイトのデザインで、フォント選びはデザインを左右する重要な工程ですが、何を使...

では、また!

webデザイナー|Canva公式クリエイター
shio
webデザイナーshioのアイコン
*月7000人が読んでるデザインブログ運営 *ナチュラルな婚姻届を心を込めて制作 webデザイナーを目指したい方向けに、 【勉強方法|転職活動|ポートフォリオ制作|制作会社で働いてからのこと|webサイト制作 etc... 】について発信しています。 このブログとともにwebデザイナーとして成長していきます!
\ Follow me /
webデザイナーの就職活動で使うポートフォリオのバナー