contentエンジニアが知っておきたいフォントについてのお話CSSUIfontadobe「俺にはクールな画面は作れない」そう思う人もいるかもしれません。エンジニアが知っておきたい色についてのお話を見ていただいた方はおわかり頂けたことと思いますが、知識で補える部分もたくさんあるんです。本当の話なんです・・・そう、フォントの話なんです。#私自身はデザイナーではないので、あくまでエンジニアがこれを知ってると便利なんじゃないというレベルのお話ですフォントの種類を知る適切なフォントを選ぶためにはまずフォントの種類を知る必要があります。専門家からするともっとたくさん分類はあるのかもしれませんが、エンジニア視点(私視点)だと大きく以下の分類があると思っています。左側がセリフ体で右側がサンセリフ体です。要は明朝かゴシックかという感じです。セリフ体にも細かく分類があり、Pinterestを見てると面白く表現されてる方もいました。https://www.pinterest.jp/pin/804596289654896863/セリフ体だと「堅い」「重厚」といったイメージ。サンセリフ体だと「ポップ」「軽い」というイメージかと思います。新聞はセリフ体、書籍は色々です。ちなみに新聞ひとつとっても毎日新聞明朝というのもあり、独自のフォントだったりします。デジタルの世界はどうなのかと言うと、サンセリフ体が多いと思います。Windowsであればメイリオや游ゴシック、Macであればヒラギノなどです。丸みがあって親しみがあります。蛇足ですが、アニメでは意外とセリフ体もあります。言わずと知れたあのアニメの文字ですよね。これはマティスEBと言う有料フォントです。#以前、システム監視するアプリを作ってみて、エラー検知したら「壱号機沈黙」と表示するアプリを作ってみてたのですがマティスEBを使いたくて堪らなかったです。こちらもとあるアニメで使われていたTP明朝という有料のフォントです。明朝体の優雅さを残しつつも重たくなく、すっきりとしていて美しいですね。明朝体にも色々種類がありますし、ゴシック体にもまた色々あります。感覚的には、最近のフォントは細身のものが多い気がしてます。モノスペース(等幅)プロポーショナルなフォントは文字毎に横幅が違います。モノスペースは全ての文字の横幅が同じです。ゴシック」と「MSゴシック」の関係です。ゴシック」のPはプロポーショナルの略です。上がプロポーショナルの文字で、下がモノスペースです。わかりやすいとこで、上の「I」の横幅が小さいことがわかります。見た目の美しさはプロポーショナルの方が綺麗なので、通常はプロポーショナルのフォントを使いますが、テキストで表組みなどを表現しないといけない場合など要件によりモノスペースを使うことがあります。#等幅の美しいフォントがわからないので、オススメがあれば誰か教えて欲しいです。和文システムにおいては英数字と日本語でフォントをわけたいことがあります。好みの問題かもしれませんが、英数字は英字フォントの方が見慣れているというか、すっきり見えます。DesignのCSSフレームワークではRobotoが同梱・指定されてることもあります。RobotoはAndroidで使われているGoogleのフォントです。OS標準以外のフォント標準的にOSにインストールされているようなフォント以外のフォントも利用できます。WEBであればその場でダウンロードして表示されますし、ネイティブアプリであればアプリ内に埋め込んで配布します。Fontsも、以前は和文フォントはなかった気がしますが今はあります。昨年、フォントとしては最も字画の多い文字を含む貂明朝をリリースしましたね。https://fonts.adobe.com/これらはいずれも各提供元の指示に従い、コピペするだけで簡単に利用できます。表示にはダウンロードが必要で、フォントファイルはそれなりに大きいので利用の際はその辺りを認識しておく必要があります。文字以外のフォントアイコンをフォントとして作成し、表示することができます。https://getbootstrap.com/docs/3.3/components/https://material.io/tools/icons/?style=baselineGIFやPNGとは異なり、拡大縮小しても絵がぼやけることがなく、単色ですが色をつけれます。最近のブラウザではフォントにしなくてもSVG自体をそのまま表示可能なので、今後はSVGでアイコンを作ることが多くなるんじゃないかと思います。GitLabのこのアイコンもSVGですね。SVGなので色をつけてアニメーションのようなこともできます。#ちなみにこのアイコン、たぬきらしいです。指定で適用順序を指定できます。前から順番に表示できるか確認して、表示可能なフォントが採用されます。場合は以下のような順番で書くことが多いと思います。前から順番に評価されます。Windowsで和文を表示する場合は以下の順番で評価されることになり、最終的にWindows和文用のフォントが適用されます。最後のsans-serifは、サンセリフのフォントという意味で「いずれのフォントもなければサンセリフ体のフォントを表示してね」という意味になります。するとよくわからずコピペしてる人も多いかもしれません。こんな指定は間違ってもしないようにしてください。Windowsの和文フォント、Macの和文フォント、Macの英字フォント、Windowsの英字フォント、sans-serif;せっかく、英字・和文フォントを入れてるにも関わらず先頭に和文フォントを書いた場合、そこで試合終了なので和文フォント以外が表示されることはありません。書いてると「結局何が適用されてるんだってばよ?」と思うこともあるかもしれません。最近ではブラウザの開発者ツールで確認できるようになっています。ネイティブアプリで利用するネイティブアプリの場合はアプリ内にフォントを同梱します。Glow」の画面の一部でしたが、雰囲気を出すために毛筆体にしてました。(詳しくは「どこまでショボいアプリがAppleの審査に通るのか試してみた」参照)OS標準のフォントではないのでアプリにフォントファイルを埋め込んでます。調べるとライセンス的にNGだったのでリリースする際にはフォントを削除しました。有料フォントを買ったとしても用途は限られている可能性があるので、ライセンスを必ず確認しましょう。まとめ要件に合わせて適材適所で選びましょう。フォントの好みの話になると宗教論争に発展する可能性があるので、ここでは具体的なオススメは記載していません。WEBでは基本的にOSに入っているフォントを使うことが多いので、パターンは決まってくるかとは思います。テストのことを考えると、楽をしたいのならあまり多くのフォントを指定しない方が無難です。「游ゴシック」「メイリオ」の順番で書いた場合、Windows8以降とWindows7で表示されるフォントが変わるので、おそらく表示崩れの不具合が増えてしまいます。(文字切れや、文字が収まりきれない、などの不具合)そういった意味では、OS標準ではないフォントを指定/配布するやり方はどのOSにおいても同じフォントが使われることになるのでテストが楽になる可能性があります。普段何気なく見てるフォントについても意識を向けると面白いかもしれません。Ueda@megumu-uスタックフルエンジニアです。厨二病ではありません。基盤サービス」の4事業でお客様のビジネスや快適な社会、暮らしを支えています。※各記事の内容は個人の見解であり、所属する組織の公式見解ではありません。upLoginユーザーは見つかりませんでした。