family」タグアーカイブ

CSSでのフォント指定

CSSでのフォント指定

いかのような基準で作っています。

通常のなんでもないサイトの場合

  • ゴシック : win メイリオ、mac : ヒラギノ
font-family : "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif
  • 明朝 : win HG明朝 or MSP明朝、Mac : ヒラギノ明朝
font-family : "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif

すっきりしたデザインの場合

  • ゴシック : mac,winとも 游ゴシック体
font-family : "游ゴシック体", YuGothic, "游ゴシック Medium", "YuGothic M", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
font-weight : normal;

(POINT : font-weightを明示)

  • 明朝 : mac,winとも 游ゴシック体
font-family : "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" ,"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
font-weight : normal;

※IEのバグに注意

游明朝、游ゴシックでIEで文字の上下の揃えがずれるバグがります。

どっちが読みやすいとかも考えると。

特に意図しない普通のサイトの場合ユーザーの読み慣れているフォントが読みやすいことも考えられたりするかもなども気になる。