Android における最適なフォント環境を考えてみる

0

Font-family を考える時にいつも Android のフォント環境はスルーされてしまうので、Android の Font-family のみにフォーカスを当てた記事があってもいいと思って書きました。

スポンサーリンク

前提知識

英字フォントは Roboto

Android 4.1 から英字フォントは、Google の開発したフォントでおなじみ、Roboto フォントが使われています。
YouTube や Google Map, Google Photos と Google 系のサービスで幅広く使われているフォントなので、iPhone 使いの方でも日常的に見ているフォントであるかと思います。

ちなみに iOS 9 以降で採用されている、San Francisco フォントと比較するとこんな感じ。

上から San Francisco, Roboto

San Francisco よりも細長くスラッとした印象になっていることが分かります。
さらに Helvetica とも並べてみましょう。

San Francisco vs Roboto vs Helvetica

上から San Francisco, Roboto, Helvetica

横幅こそ Helvetica とそう変わらないものの、縦幅がかなり違うことが目に見えて分かります。

日本語フォントはバラバラ

日本語フォントは、Android 5.1 までは マルベリ、Android 6.0 以降は Noto Sans CJK JP が使われています。
……で終わらないところが Android の複雑な所。
幾つかの国内メーカーは日本語フォントを独自に変更していて、機種によってフォントが変わってきます。

有名なものとしては、Xperia の ソニーモバイルUDゴシック (Android 5.0 lollipopから)、SHARP 製端末の 新ゴM がなどがあります。

ただし、Android で表示できるのは日本語フォントは1フォントのみですので、こちら側で何か出来ることはありません。
Android の日本語フォント環境はかなりバラバラであるということさえ抑えておけばそれで良いでしょう。

意外と複雑なCJKフォント環境

Android では、Web ページの HTML で指定された言語のフォントが、自動的に出力されるようになっています。 例えば、<html lang="ja">のように記述されていたら日本語フォントが、zh-Hans なら簡体字、zh-Hant は繁体字、のようにになるので、iOS のような中華フォント問題は起こらないようになっています(Web ページのみですが)。

それで描画されている場合、英字フォント部分まで日本語フォントで描画されてしまうという問題が発生します。Android 5.1 Lollipop 以下で使われている マルベリ は等幅フォントであり、英字部分はとても美しいとは言えないので Roboto で表示したいのですが、その方法が少し面倒なのでご紹介。

Android には Fonts.xml というフォント関連のことが全てまとめてあるファイルがあるのですが、そこに記述されているのにこのような部分があります。

<alias name="arial" to="sans-serif" />
<alias name="helvetica" to="sans-serif" />
<alias name="tahoma" to="sans-serif" />
<alias name="verdana" to="sans-serif" />

このコードは Font-family に Arial, Helvetica, Tahoma, Verdana のいずれかが指定されている場合、それを sans-serif に置き換えるものです。

Android では Font-family が指定されていない場合、Serif(明朝)のフォントで表示するので、Arial 等のメジャーな Sans-serif(ゴシック)が Font-family に指定されている場合に、意図せず Serif で表示される事態を防ぐ為にそのようなコードになっているものだと予想されます。

で、なんですが、HTML に ja が指定されている場合でも、この4つのフォントが Sans-serif に置換された場合は、日本語フォントが呼び出されず、Roboto フォントで表示されるようになります。
とあるサイトでは Roboto なのに、うちのサイトでは日本語フォント付属のフォントで表示されている……! という場合はこれが原因です。

Android で Roboto フォントを表示させたい場合は、Font-family のどこかに Arial, Helvetica, Tahoma, Verdana を記述しましょう。

余談

完全に余談ですが、Android 7.0 Nougat から言語を複数選択出来るようになったので、端末言語を英語に設定していても日本語フォントで表示させることが可能になりました。

AndroidNougat-langs

英字フォントはいくつか搭載

CJKフォントはそれぞれ1つずつしか搭載されていないのですが、英字フォントはそれなりの数が載っています。

最新の Android 7.1 Nougat では以下のフォントが搭載されています。(とはいえ昔のバージョンから変わってません)

  • Roboto
  • Roboto Condensed
  • Noto Serif
  • Droid Sans Mono
  • Cutive Mono
  • Coming Soon
  • Dancing Script
  • Carrois Gothic SC

全て Google Fonts 上で無償で配布されているフォントになっています。こういったフォント周りは iOS がかなり羨ましいです。
ただし、Andoird はオープンソースで配布されており、全てにオープンソースライセンスを適応しないといけない為仕方のないことですね。

フォントの指定方法は少し特殊ですので、「Web 制作で使える! Android で使えるフォント一覧」をご覧ください。

Android のフォント環境は複雑でも難しくもないのでそこまで考えることもないですが、日本語環境下の Roboto 周りの仕様で惑わされている人をたまに見かけます。
日本ではまだまだ iPhone ユーザーが多いですが、Android のフォント環境に少しでも気を配ってくれたサイトが増えるといいですね。

フォント指定についての記事も参考にどうぞ

2016-17年最強の Font Family 設定 [ゴシック体]

ミルコン@管理人

しがない学生の WordPress デベロッパー。最近は WordPress テーマの作成や翻訳などやってます。フロントが好き。Twitter: @mirucons

スポンサーリンク

シェアする

コメントを残す

メールアドレスが公開されることはありません。

スパム対策の為、日本語が含まれない投稿は無視されますのでご注意ください。