前回の「iOS7で使われる極細のHelvetica書体をcssで指定したい時」では、iOS7のシステム他で採用された極細のHelveticaNeue-UltraLightをスタイルシートで指定する方法を解説したが、日本語サイトの場合、タイトルのみに限定しても日本語が混じるケースが多いだろう。
実際、HelveticaNeue-UltraLightのみの指定では、日本語のフォントは太いままで、かなり不自然になる。

そんな時は、iOSにインストールされている「ヒラギノ角ゴW1」「ヒラギノ角ゴW2」を指定するといい。
通常は「ヒラギノ角ゴW3」「ヒラギノ角ゴW6」が知られているが、実はiOSにはそれよりも細いフォントファミリーのW1とW2がインストールされている。

この書体を指定すれば、HelveticaNeue-UltraLight程の繊細さにはならなくても、かなり上品な仕上がりになる。

書体の名称は、HiraKakuInterface-W1およびHiraKakuInterface-W2
実際にスタイルシートで指定する場合は以下のようにする。

書体名を「”」で囲み、最初に「.」をつけるのがポイント。

CSS

.ultra-light {
font-family: ".HiraKakuInterface-W1";
}
.semi-light {
font-family: ".HiraKakuInterface-W2";
}

なお、最初に「.」をつけることからも分かる通り、あくまで現時点で有効な方法であることは認識しておく必要がある。
念のため、HiraKakuProN-W3も指定しておくといい。

CSS

.ultra-light {
font-family: ".HiraKakuInterface-W1","HiraKakuProN-W3";
}