ゆるっと広告業界

デザイナーのじたばた。

3OSで表示する英字フォント。

こんばんは、さじです。

 

CSSのフォント問題の考察です。

Adobeなどで契約しておりますと

ちょいちょい出てくるキーワードが「Webフォント」。

見る人側の環境に委ねることなく、

制作側が意図した見た目でお届けすることが

できるようなのです。

が、大体こういうのって有料なんですよね。

無料でGoogleのWebフォントもあるのですが

うーん。。初心者(自分)にはわかりにくい?

 

昨日のCSSのグラデーション文字、

もっと綺麗にグラデを出したいので

太いフォントを使いたかったのです。

が、Adobeのwebフォントを使ってしまうと

これを誰かにコピペして使わせることは

おそらく出来ない。。ということがネックでした。

webフォントじゃない、普及されているフォントのまま

サイトに使うことを前提に今回は考えます。

 

昨日の時点ではこのテーマのデフォルト指定の

ヒラギノ角ゴシックのboldを使用していました。

これです。

Hiragino Bold.

 

フォント指定なしだとデフォルト使用。

(winだとおそらくMSゴシックで見えてる?)

でも、フォントが細いとせっかくのグラデーションも

なんだかよくわからない。。と残念な結果でした。

とりあえず、macwindowsの標準搭載フォントなら

webでも見られるんじゃないかなあ、と

arial blackという太いフォントを指定してみました。

が、これです。

Arial Black

 

macでもwindowsでもGoogleChromeならば

太いフォントで見えている。。はずです。

ところがですね、iPhoneで確認したところ

こんな感じの見え方になっていたんですね。

Times New Roman

 

実際はTimes New Romanじゃなく代替えフォントなので

iOSのデフォルト明朝の何かなのですが

これは自分の意図したフォントではないわけです。

好みなのでこっちのがいいじゃない?って方も

中にはいると思いますが、まあ、それは置いといて。

 

うむ、これはきっとOSの問題。

自分は基本、iPhoneで書いて読んで

たまにPCで書いたり読んだりします。

文だけならフォントの見栄えも大した問題ではないですが

今回のように、CSSでフォントをデザインすることだと

フォント表示の意味合いが大きく左右します。

せめて、ゴシックと明朝の違いくらいはクリアにしたい。

 

一通り調べたところ、最新情報としてまとめた

こちらのサイトが非常にわかりやすいです。

 

 メール配信サービスの会社の実践ノウハウ集です。

おそらく、CSSについて明るくないお客さんにも

分かってもらえるように作ったページなのでしょう。

(お客さんじゃないですが、読ませていただきました。)

 

で、このサイトのずーーっと下の方に

各OSで表示可能なフォントがサンプル付きで出ています。

何種類も載ってるんですが、今回の自分は

mac、win、iOS(以下3OSと呼びます)の

全てで表示できるフォントを使いたいので

そこから探して行きますと、これです。

Verdana

font-family: Verdana;

 

Verdanaっていうフォント。

これだと、おそらく3OSで同じように見えているはず。

このフォント、あまり聞き覚えがないなあと思ったら

マイクロソフトが開発したフォントでした。 Windows育ち。

でも、なかなかに可愛らしく視認性も良い書体なので

これはぜひ、今後CSSで使っていこう!と思いました。

 

3OS対応の英字フォントはもう一つこちらもあります。 

Arial

font-family: Arial;

 

もし見出しなどで、ちょっと雰囲気変えたいなって時は

この中から使うと良いかもしれません。

上述のTimes New Romanも3OS使えるみたいです。

 

英数字だけになりますが、海外の有名な格言とか

紹介したいカフェの名前とかにもいいかもですね。

 

さじ