ハワイのWeb制作会社で働くダンサーのブログ

ハワイ生活のブログ、移住、留学、観光、海外就職情報やホームページ制作、英語学習、ダンスについて

明朝体を使ってホームページに高級感を演出したい時のテクニック

今日はトピックはWebデザインに求められるフォントについて。

 

typography

 

日本語サイトで最もよく使用されるフォントは「メイリオ」だと思いますが、

最近「明朝体」を使用して割と奇麗に見せる方法を発見しましたので、メモしておきます。

 

 

 

明朝体にはかからないアンチラディアス処理

 

メイリオはたしかに読みやすいですが、高級感のあるサイトには少しカジュアルすぎるのが難点ですよね。

明朝体を使いたいところですが、明朝はwindowsで見ると文字がつぶれて見えるので、今までは避けていました。

 

しかし

先日こんな記事を発見しました。

Windowsフォントをアンチエイリアスでキレイに見せる方法

 

私のPCには英語のOfficeがインストールされている為か、

HG系フォントでもアンチエイリアスがかかりませんでした。

 

 

 

いろいろ試した結果

 

試したのは下記のフォント指定

font-family: "ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","MS P明朝",serif;

 

上記のフォント指定で、IE, Chrome, Firefoxでも確実にアンチエイリアスがかかるのは25pxからでした。

実際に見るとこんな感じです。

 

富士山のように、日本一になるって言っただろ! お前、昔を思い出せよ!! 今日からお前は富士山だ!!!

by 松岡修造

 matsuoka2

 

 

文字の間隔を広くして調整する

 

文字の間隔が広い方が高級感が出るのではないかと思い、試してみました。

letter-spacing: 4px;

このCSSを追加します。

 

結果はこれ。

 

富士山のように、日本一になるって言っただろ! お前、昔を思い出せよ!! 今日からお前は富士山だ!!!

by 松岡修造

 matsuoka2

 

 

 

 

実用化できる場面は?

 

見出しやスライドショーのキャッチコピーに使えるのではないかと思います。

使う場面によっては文字間の距離の調整が必要かもしれないですね。

 

-Webデザイン
-, ,