パソコンやエディタ、ブラウザ上に描画されている文字は、フォントによって表現されています。皆さんは、普段からフォントを意識することはありますでしょうか？
今回は、普段あまり意識をしていないようで、実は大事な存在であるフォントについて、少し語ってみようかと思います。
目次
日本語を美しく表示するCSSテーマ Honoka
Honokaは、Bootstrapと高い互換性を持つ派生テーマです。
Bootstrapと言えば、エンジニアであればよくご存知の方も多いと思います。私が技術書典4でお世話になった「対面電書」も、BootstrapでCSSが組まれていました。
Honokaの特徴は、日本語を美しく表示できるという点にあります。なぜ美しくなるのかと言いいますと、以下のようにCSS内でフォントが細かく指定されているからです。
font-family: -apple-system, "BlinkMacSystemFont", "Helvetica Neue", Helvetica, "Arial", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1rem;
CSSの中身を見たら、緻密に細かいチューニングがされていて感動しました。使ってみようかなぁ。
最新のBootstrap v4にも対応しているので、長らく愛用できそうです。
Honokaの姉妹テーマ Rin
ちなみに、私は「Hello,星を数えて」が大好きすぎるラブライバーなんですが、姉妹フォントのRinもあるみたいですにゃ！
「Hello,星を数えて」の何が良いかって、サビのぴょんぴょんが可愛いのです。
HTMLでフォントを指定する事ができる
普段、何気なくインターネットをされている方であれば、ご存知ない方も多いかと思いますが、フォントはWebサイト制作者側が、自由に指定することができます。
内蔵されているフォントを指定することもあれば、HTTPS経由でダウンロードしたフォントを指定することも可能です。
参考：はてなブログでフォントを指定する
はてなブログのカスタムテーマ「Minimal Green」でフォントを指定する例です。
1. HTMLにlinkタグを追加する
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
2. CSSでダウンロードしたフォントを指定する
.date { font-family: 'Lato', sans-serif !important; }
プログラミングフォント Ricty
私が、プログラミングのフォントで一押しなのが「Ricty」というフォントです。
プログラミングフォントとは、主にターミナルやエディタに設定するためのフォントのことを指します。
Rictyが素晴らしいところは、「英語や日本語、スペースや記号」が入り混じったとしても、綺麗に縦が揃う点にあります。
プログラミングでフォントが重要な理由
プログラミングでは、主に英語と記号を使用します。しかしながら、コメントや文字列ファイルは、日本語で書くことも多いです。
一方で，プログラミングで縦を揃えることは非常に重要です。インデントを始め、縦を揃えることは、ソースコードの見やすさに大きな影響を与えます。
もし、フォントにあまりこだわっていないプログラマーの方がいらっしゃいましたら、騙されたと思って試してみて欲しいです。地味ですが、エディタやターミナルのフォントに気を使うと、プログラミングのモチベーションも上がったりします。
MacでのRictyの導入方法は、過去に語った記事がありますので、こちらも宜しければどうぞー。
マンガやライトノベルのフォント ろごたいぷっ！
みなさんは「ろごたいぷっ! マンガ・アニメ・ラノベのロゴを徹底研究する本」という本をご存知でしょうか？
ろごたいぷっ! マンガ・アニメ・ラノベのロゴを徹底研究する本
- 作者: 山王丸榊,柚木涼太
- 出版社/メーカー: 立東舎
- 発売日: 2015/01/23
- メディア: 単行本
- この商品を含むブログ (7件) を見る
涼宮ハルヒでは「〇〇フォント」が使われています、魔法少女まどか☆マギカでは「〇〇フォント」が使われていますといった、事細かなフォントの事例が掲載されてます。
そして、使われるフォントにもある程度の傾向があるようで、本書は以下のような章立てになっています。
- 第1章 人気&定番書体
- 第2章 モダン系デザイン書体
- 第3章 ニュアンス系書体
- 第4章 重厚系明朝体
- 第5章 各種ゴシック体
- 第6章 直線系書体
- 第7章 クラシック系デザイン書体
フォントに興味を持った方であれば、自信を持っておすすめできる本です。もちろん、フォントに詳しくなくても、意外と眺めているだけでも楽しいです。
とにかくたくさんのマンガやライトノベルが登場するので、知らなかった作品に出会える本でもあります。
さいごに
私がこの記事で伝えたかったことは、フォントは重要であるの一点に集約されます。特に、文章が主体となるメディアであれば、文字の見やすさはとても重要です。
それは、Webサイトであっても紙媒体であっても同様です。マンガや小説のような紙の本も、フォントは選ばれて選定されているのです。
まずは気軽に、普段お使いのエディタのフォント設定から見直してみてはいかがでしょうか？
