今日はトピックはWebデザインに求められるフォントについて。
日本語サイトで最もよく使用されるフォントは「メイリオ」だと思いますが、最近「明朝体」を使用して割と奇麗に見せる方法を発見しましたので、メモしておきます。
明朝体にはかからないアンチラディアス処理
メイリオはたしかに読みやすいですが、高級感のあるサイトには少しカジュアルすぎるのが難点ですよね。
明朝体を使いたいところですが、明朝はwindowsで見ると文字がつぶれて見えるので、今までは避けていました。
しかし、先日こんな記事を発見しました。
参考 Windowsフォントをアンチエイリアスでキレイに見せる方法
私のPCには英語のOfficeがインストールされている為か、HG系フォントでもアンチエイリアスがかかりませんでした。
いろいろ試した結果
試したのは下記のフォント指定
CSSコード
font-family: "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝",serif;上記のフォント指定で、IE, Chrome, Firefoxでも確実にアンチエイリアスがかかるのは25pxからでした。
実際に見るとこんな感じです。
富士山のように、日本一になるって言っただろ！ お前、昔を思い出せよ！！ 今日からお前は富士山だ！！！
by 松岡修造
文字の間隔を広くして調整する
文字の間隔が広い方が高級感が出るのではないかと思い、試してみました。
letter-spacing: 4px;
このCSSを追加します。結果はこれ。
富士山のように、日本一になるって言っただろ！ お前、昔を思い出せよ！！ 今日からお前は富士山だ！！！
by 松岡修造
実用化できる場面は？
見出しやスライドショーのキャッチコピーに使えるのではないかと思います。
使う場面によっては文字間の距離の調整が必要かもしれないですね。
