PCでこのブログをご覧になる時の推奨ブラウザは、Chrome・Firefox・Edge・Safariです。
Internet Explorerでは、一部コンテンツが正常に表示されない場合がありますのでご注意ください。

トップへ

今後のフォント作りの励みになりますので、以下の各バナーを1日1クリックお願いします(費用はかかりません)。
※PCからご覧の方は、Ctrl(Command)キーを押しながら各バナーを順番にクリックすると、別タブで開きますので、画面が切り替わる煩わしさがありません。

同様にこちら↓も1日1クリックして頂けると幸いです。
ブログランキング・にほんブログ村へ

20170726日(水)00時00分

Webフォントに於ける3つの理想

ここ5年くらいの間に、急速にWebフォントが普及した気がする。
さらに現在は、Google FontsのNoto Sans(源ノ角ゴシック)や、再配布・改変可能なフリーフォントが増えたこともあり、割と気軽にWebフォントを導入できるようになった。
フォントの描画の汚いWinでも、(ブラウザにもよるが)割ときれいに表示される。

ただ、環境によって、正常に表示されたりされなかったり、まだまだ問題はある。


最終的にWebフォントで、どこまで達成できれば良いか?
これって僕が思うに、以下の3段階に分けられると思うんだよね。

①異なるデバイス(PCやスマホ・タブレット(iOS・Android))でも同じフォントで表示されるようにしたい。
②紙面同様に、サイト上のプレーンテキストを任意のフォントで表示したい。
③紙面同様に、指定したWebフォントで高度な文字組がしたい。

結論から言うと、現状なら①はほぼ確実に達成できるだろう。
Webフォントサービスで提供されるフォントが増えてきたので、②も達成しやすくはなってきているよね。
Webフォントサービスに頼らなくても、再配布・改変が可能なフリーフォントをWebフォント化してCSSで指定すれば、複数(任意)のフォントを指定することができる。

ただ、ライセンス的にWebフォント化できないフォントもあるから、②を達成するには限度がある。
例えば、MORISAWA PASSPORTの契約で使えるTypeSquare(Webフォントサービス)では、MORISAWA PASSPORTで使える全てのフォントがWebフォントとして提供されているわけではない。
ま、ライセンスの問題があると、仕方ないけどね。


――では、③はどうか?

大手Webフォントサービス(TypeSquareFONTPLUSなど)で、CSSのfont-feature-settingsを使うなどして、OTFのプロポーショナルメトリクスと同様の機能(ツメ組)が使えるようになっている所がある。
紙面で文字組する場合、ツメ組した方がきれいな場面もたくさんあると思うけど、現状、Webフォントでそこまでやって良いものか?

Webフォントって、サーバーが不安定だと、正常に配信されないこともあるんだよね。
あるいは、ユーザーの環境によっては(特段古い環境でなくとも)、やたらと表示が遅くなったり、そもそも表示されなかったりする場合すらある。
そんな環境にいるユーザーが、③が達成されたサイトを見たら、レイアウトが崩れてしまうんじゃないか?という懸念がある。
ツメ組も、Webフォントサービスに付随するものであれば、そのサービス自体が相当安定したものじゃないと、安易に使うのは良くないのでは?


①ならほぼ確実に達成できる、と先述したが、何らかの理由でWebフォントが表示されなかった時の想定もしておくべきだろう。
CSSのfont-familyで、先頭に任意のWebフォントを指定するだけでなく、その後ろにデバイスフォントも指定しておいたりね。


Webフォントや、それを提供するサービスも、OSやブラウザも、どんどん進化してきたけど、まだ過信はできないと思う…。
それでもフォント好きの僕は、つい過信して、FontStreamのWebフォント、ブログのあちこちに指定しちゃっているけどね(笑)。


以上、ィヨロシク!!
関連記事

コメント

  • ★の項目は必ず入力してください。
  • 記事の感想、意見など、何でもお気軽にどうぞ。takumiは大いに喜びます。
  • 「送信」クリック後の確認画面でパスワードの入力欄がありますが、いたずら防止のため、後からコメント内容の修正・削除はできないようにしています。内容をよくご確認になった上で投稿してください。間違って送信してしまった場合や、コメントの削除が必要な場合は、その旨を2通目のコメントにお書きになって送信してください。
  • コメントはtakumiの承認後に反映(公開)されます。反映したコメントには、基本的には同じ記事のコメント欄にて返信させて頂きます。
  • コメントを非公開にしたい場合は、「非公開コメント」のチェックをお忘れなく。また、非公開コメントで返信が必要な場合は、必ずメールアドレスを入力してください。
非公開コメント