

MacのIllustrator、Photoshop、Fireworksでデザインをするときに、そのまま作っているとどうしてもテキストにアンチエイリアスがかかってしまい、HTMLで組んだ後にWindowsで見てみると、デザインとはイメージが違ってしまう場合があります。

また、Windowsのフォントを選んだだけではアンチエイリアスがかかってしまうのでオフにしてみても、本文に良く指定する12ptを使う場合は逆に今度は汚くなりすぎてしまいます。

そこで、色々調べてみた結果を幾つか残しておきます。


## 平体の値を101％にする

[Osaka font アンチエイリアス OFF でも奇麗に使う for OSX はじめてのブログデザイン](http://hajimetedesign.blog77.fc2.com/blog-entry-42.html)で紹介されている方法で、12ptのアンチエイリアスをオフにしたテキストの平体の指定を101%にするだけで良いそうです。

しかし、自分が試した環境では上手くいきませんでした。


## フォントサイズを11ptにする

[栃木県のホームページ制作・WEB制作｜Re:design アールイーデザイン｜Blog｜PhotoshopのMSゴシックアンチエイリアスなしをきれいに表示させる](http://www.re-d.jp/blog/7)で紹介されている方法で、フォントサイズを11ptに指定するとWindowsの12ptのサイズと同じになるので、文字間や行間を調整すると言うものです。

こちらは自分の環境でも実現可能で、ほぼWindowsと同じような表示を行うことが出来ました。

やはり、テキスト情報もデザインの一部に含まれると考えられるので、完成型となるべくイメージを統一させたほうが、最初から最後まで一貫性が保たれるのかなと感じました。




Macでアンチエイリアスなしのテキストを綺麗に表示してみた


先日、Googleが発表したGoogle Font APIを試しに使ってみました。

適用しているのは、一番上の「SUSH-i LOG」の部分と、各記事のタイトルで、「Droid Serif」というフォントを利用しています。

利用方法もかなり簡単。外部CSSを読み込むように、head要素内に、

```html
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
```

と記述し、適用させたい箇所に通常通りにfont-familyで指定するだけです。

```css
h1 {
	font-family:'Droid Serif';
}
```

読み込み速度も気にならない程度、フォントの数はまだそこまでありませんが今後に期待です。

ただ、日本語を対応するとなると、容量が膨大になるので、どうなるかが気になります。それも期待。

フォント

Macでアンチエイリアスなしのテキストを綺麗に表示してみた

Google Font APIを使ってみた