株式会社アプリコットデザイン株式会社アプリコットデザイン

tel.0120-622-835

営業時間/10:00〜18:00 定休日/土日祝日

tel.0120-622835

営業時間/10:00〜18:00 定休日/土日祝日

  • instagram
  • facebook

BLOGスタッフブログ

トップページ > ブログ > CSSのネタ帳~夢の文字詰め編~

CSSのネタ帳~夢の文字詰め編~

UPDATE : 2017.06.06

CATEGORY :
Sato
Sato

Sato

こんにちは、佐藤です。
今回はCSSで文字詰めが出来る夢のプロパティ「font-feature-settings」をお試ししてみます。
font-feature-settingsはOpen Typeフォントの機能を制御するプロパティです。
結果はこちら。
CSSで文字詰めサンプル もう、見るからに文字が詰まってますね!
上のベタ組みテキストは約物のアキがとても気になりますね。(。」のあたりが特に)
今までであれば、詰めたい箇所を<span>で囲ってひとつひとつletter-spacing(字間)で整えていく、というやり方をしなくてはならなかったものが、font-feature-settingで”palt”のキーワードを指定することでフォントデータに組み込まれているプロポーショナルメトリクス情報を元に、自動的に文字詰めをしてくれるのです。
font-feature-settingsを使うには、「Open Type」かつ「プロポーショナルメトリクス情報を持っている」フォントである必要があります。
上のサンプルで使用した「游ゴシック」や、「ヒラギノ角ゴ、明朝」、無料の素敵フォント「Noto Sans CJK JP」などで使用することが出来るのですが、
web制作において大変お世話になっている「メイリオ」には使うことは出来ません。
「メイリオ」はOpen Typeフォントなのですがプロポーショナルメトリクス情報が含まれいないそう・・・
さて、font-feature-settingsで、web上でも夢の文字詰めを実装することが出来た!のですが、
実際このツメ組みがこのままwebサイトの本文全体に使用されていたらどうでしょう?
かなり窮屈で読みづらいwebサイトになりそうですね。
読みやすくするためにはfont-feature-settingsで約物を詰めつつ、letter-spacingで全体の文字間を調節、という感じになるでしょうか。
見出しの短い文章などでは効果的に使えるかもしれません。

今回お試しした”palt”プロポーショナルメトリクスのキーワード以外にも、”halt”字幅半角メトリクス、”pkna”プロポーショナルかな、などなどのOpen Typeの機能を使うことができるようなので、いろいろ試してみようと思います。

参照:Adobe Typekit CSSでのOpenType機能の構文
https://helpx.adobe.com/jp/typekit/using/open-type-syntax.html

この記事を書いた人Who wrote this blog

Sato Tomoe

核心をツク鋭い感性を持つ
デザイナー系WEBエンジニア

RELATED POST関連する記事

CONTACTお問い合わせ

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

  • 信州ファームデザイン
  • 信州ファームマーケット
  • 株式会社POCKET
  • 株式会社Think for Design