UIタイポグラフィ

Amebaが提供するデジタルコンテンツの中で使用される、UI上での読みやすさを考慮した書体選びや表現について定義しています。

書体

Webにおけるfont-family指定は以下を指定してください。

Basic Version 2

特に理由がない場合はこの指定を利用してください。

font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Yu Gothic Medium", sans-serif;

太字にする際にはfont-weightを数値ではなくキーワード(bold)で指定してください。

Basic Version 1

「Basic Version 2」より以前のアプリケーションでは以下の指定をしている場合があります。可能であれば「Basic Version 2」を利用するように変更してください。

font-family: Meiryo, Yu Gothic Medium, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

Blog Body

Amebaブログの記事本文にはテキスト装飾を表現するため、以下の指定をしてください。

font-family: -apple-system, BlinkMacSystemFont, sans-serif;