気になる文字フォント、気にすると楽しい文字フォント

    icon-clock-o読了時間:約9分37秒


楽しい文字フォント

【文字フォント】フォントの種類と変更方法
【文字フォント】フォントに歴史あり
【文字フォント】おすすめ日本語フリーフォント
【文字フォント】おすすめ英字フリーフォント
【文字フォント】源ノ明朝(げんの みんちょう)のインストール手順
などの過去記事でご説明してきたとおり、
フォントとは、文字の書体、つまり文字がどんな風に描画されるかのデザインのこと。

例えばこちら。
Excelで行ごとにフォントを変えてシャーロック・ホームズシリーズの
『まだらの紐』の一部を英語&日本語で書いてみました。
文字フォントの使用例
(和訳は適当なので間違ってるかもしれません、すいません)
文字フォントによって印象が全く変わって面白いです。
文字サイズも全部同じ16pXにしているのですが、フォントによって大きさが異なっていますよね。

こうして見て頂いているパソコン画面上のフォント、
新聞や雑誌や書面のフォント、看板やチラシのフォント、
テレビや動画サイトのテロップのフォント、などなど
世の中には数え切れないフォントがあり、
製作者のこだわりや気分でフォントが決められています。

このブログでも挿絵に使っている色んなイラストに合わせて
文字フォントをお借りして使わせていただいてます。
パソコンでこのブログを見ていただいている方は、右のサイドメニューを見て頂くと
最近の投稿記事のアイキャッチ画像が並んでいると思うのですが、
それぞれ私の気分で色んなフォントになっているのがお分かり頂けるかと思います。

私は絵心も無く字も汚いので、お借りしたイラストや文字でサイトを飾れることがとても有り難いです。
イラストレーターさんやデザイナーさんに感謝ですね(・∀・*)✨

ちなみに文字フォント関係で私が最近一番気になっているのは、
毎朝の通勤途中に見る某企業さんの出している広告看板が
色味と文字フォントのせいでラブホテルの看板に見えて仕方ないことです。
普通の企業さんなのですが、企業名はさらっと流麗なフォントなのに、
価格のところだけがポップな太丸フォントなのと、ピンク成分の多さが
どうにも夜のお楽しみ感を出している。
定期的に話題になる宮崎ブーゲンビリア空港のネオンの雰囲気に似ています。
目が悪いので、初見の際は小さめに書かれている企業名と業種が読み取れず、
「 ラブホの看板がこんな大通りに…?いや値段的になんか違うっぽい…
  じゃあ出会い系…?いやでもこのご時世に出会い系…?
  それに高松は条例が厳しくてこんな大々的にソレ系の看板は出せないはずだ… 」
と、めちゃくちゃ戸惑いました。
しかも毎回デザインに気を取られるせいで、毎日見ているのに
一向に企業名が覚えられない。看板の意味とは。
私があの企業さんの社員だったらどんな手を使ってもあのデザインは阻止するけどなあ、
でも逆に目を惹かれるという意味では成功している気もするしなあ、と
広告デザインと広告効果について考えながら看板を眺めています。


無料フォントと有料フォント

文字フォントには、企業さんが制作販売している有料のものと、
個人さんや企業さんが厚意で発表してくれている無料のものがあります。

日頃パソコンを使っていると、
MacのOS、WindowsのOS、Adobeのソフト、Officeソフトなどに含まれている
ゴシック、明朝といった様々なフォントを自然に使っています。
Windowsのフォント例
フォント代なんて支払った覚えはないのに
パソコン上でこうして様々な文字フォントを使えていますよね。

なぜ有料のはずのフォントも使えるかというと、
・ソフト開発企業が自社用に制作したフォントを使っているから
・ソフト開発の際に企業がフォント使用料を払っているから
大体がこのどちらかです。
ソフト代金にそういったお金も含まれているので、後から追加料金も必要なく
私達はそのソフトに搭載されているフォントを使うことができるのです。

そうして標準的なフォントはOSや各ソフトに含まれているので普段困ることも特に無いのですが、
広告、パッケージ、Webサイトといったオリジナリティが必要なデザインをするため
特殊なフォントを使いたい場合などは、欲しいフォントを自分で購入するか、
無料提供されているフォントを探すか、もしくは自分でフォントを作るか、ということになります。

ちなみに自分で簡単に作れる手書きフォントのWebサービスもあります。
手書きフォントを自作


有料で販売されているフォント

フォントを有料で買う場合、単品をWeb上でダウンロード購入したり、
企業サイトで販売されているパッケージディスクを購入したりといった方法があります。

フォントの制作販売をしている企業さんとしては、
デザイナーさんなら必ずこちらのフォントパックにお世話になったことがある、と言われる
モリサワさんが一番の有名どころでしょうか。
最近だとあの大ヒットしたアニメーション映画 『 君の名は。 』のタイトルフォントに
モリサワさんの定番フォント A1明朝が使われています。
タイトルフォントA1明朝
LAWSONのお菓子パッケージにも、『 聖☆おにいさん 』『 スティーブ・ジョブズ I 』等の
出版物にも、あちらこちらにモリサワさんが居ます。
モリサワさんのフォント使用事例

そして皆さん気づいて無くても絶対に目にしているフォントワークスさんも人気ですね。
ゲームのペルソナも戦国BASARAもメタルギアソリッドもフォントワークスさん。
ファミマのお菓子パッケージも、じゃがりこのパッケージも。
フォントワークスさんのフォント使用事例
こうしたそれぞれの企業さんのフォント使用例とか見てるだけで楽しいです。

また、最近フォントワークスさんでは、特定の媒体に特化したフォントのパッケージ販売として
mojimo(モジモ)というサービスを開始しました。
2018年3月1日にリリースされたシリーズ第一弾がmojimo-manga(モジモマンガ)です。
一年間 3600円(税抜)で36種のフォントが使い放題になります。
今回のこのmojimo-mangaは名前の通り、漫画やアニメで使われているフォントを主にしており、
イラストレーターさんや雑誌編集者さん、同人作家さん達にも嬉しいパッケージではないでしょうか。


Firefoxで使えるフォント分析アドオン

Firefoxおすすめアドオン:Quantum Ver.57対応WE【2017年12月版】の記事でも
ご紹介したアドオン・Font Finder。
Firefoxに追加できるアドオンで、Web上の文字フォントを調べることができます。
このフォント見やすくて良いなあ、どんなフォントを使ってるんだろう、と知りたい時などに便利。

アドオン【 Font Finder (revived) 】をインストール

Font Finder (revived) のページにアクセスして【 Firefoxへ追加 】をクリック。
インストールの許可を求められた場合は【 追加 】をクリックすると
アドオンのインストールが完了します。
フォント分析アドオン01
あとはフォントを調べたい箇所を選択して右クリック⇒【 Analyze Selection 】を選ぶだけ。
フォント分析を実行
↑ これはこのブログ記事の記事タイトルを分析した状態です。
font-family(Stack):サイト運営者によって設定されているフォントが
verdana, Meiryo, “メイリオ”, sans-serif になっている。
Font being rendered:今ココで実際に描画されているフォントは verdana になっている。

と書かれています。

つまり、サイト運営者(私)が、サイトのデザインを決める際に
この文字フォントが表示されますように、というおまじないを唱えており、
実際に文字を画面上に表示させた際に、おまじないが効いて、
私の環境では verdana が表示されている、ということです。
CSS・文字フォントの設定

font-family(Stack)のスタックとは 『 積み重ね 』 というような意味で、イメージとしてはこんな感じ。
フォントファミリーのスタック

調べ方も色々

調べたいフォントがあるページ内で右クリック、
Inspect Font 】をクリック後に要素を選ぶ、という手順や、
上部メニューバーの中にあるFont Finderのアイコンをクリックし、
調べたい箇所をクリック、という手順でも同じように調べることができます。
フォント分析アドオン02

分析結果の見方

フォント分析アドオン03

こうしてちょっと違った視点からサイトを見ていると、
やっぱりAppleのショップはAppleが開発したフォントを使ってるんだなーとか、
このフォント初めて見るやつだ!と思ったら自作のフォントかあ、すごいなあ、とか、
いろいろな楽しみ方ができるので、皆さんもお暇がありましたら是非。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket