Webフォント

大きい見出しなどに Web フォントを利用する場合、画面やウィンドウサイズによっては、改行位置がデザインの意図通りでないものになることがあります。 これを解消するために、改行可能位置を示す<wbr> 要素がありますが、日本語の場合は、1文字1単語と解釈されてどこでも改行してしまうので、現状は、以下のように少し複雑な指定をする必要があります。 上が何もしていないもの、…

タイポグラフィを活かしたサイトデザインでは、スクリーンに対して大きく表示したり、周りのグラフィック要素との相対的な位置やサイズが重要になる場合があります。 例えば、以下のようなデザインカンプ（デザインの完成見本画像）の場合、ウィンドウサイズの変化によって、テキストのサイズや位置が変わると要素の比率が変わってしまい、コーヒーのビジュアル部分にテキストがかぶってしまうなど、デザイン…

見出しやリード文など、文字サイズが大きいために文字間が目立つ場合や、文の視覚的なまとまりが欲しい場合は、詰め組みするとより綺麗に見せることができます。 OpenType フォントは、文字の形状だけでなく、文字組版に関するさまざまな機能についての情報を含んでいます。 このうち、paltとkern（縦組みの場合はvpalとvkrn）という OpenType 機能を利用することで、W…

Web フォントには、主に「フォント配信サービスの利用」と「セルフホスティング」の２つの配信形式があります。 ここでは「セルフホスティング」について説明します。 セルフホスティングとは、Web サイト制作者がサーバー上にフォントファイルを置き、サイト内で利用する方法です。 閲覧数や設定をあまり気にせず自由に利用できる反面、単にサーバーに置くだけでは、閲覧者に知識がある場合にフォ…

Web フォントには、主に「フォント配信サービスの利用」と「セルフホスティング」の２つの配信形式があります。 ここでは「フォント配信サービスの利用」について説明します。 フォント配信サービスとは、Web フォントを配信するサービスを利用する方法です。フォントデータを自前で持つ必要がありません。 タイププロジェクトのフォントも配信しているREALTYPEや、Adobe CC製品に…

前回は Web フォントの魅力や利点について書きましたが、Web フォントにはいくつか課題もあります。 一つは料金の問題で、フォント配信サービス・セルフホスティングライセンスは、ほとんどが有料で、これが一つのハードルとなっているようです。また、長い期間残す必要があるサイトの場合は、現在のフォント配信サービスの料金体系と相性が悪い場合があります。 「デザイナーとしては Web フ…

Webフォントの利用には、様々な魅力や利点があります。まず、印象の統制とブランドの向上です。前回の記事でも軽く触れたとおり、日本ではまだ Web フォントの利用は多いと言えませんが、ブランドや印象が重要な場面に限って言えば、使われる場面がとても多くなりました。これは、国内の Web デザイン参考サイトなどを見るとよく現れていることが分かるかと思います。 コーポレートサイト、ラン…

Web フォントとは、フォントデータをインターネットから読み込み、Web ページをそのフォントで表示することができる技術です。 日本ではまだ常用とは言えませんが、英語圏では既に多くのサイトやサービスが Web フォントを利用しています。 試しに、同じサイトを別のフォントで制作してみました。※これらのサイト・画像の情報は本記事用に作成した架空のものです。 変えているのはフォントの…