m2g19230120サイトのレスポンシブ化やモニター・ディスプレイの高解像度化などが進み、以前に比べてWebフォントを使う機会が多くなっています。Fontsでも使えるようになってきて、より身近になっているのではないでしょうか。文字詰めCSSを試してみるWebフォントを使い、文字まわりをきれいに見せることで気になってくるのが、やはり文字間の詰めの部分になります。PLUSなどの有料サービスでは独自機能として自動文字詰めが可能ですが、それ以外のものでは、特に文頭に約物が入る場合などは、「文頭を揃えるために固有にセレクタを振ってtext-indentで調整する...」などの処理に煩わされることも多いかと思います。そんな文字詰め問題に対し、「font-feature-settings」cssを使用するとプロポーショナルメトリクス(文字詰め機能)が有効になるということで、今回はTypekitと併用してそちらを試してみました。Typeフォントであれば、自動カーニングが使えるというものです。Webサイトのデモを作成してみました。“palt”;を指定することで、しっかりと約物や文字間が詰まりました。プロポーショナルメトリクスに関するプロパティは”palt”と”pkna”とがあります。本文に適用した場合などは、行幅が広くなるにつれ文字間を詰めることで文章が読みにくくなってしまう恐れもあるので、letter-spacingなどで調整を入れた方が良いようです。ブラウザの対応状況としては、IEは6〜、その他モダンブラウザにも対応しているようですが、まだWebフォントやその他タグとの絡みで不具合も多いようです。OS、iOS共にSafariでは文頭に来る約物に詰めが効かないといった不具合が見られました。このfont-fearure-settingsには文字詰め以外にもliga(リガチャ)やvert(縦組み文字)など色々なプロパティがあるようですので、気になる方は調べてみてください。★サンプルページ1★サンプルページ2その他の文字組みに使えるCSSCSS3もだいぶ実用化が進み、上記のfont-feature-settingsの他にも、文字まわりに関する多様なプロパティが出てきたことで、Web上でもより紙面に近い形で文字組みができるようになってきました。その中からいくつかをピックアップして試してみました。これらのプロパティは基本的にIE8以前のブラウザに対応していないことが多いので、実務で使用する際はその点にご注意ください。n;】段の間の幅をnに指定する縦組みとプロポーショナルメトリクスを併用するとベースラインが崩れて文字組みがガタついてしまうようでした。★サンプルページ3まとめご紹介したようなプロパティを色々と組み合わせることで、雑誌などのテイストに近い形でのWebページ上でのレイアウトが可能になってきています。最後に、これまでのものを応用して、紙面を意識した簡単なレイアウトを試してみました。実際に色々なプロパティを組み合わせて使用してみると、まだ不安定な箇所やブラウザ間での仕様の違いに気づく点も多いですが、これからのモダンブラウザやWebフォントの普及、CSSの進化と合わせて、Webサイトのレイアウトもどんどん幅広い表現が可能になってくるのではないでしょうか。2016ブランコ株式会社@bulanconetさんのツイートm2g北九州の隣、中間という小さな町出身。ブランコ2年目のデザイナーです。アングラ臭のする音楽や映画、文学などを趣味としながら、日々精進しています。2019茶匠が選ぶ九州のお茶を、職人が作るワイングラスで味わう。お気軽にご連絡ください。