iOS 9 や OS X El Capitan から導入された Apple の標準システムフォント San Francisco がとても見やすい気がして好きだったので、自分の Web サイトも San Francisco フォントで表示されて欲しくなりました。

スタイルシートで San Francisco を指定する

現時点 (2016-01-05 ) で Web ページを San Francisco フォントで表示するには、スタイルシートで font-family を使ってアップル標準フォントを指定する必要があるようです。

body {
	font-family: -apple-system, sans-serif;
}

このようにして、例えば Mac OS X El Capitan で表示させると、システムフォントとして設定されている San Francisco フォントでページが表示される様子です。

厳密には San Francisco フォントの直指定ではないので、決して Web フォントみたいに 必ずそのフォントで表示される というわけではありません。そのため Apple 標準フォントが使えない環境でも意図したフォントに近い書体で表示されるように -apple-system に続けてそれ以外の環境で使うフォントを指定しています。

現時点ではこのような表示方法になる都合、もしかすると San Francisco フォントで表示したいというよりは、システムフォントで表示したい というイメージに近いかもしれません。

San Francisco フォントの太さを指定する

San Francisco フォントといえば繊細の細さか売りの書体とも言えそうですけど、単純に -apple-system を指定して San Francisco フォントが表示されたときには、少し太めの普通な文字が表示される様子です。

San Francisco フォントの太さを変えたいときには、普段どおり font-weight を使って太さを指定します。

body {
	font-family: -apple-system, sans-serif;
	font-weight: 300;
}

例えば font-weight に 300 を指定すると、最初よりも細めの文字で表示されます。

フォントの太さは 100 から 900 まで 100 きざみで指定できるようになっていますが、実際の表示がどう変わるかはフォントのポイントサイズによって変わってくる様子でした。

フォントの太さはブラウザーによっても変わってくるようで、現時点では Apple 標準の Safari だとより細やかな太さ調整が可能でした。

font-weight が想定する太さ

San Francisco フォントがどのポイントサイズでどんな表示になるかを全て把握するのは大変なので、純粋に font-weight の値がどんな太さを想定しているかを押さえておくのが良さそうです。

整理すると、次のような太さで表示されるのを想定している様子です。せっかくなので、フォントサイズを指定すると、サンプル文字列がそのサイズで表示されるようにしてみました。