【比べてみました】  Webフォントと画像化した文字

こんにちは(^ ^) FONTPLUSスタッフのナオです。

日々FONTPLUSやWebフォントについてご説明していると、ときどき、「フォントにこだわりたいときは画像にしたらいいんじゃない? 画像と何が違うの?」という声をいただくことがあります。
そこで、今日は「Webフォント」と「画像化した文字」を実際のサンプルで比較しながら、違いを説明します。

サンプルを作ってみました

画像化した文字
文字を画像化したサンプルバナー
 

架空のホテルのバナーを「Webフォント」と「画像化した文字」で作成しました。
たいして違いはないんじゃない?と思われた方は↓↓

サンプルを触ってみませんか?

文字を選択してみてください

「Webフォント」の文字は、選択することができますが、「画像化した文字」は画像全体は選択できますが、文字を選択することはできません。
Webフォントなら、電話番号やメールアドレスなどの文字情報がコピーできるので、検索したり連絡するときに便利なんです! 

文字を拡大してみてください

サンプルのメールアドレスのように小さな文字が見えにくいなと思うことありませんか?
そんなときでも「Webフォント」なら拡大してキレイな文字を確認することができます。 「画像化した文字」は、文字の輪郭がぼやけたり荒くなったりして読みづらくなると思います。
※PCでは、「Ctrl(またはcommand)」キーを押しながら「+」キーを押すと拡大できます。

違いを感じていただけましたか?

「Webフォント」と「画像化した文字」。見た目にはあまり変わりませんが、実際に文字を触ってみることで違いが分かっていただけたかな、と思います。

「画像化した文字」はあくまで画像ですが、「Webフォント」はテキストデータなので、文字情報をコピーしてそのままPCやスマホで使えますし、サイズを変えてもフォントの品質が落ちません。
また、内容を変更するときも、画像だと都度作成し直してアップロードが必要になりますが、Webフォントならテキストを書き換えるだけなので簡単です。さらにSEOにも効果的!
これらは「画像化した文字」にはない、テキストである「Webフォント」のメリットです。

「Webフォント」のメリットについては、過去の記事で詳しく紹介してますので、よかったらご覧ください。
【いまさら聞けない】 Webフォントとは?-その2- メリット

普段何気なく見ているあのサイトにも、実はWebフォントが使われているかもしれませんね〜♪

ではまた〜(^ ^)/