ようやくAndroid OSの主流も4.0以降になってきたようですね。Android 4.0では2つの日本語フォントが追加されています。モトヤ Lシーダ3等幅とモトヤ Lマルベリ3等幅です。このうち、モトヤ Lマルベリ3等幅の方がデフォルトの設定になっています。シーダは角ゴシック系の文字で、マルベリが丸ゴシックです。どちらも液晶画面での視認性を考慮して調整された画面用のフォントのようです。欧文の方はRobotoというフォントが追加されました。RobotoはファミリーになっていてThinからBoldまで揃っていますが、日本メーカー製の端末ではすべてのファミリーが格納されているわけではないようです。

Androidの画面デザインをする場合に注意しなければいけないのがサイズの指定です。Androidではサイズの指定にピクセル(px)ではなくdpという単位を使います。Android端末はいろいろな画面サイズがあるので絶対値を指定することが難しく、相対的な値を指定しなければいけないからです。ベースとなるのは160 dpi(例:360×640ピクセルの画面)の画面解像度で、この時の「1」を基準にして実際のピクセル数を計算します。計算式は px = dp * (dpi/160) になります。つまり160 dpiの時に、1*(160/160)=1となり、1dp =1pxとなるわけです。今夏(2013夏)の最新端末(フルHD、5インチ、1920×1080ピクセル)では解像度は約440 dpiありますので、1*(440/160)=2.75となり、1dpは3ピクセルとなりますし、現在主流のHD(720×1280)の端末では1dpは2ピクセルになります。この、dpに対してpxが何倍になるかの係数がデザインする際に重要になります。720x1280の電話(約4インチ液晶)では係数が「2」になるとして計算します。解像度ベースで計算しますから、同じHDでもタブレットでは画面の大きさが大きいため係数は低くなります。

テキストのサイズの指定ではdpの代わりにspという単位も使うことができます。spという単位はユーザーが設定からフォントのサイズを変更した場合には、その倍率を加算しなければいけないために用意された単位です。標準の設定では「中」サイズが標準になっていますが、ユーザーが「小」、「大」、「特大」にフォントのサイズを変えることができますので、spでは画面解像度の係数に加えて、ユーザー設定の倍率が反映されます。つまり「中」サイズでは1sp=1dpなのですが、「大」サイズでは1spが約1.3dpになるというわけです。spでテキストサイズを指定する場合は、ユーザーが「小」や「特大」に変更した場合でもデザインが破たんしないようにレイアウトする必要があります。

上の基本ルールを元にすると、HD端末の電話の画面上で32pxの文字サイズを表示したい場合には、16dpもしくは16spと指定することになります。16dp x 2 = 32px となるわけです。実際に16dpを指定して画面上で日本語の文字高を測ってみるとおおよそ32pxなります。ところが、レイアウト結果を見てみると場合によってはテキストが収まらなかったり、余計な余白がついていることがあります。これは下の図のように実際のテキストボックスは、計算した文字ボディに加えて上下に余白があるからです。レイアウトに余裕がある場合は問題ありませんが、ない場合はこの余白分を頭に入れてデザインしないと、想定したよりも文字が入らなかったり、マージンが広かったりしてしまいます。

text-box-size

なぜこのような余白が上下にあるかというと、欧文フォントとの混在のためです。日本語書体では文字のセンターが視覚的に揃うように正方形の全角ボディの中心にデザインされていて、欧文書体ではベースラインを基準にデザインされていますよね。なので、同じボディサイズに揃えてしまうと欧文が上にあがって見えてしまいます。バランスよくセンターに見えるようにするためには欧文書体をやや下にさげる必要があります。下にさげると当然小文字のgやqなどが日本語のボディよりも下にはみ出ます。余白の下の部分はこれを吸収するためです。また余白が下だけだと日本語だけだった場合には、今度はボックスの天地のセンターにレイアウトした時などにテキストがセンターより上にあがって見えてしまいます。余白の上の部分はこれの調整のためです。なので、余白は上下均等についているのではなく、やや上の方が狭くなっています。

text-body

この余白のサイズは厳密に計算することができません。ただ、実測してみると元となるsp値の約1.4倍程度になるようです。レイアウトスペースが厳しい場合や、正確なレイアウトが求められる場合はこの余白分を考慮してデザインすることも必要になりますので、ぜひ試してみてください。

Tags: