Webデザインやっているときに使うフォント
サンセリフ体とかセリフ体とか…なんか色々あります
見れば「ああ、こんなやつね」ってわかるんですが、未だにサンセリフとセリフがごっちゃになってました
これじゃいけないと、ざっくりですが改めて調べてまとめてみました
フォントについて(セリフ体、サンセリフ体、カリグラフィー、UDフォント)
上の文字がセリフ体 (Noto Serif JP) 下の文字がサンセリフ体 (Noto Sans JP) です

セリフ体(〇〇 Serif)
セリフ体(〇〇 Serif)…イメージは明朝体!
縦線と横線の幅が違ったり、ちょっとした装飾があったりする文字のこと
セリフ体のもとになった『セリフ』というのは、Aの文字についてる横棒のことらしいです

なおセリフ体はローマン体とも言ったりするそうです
本とか新聞に使われています
読ませる文章にはこっちが使われていることがあります
自分はおしゃれさとか高級感とかを出そうとして使ったことがありますね
サンセリフ体(〇〇 Sans)
サンセリフ体(〇〇 Sans)…イメージはゴシック体!
縦線と横線が同じ幅の文字のことです
シンプルな分、明朝体よりも読みやすいです
ブログもこっちの文字で表示されてますね
私はこっちの方が好きです
ちなみに Noto Sans に表記がありますが、Sans って「ない」って意味のフランス語らしいです
だからサンセリフ体って『セリフがない文字』っていう意味だそう
勉強になります…!
カリグラフィー(Calligraphy)
カリグラフィー(Calligraphy)…イメージは装飾とか手書き感の強い文字!
大きく分けると手書き体とスクリプト体があります
(今回使用したのは Oooh Baby と Monsieur La Doulaise です)

比べると結構違いがありますね
サンセリフ体とかセリフ体は結構わかりやすい表記ですが(〇〇 Serif みたいな)
カリグラフィー系の文字の名前は結構固定されていない印象があるので、文字の名前だけじゃ見分けにくい気がしてます
個人的イメージですが、スクリプト体は結婚式とかで使われるイメージありますね…
おしゃれ!ゴージャス!高級感!って雰囲気あります
ただ読みにくいので、ポイントとして使うのがよさそうです
手書きは親しみやすくってよく使ってます
UDフォント
UDフォント…みんなに見やすい文字!
UDはユニバーサルデザインの略で、だれでも読みやすい文字にしてあります
上の文字が Noto Sans JP 下の文字が BIZ UDPGothic です


同じフォントの大きさなんですが、比べてみると BIZ UDPGothic の方が大きく見えますね
最後は形とかではないですが、読みやすいフォントを探しているときの材料の一つになると思います
参考にした本
今日の記事で参考にした本はこちら
![]()
Webフォント実践ガイド Google Fontsではじめる 美しく機能的なタイポグラフィ【電子書籍】[ 飯塚 修平 ]
Web フォントについて書いてます( Google フォント)
ただ、私は全部を理解できませんでした…!
ソースコードが記載してあったりするので、コードがわからない自分は飛ばし読みしてました
でも詳しく書いてあるので、詳しく知りたい方はこれ良いと思います
Noto の名前の由来とか書いてあって面白かったです
(No Tofu の略だそうです!読んでてなるほどと思いました)
まとめ
ざっくりまとめると
セリフ体…明朝体のイメージ
使用することで高級感などを出すこともできる
サンセリフ体…ゴシック体のイメージ
シンプルなので見やすい
カリグラフィー…装飾などがある手書き感の強い文字
スクリプト体は装飾が多いと読みにくい
UDフォント…みんなが読みやすい文字
…というような感じです!
参考になればうれしいです
この記事で、昔美術の授業で文字のレタリングした思い出がよみがえってきました
まさかこんな所で使うと思ってなかった…
勉強って大事だなと思った今日この頃です







コメント