ひな形再考その2 – フォント周りをどうするのか | ハナモゲラボ / 試行錯誤の実験人生

制作時のひな形の再考をしようという試みは未だに終わりが見えず
最近のトレンドを追うのが必死で検証すら出来ておりませんが
色々となるほど、と思った事をここにとりあえずまとめてみる。

自分が過去、作った物と今の機材の違いといえばやっぱりメイリオフォント。
Windows8.1にフォントが追加された、という記事を書いてから
「あ、そういえば」と気づいて色々と調べてみたらこのサイトを見つけました。

CSSのfont-family指定はこれで決まり！（2013春）
http://d.hatena.ne.jp/n-yuji/20130225/p1

ちょいこの前までWindows XP環境だったせいか、
この辺の事をあんまり考えてなかったのですけども
（メイリオは後からインストールはしていましたが）
2013年春の時点でのOS間の違いを踏まえたfont-familyの指定法だとか。

font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;

なるほど。これはシンプルでいいですね。
OsakaとかMSPゴシックとか書いてた昔とは違ってとてもスッキリしてます(笑)

となると次はフォントサイズの事に興味が移りますが、
最近ではレスポンシブデザインなどが絡んできて、なかなかこれといった物が
見つけられずにいます。

興味深かったのはiPhoneを横向きにした時の自動サイズ調整が気になる、という
こちらの記事。

スマートフォンなどに対応したレスポンシブデザインに関するCSSスタイル
（font size自動調整をきるなど）
http://kudakurage.hatenadiary.com/entry/2013/02/08/135725

最近はiPhoneもリモートでWeb inspectorで見れたりしますから、細かく調べてみても数値的には問題無さそう。おかしいなってことで調べた後に、iPhoneでは自動文字サイズ調整があるってことに気づいて切りましたよ、というお話です。

具体的にはこのスタイルを加えただけです。

body {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-o-text-size-adjust: 100%;
text-size-adjust: 100%;
}

あとはここもとても興味深い記事でした。

いまさらだけど、font-sizeを比較してみた
http://www.entacl.info/2012/09/font-size.php

1年と少し前の記事ですが、とてもわかりやすく書かれています。
ここの最後の「結論」に書かれているCSSを引用しますと

html {
font-size: 62.5%;/*ベースを10pxにしています*/
}
.xsmall {
font-size: 0.9em;/*9px*/
}
.small {
font-size: 1.2em;/*12px*/
}
.medium {
font-size: 1.4em;/*14px*/
}
.large {
font-size: 1.6em;/*16px*/
}
.xlarge {
font-size: 2.2em;/*22px*/
}
.xxlarge {
font-size: 2.6em;/*26px*/
}