レスポンシブWEBデザインでスマートフォンサイトを作るときに、フォントサイズをどう指定するかは意外と悩みます。
多方面で紹介されている方法として、html（ルート）のフォントサイズを10px(62.5%）にしておき、body以下のフォントサイズをrem単位で指定する方法があります。
これはメディアクエリを用いて全体のフォントサイズを相対的に変化させることが容易です。ただ、スマートフォンで全体のフォントサイズを相対的に小さくしてしまうと、もともと小さなフォントサイズを指定していた要素のテキストが極小サイズになってしまい、可読性を損ないます。
そこで、実際に複数のレスポンシブ対応のスマホサイトを制作して最も実用的で、スマホ閲覧時のフォントサイズ修正が容易だった方法を紹介します。
フォントサイズの変更がしやすい指定方法
CSS例
SCSS記法
$fs: 1.6rem; // フォントサイズ
// CSSでフォントサイズが指定されている要素に適応
html{
font-size: 10px - .625; // スマホで全体を-1px小さくするには-.625
// メディアクエリ PC
@media screen and (min-width: 768px){
font-size: 10px; // デフォルトは10px
}
}
// bodyでCSSでフォントサイズが指定されていない要素に適応
body{
font-size: $fs - .2; // スマホのフォントサイズを-2px
// メディアクエリ PC
@media screen and (min-width: 768px){
font-size: $fs;
}
}
.paragraph1{
font-size: 1.5rem;
}
.paragraph2{
font-size: 1.6rem;
}
.paragraph3{
font-size: 12px;
}
HTML例
<!-- PC --> <p>PCは16pxで表示</p> <p class="paragraph1">PCは15px表示</p> <p class="paragraph2">PCは16pxで表示</p> <p class="paragraph3">PCは12pxで表示</p> <!-- スマートフォン --> <p>スマホは13pxで表示</p> <p class="paragraph1">スマホは14pxで表示</p> <p class="paragraph2">スマホは15pxで表示</p> <p class="paragraph3">スマホは12pxで表示</p>
基本的な使い方
フォントサイズはremで指定
スマホとPCでフォントサイズを変えたいテキストはremを指定します。html（ルート）のフォントサイズを変えてremで指定した要素全てに対して相対的に文字サイズを変化させます。
font-familyにapple-systemは使わない
iOSの場合、フォントサイズが自動的に1px小さくなり、Androidとフォントサイズが変わってしまいます。iOSでピッタリ収まっていた文字がAndroidでは折り返されていたり、デザインによっては制作コストが増えるため必要がなければ使わない。
使う場合は、iOSでフォントサイズが-1pxされることを考慮したデザインが必要。
サイズを固定させたい要素はpxで指定
フォントサイズを固定したいものはpxで指定してルートのフォントサイズを小さくしてもスマホ閲覧時に極小サイズのフォントにならない様にします。
具体的には13px以下はpx指定でサイズを固定してしまいます。例えば、12pxのフォントをルートでスマホ閲覧時に-2pxすると10ｐｘの極小サイズになってしまいます。これを防ぐためです。
htmlとbodyのメディアクエリについて
メディアクエリのブレイクポイントを堺にしてモバイルとPCのフォントサイズをそれぞれ指定します。
これによりrem指定のフォントサイズを相対的に変更させることと、スタイルが定義されていないテキストのフォントサイズをスマホとPCそれぞれでコントロールさせることができます。
フォントサイズの変更の仕方
スマホで全体のフォントサイズを相対的に変更する
htmlのベースは10pxとし、1px小さくしたいときは10pxから0.625を引く。2px小さくしたいときは1.25を引く。
例えば、スマホで全体を-1px小さくするにはfont-sizeを10pxから-.625します。
全体で-2px小さくするときはfont-sizeを10pxから-1.25します。
メディアクエリでPCはデフォルトの10pxを指定して、CSSに1.6remと指定することで。PCでは16px、スマホでは16pxから-1px、-2pxと言った任意のサイズを指定できます。
スタイル未定義のテキストのフォントサイズを変更
bodyでフォントサイズ未指定の要素をコントロールします。
14pxで表示させたいときは1.4remを指定。ただし、htmlで相対的に1px小さくしているときは1.5remを指定しなければなりません。