WEBデザインで良く使うフォント一覧

Figmaで良く使うフォントのサムネイル画像
目次

ゴシック・Sans体

Noto Sans JP

Googleフォント(無料)のwebフォント。webフォントのため全てのデバイスに対応し、見え方を統一できる。

YuGothic(游ゴシック)

MacとWindowsで共通のシステムフォント。しかしMacとWindowsで見え方が若干異なるの点が曲者。

BIZ UDPGothic

Googleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/BIZ+UDPGothic

FOT-筑紫B丸ゴシック Std(FOT-TsukuBRdGothic Std)

Adobeフォント・日本語対応。英文フォントは見出しに向いている。Sans体というよりもsans-serif体に近いかもしれない。

M PLUS 2

日本語対応のGoogleフォント。やわらかく、ポップな印象。

M PLUS 2:日本語対応のGoogleフォント。やわらかく、ポップな印象。

Mplus 1p

日本語対応のGoogleフォント。やわらかく、ポップな印象。公式サイトは下記のとおり。

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

Mplus 1p: 日本語対応のGoogleフォント。やわらかく、ポップな印象。

Sawarabi Gothic

日本語対応のGoogleフォント。

Sawarabi Gothic:日本語対応のGoogleフォント。

Kosugi

日本語対応のGoogleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/Kosugi?subset=japanese&query=kosugi

Kosugi

Murecho

英文Googleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/Murecho

Murecho:英文Googleフォント。

ZEN角ゴシック|Zen Kaku Gothic New

日本語対応のGoogleフォント。公式サイトは下記のとおり。

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

ZEN角ゴシック|Zen Kaku Gothic New

Zen Kaku Gothic Antique

日本語対応のGoogleフォント。MidiumとBoldが使いやすい。公式サイトは下記のとおり。

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

Zen Kaku Gothic Antique|日本語対応のGoogleフォント

Zen Maru Gothic

日本語対応のGoogleフォント。丸ゴシック体。

Zen Maru Gothic:日本語対応のGoogleフォント。丸ゴシック体。

Kiwi Maru

日本語対応のGoogleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/Kiwi+Maru?subset=japanese&noto.script=Jpan

Kiwi Maru

Kosugi Maru

日本語対応Googleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/Kosugi+Maru

Kosugi Maru:日本語対応Googleフォント

Proxima soft

英文フォント・Adobeフォント。丸ゴシック系。かわいい雰囲気の商品ロゴ等に向いているかもしれない。

AB Tombo Bold

Adobeフォント・日本語対応・見出し・あしらい用フォント。白抜き文字は塗りを無し、線を0.5-1pxに設定する。

AB Tombo Bold

All Round Gothic

英文フォント・Adobeフォント。

All Round Gothic

Advent Pro

英文フォント・Googleフォント。

Advent Pro

DIN Condensed

見出し向け英文フォント。

DIN Condensed

Josefin Sans

見出し向けの英文フォント・Googleフォント。見出しの他に、価格等の数字表示等にも使いやすい。公式サイトは下記のとおり。

https://fonts.google.com/specimen/Josefin+Sans

Hei

アルファベットの大文字が美しい見出し向きのフォント。小文字を見出しに使う場合はFigmaで線幅を0.5pxに設定すると良い。日本語にも対応している。

Hei

Archivo Narrow

可読性の良いあしらい文字または見出し向けの英文フォント。

Archivo Narrow

明朝・sans-serif体

Noto Serif JP

明朝体のGoogleフォント

Noto Serif JP: 明朝体のGoogleフォント

Zen Old Mincho

見出しに向いている。日本語対応のGoogleフォント。

https://fonts.google.com/specimen/Zen+Old+Mincho?subset=japanese&noto.script=Jpan

Zen Old Mincho

Ten Mincho Text(貂明朝テキスト)

Adobeフォント・日本語フォント。Regulaとイタリックのみ。

DNP 秀英明朝 Pr6N| DNPShueiMinPr6N

高級感のある明朝体のAdobeフォント

DNP 秀英明朝 Pr6N:高級感のある明朝体のAdobeフォント

Shippori Mincho

日本語Googleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/Shippori+Mincho?subset=japanese&noto.script=Jpan

Shippori Mincho: 日本語Googleフォント

YuKyokasyo(游教科書体)

日本語フォント。MacOS搭載フォント。

Zen Antique Soft

日本語対応Googleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/Zen+Antique+Soft?query=zen

Zen Antique Soft: 日本語対応Googleフォント

Sawarabi Mincho

日本語対応Googleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/Sawarabi+Mincho

BIZ UDPMincho

日本語対応Googleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/BIZ+UDPMincho?query=mincho

BIZ UDPMincho:BIZ UDPMincho

Hina Mincho

日本語対応Googleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/Hina+Mincho

Hina Mincho:日本語対応Googleフォント

New Tegomin

日本語対応Googleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/New+Tegomin

New Tegomin:日本語対応Googleフォント

Kaisei Decol

ちょっと癖のあるserif体のGoogleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/Kaisei+Decol

Kaisei Decol |Googleフォント

Adobe Garamond Pro

Adobeフォント・英文フォント。

Adobe Garamond Pro

Cochin(コシャン)

エレガントな雰囲気の英語フォント。

Cochin

Cormorant Garamond

エレガントなserif体のGoogleフォント。欧文専用。公式サイトは下記のとおり。

https://fonts.google.com/specimen/Cormorant+Garamond

Cormorant Garamond|Googleフォント|serif体|欧文専用

Halant

高級感のあるserif体のGoogleフォント

Halant:Googleフォント

Baskerville

高級感のフォント。フリー。モリサワ・Adobe・Googleに近い名称の派生?フォントがある。

Baskerville

Sorts Mill Goudy

Googleフォント:高級感のある英文フォント

Sorts Mill Goudy:Googleフォント:高級感のある英文フォント

毛筆体

Xingkai SC(読み:シンカイ・エスシー?)

Mac OS搭載の毛筆体フォント。漢字のbold体がタイトル等のあしらいとして使いやすい。

Xingkai SC:毛筆体フォント

Yuji Mai

日本語対応の毛筆体フォント。漢字がロゴやタイトルのあしらい等に使いやすい。太さはレギュラー一種類のみ。

Googleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/Yuji+Mai

Yuji Mai:毛筆体フォント

筆記体

Pacifico

あしらい文字向け。

Pacifico:あしらい用フォント

Adobe Handwriting

英文専用のAdobeフォント。あしらい用。

Adobe Handwriting

Beloved Script

英文専用のAdobeフォント。あしらい用。

Beloved Script

The Secret

可読性は低いが、あしらい文字に向いている。

The Secret

Handsome Pro

Adobeフォント・英文フォント。

Dawning of a New Day

可読性は低いが、あしらい文字に向いている。

Dawning of a New Day

Mrs Saint Delafield

筆記体の英文Googleフォント

Mrs Saint Delafield:筆記体の英文Googleフォント

デザイン書体

New Tegomin

日本語対応のデザインフォントで太さはレギュラーのみ。毛筆体の和文タイトル等に添えて使う小サイズ英文用フォントとして使いやすい。

Googleフォント。公式サイトは下記のとおり。

https://fonts.google.com/specimen/New+Tegomin

New Tegomin:Googleフォント、日本語対応のデザインフォント
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

■清水WEB制作代表
■コーディング:WordPress(オリジナルテーマ制作等)・HTML・Sass・FLOCSS・JavaScript(jQuery)等
■集客力:YouTube/Instagram/ブログでそれぞれ登録者数16000人/フォロワー13000人/月間最大アクセス50000PVの集客実績があります
■文章作成:博士号所有、会社員時代は科学雑誌に寄稿していたので文章作成も得意です
■写真技術:Amazon Kindle出版で、写真集・撮影編集解説書を5冊好評発売中です

目次