フォントのデザインについてあれこれ

みなさん、おはようございますこんにちはこんばんは！ハルです。
今回はフォントのデザインを少しいじってみようという記事です。
フォントのデザインと言っても書体や色、大きさなど様々な設定がありますが、その中でも大きく印象が変わるであろう項目の変更手順と違いを見ていきます。
ちなみに私のサイトでは、全体的に丸い書体のフォントを使い、色も出来るだけ統一してシンプルな棒人間くん達のイメージに合うように、サイトのデザインもシンプルにしたつもりです。（実際そうとは言っていない）

もくじ

• フォントのデザインによる違いと使い方
  • 書体（フォントファミリー）
  • カラー
  • サイズ
• まとめ
• 付録

フォントのデザインによる違いと使い方

書体(フォントファミリー)

メリット

• ・デザイン性がかなりUP↑
• ・webフォントだとデザインセンスが無くても、シンプルに作るだけでなんとなく良く見える
• ・ブラウザやOSによる見え方の違いを無くせる
• ・SEO対策になる（文字の代わりに画像で代用していたものを書体で対応した場合）

デメリット

• ・日本語フォントデータは容量が大きいので重くなる（標準フォントの場合は除く）
• ・日本語対応のものが少ない

解説

カワイイは作れる！そう、書体でも作れるんです（笑）左の可愛らしいフォントはGoogleの日本語webフォントのサイトから持ってきました。
いくつか種類があって一番かわいいのがこのフォントだったんですけど、残念ながらカタカナにしか対応してなかったです。
フリーのwebフォントも探せばあるんですけど、こんな感じで〇〇が無いとかあるので使用したら必ずきちんと全ての文字に反映されているかのチェックを忘れずに行ってください。

フォントファミリーの指定方法

CSSに以下のコードを書き込んでフォントの指定をします
font-family:"フォント名"; 標準の書体の場合上記のコードのみで変更できます。 htmlに直接指定しての変更も可能ですが、非推薦要素となっているようです。なので今回はくわしく説明致しません。
フォントファイルをアップロードしてフォントを使用する場合は以下のコードで読み込みます。
＜CSS＞
@font-face {
 font-family:"任意のフォント名";
 src:url("フォントへのパス");
} この他にも記述しないといけない事がありますのでフォントをダウンロードしたサイトなどの指示に従ってください。
webフォントの場合はhtmlのhead内に以下のコードを追加して読み込みます。 ＜HTML＞
<link href="フォントへのパス" rel="ファイルの形式"/> フォントの指定はどの場合でも標準書体の時と同じです。

カラー

メリット

• ・目立たせたい時に太さや大きさなどに加えて表現方法として選択肢が増える
• ・イメージを更に強く印象付ける事出来る
• ・イメージを伝えやすい

デメリット

• ・多様すると読みにくい文章になってしまう
• ・背景色や背景画像によっては見えにくくなってしまう

解説

左と右を見比べて頂けると一目瞭然！左の方が断然イメージが分かりやすいと思います。
また、上の例以外にも目出せたい文章にマーカーの代用として使ったり、サイト名の文字の一部を変えてデザイン性を上げる手段としてなど使用目的は多岐にわたります。
ただし、乱用に注意したいところです。特に文章ではたくさん使いすぎると目立たせたい箇所だらけになって結局見難くなってしまった何てことも。
記事などの文章の場合は、一度全て書いてしまったあとに目立たせたい部分や表現したい部分を決めてから一気に変更した方がいいかもしれませんね。

色を変更する時に使う値

• ・カラーネーム→「black」や「red」などの様に色名をそのまま指定。
• ・カラーコード→「#ff0011」や「#f01」などの様な6桁または3桁（短縮カラーコード）の値。透明度の同時指定時は「#00ff0011」となる。
• ・rgb10進数→「rgb(255,255,255)」などの様な値。透明度の同時指定時は「rgba(255,255,255,1)」となる。
• ・rgbパーセント→「rgb(100%,100%,100%)」などの様な値。透明度の同時指定時は「rgba(100%,100%,100%,1)」となる。
• ・HSL→「hsl(359,100%,100%)」などの様な値。また、HSLも透明度の指定が可能だが「hsla(359,100%,100%,1)」となる。
• ※透明度の設定をするとz-indexの値が変わり意図しないレイヤー配置になる事があるので注意。

小技

背景色と文字の色を同じにすると隠し文字に出来る。

サイズ

メリット

• ・主役・脇役が明確になる
• ・題名や項目など区切りが分かりやすくなり読みやすくなる

デメリット

• ・多様すると読みにくい文章になってしまう

解説

大きさを変えると、メリハリがついて凄くいいですよね。ただ、大きさを変えまくってると「区切りとして大きくしたのに区切りが分かりにくい！」とか「題名が全然目立ってない！」なんて事によくなると思います。色と同じく一度全て書いてしまったあとに一気に変更した方が無難かもです。
そして単位についても話しておこうと思います。単位・・・いっぱいありすぎてかなり困りました。適当に調べた結果ざっくり言うと「基準が固定のものとコロコロ変わるものがある。そんでもって色んな単位を要素要素で違うの使ってたらかなり面倒な事になりそう。」でした。なので、慣れるまではpx・%・rem・vwの4種類しか使わない事にしました！
ちなみに、単位どれ使ったら分かんないよ！って時はremとvwを使っておけば想定と違う大きさになった！なんて事にはならないと思います。そして、慣れてきたら他の単位も覗いてみるといいかもしれませんね。私は覗いてそっと閉じましたが（笑）

大きさを変更する時に使う値

• ・px→1ピクセル
• ・%→親要素を基準としての倍率
• ・em→親要素から継承されたフォントサイズを1とした時の倍率
• ・rem→ルート要素のフォントサイズを1とした時の倍率
• ・vw→ビューポート（表示領域の幅）の100分の1

小技

font-size:calc(3rem + 15vw);みたいに値を足し算出来る！calc(固定値 + 変動値)にしておくと好きな比率で伸縮出来るので便利。

まとめ

今回ご紹介した項目以外にも、角度や行間など変更出来るところはたくさんあるのですが、今回は大きく変わる所に焦点を当ててみました。
気になる方は「カーニング」や「行間」という単語でGoogle先生に聞いてみるとたくさん答えが出てくると思います。 また、私のサイトでもやっているのですが、文字全体に全体に角度をつけたりシャドウを付けて文字を綺麗にみせる裏技的なものなど、まだまだたくさんやれることはありそうです。

デザインって難しいですね。私の場合まだ勉強し始めなのでやりたいイメージが沸いても実際やってみると上手くいかない事の方が多いです。
それでも上手く出来た時の喜びが私を突き動かします(笑)
これからも私が勉強していく過程で役に立った事や発見した事があれば記事にして行こうと思います。
プロの方からみれば当たり前の事かもしれませんが、私の様に勉強し始めたばかりの人にとってそうでも無いと思いますので地道に記事を増やしていければなって思います。
それでは今回はここまで。また次回更新時もお付き合い頂けるとうれしいです。
ありがとうございました！

付録

最後に勉強する際に分かりやすくて参考になったサイトや無料フォントの配布サイトをまとめておきました！

• font-familyの使い方を分かりやすく教えてくれるサイト
  →サルカワ
  
• OSにインストールされているFont-familyを自動で生成してくれるサイト
  →Font-familyメーカーbyサルカワ
  
• Googleが無料で提供している日本語webフォント
  →Google Fonts + Japanese Early Access
  
• ニコニコ動画っぽいフリーフォント
  →丸文字フォント（ニコ文字）配布所
  
• 色の見本サイト（色名前をクリックするとRGBなどの詳細情報が出てくる）
  →WEB色見本 原色大辞典 - HTMLカラーコード｜colordic
  
• rem以外の単位で分かりやすかったサイト
  →CSSで使用できる単位まとめ｜hirok-k
  
• remに関して分かりやすかったサイト
  →CSS3の新単位「rem」で文字サイズを分かりやすく指定｜All About

公開年月日：2017年10月20日
更新年月日：2022年04月24日