Cntlog > スキルアップ・ノウハウ > コーディング > 【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた

【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた

TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。
そのCSSは「font-feature-settings」というものです。

詳しい事は下記記事よりご確認ください。

文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング

簡単にCSSでカーニング出来るんだーやったーとか思ってたのですが、また興味深いツイートがありました。

どんなときにも自動詰め組みが良いかと言われるとそうではないよなー。
なので考えるよりも実際に比べたほうが早いかなと思って比較をするページを作成しました。
また自分なりに「font-feature-settings」の使い方で試したい事があったのでそれも並べてみました。

サンプルを作ってみた

 .default-block { padding: 1em; background: #e8f5e9; } .sample-block { font-feature-settings: "palt"; background: #eceff1; padding: 1em; } .custom-block { font-feature-settings: "palt"; letter-spacing: .1em; background: #e3f2fd; padding: 1em; } 

font-feature-settings比較ページ

自分で作ったサンプルでは単純にfont-feature-settingsを入れるより、文字詰めしていないほうが読みやすいかなーという印象です。
ただ、「」の部分(サンプルだと「弱虫やーい。」のところ)とかが文字詰めされているので、この点は読みやすいかな思ってます。

なので「letter-spacing」を使うと文字間もいい感じに合わさりつつ、余白も詰まって読みやすいのかなと思ってサンプルに加えました。

いかがでしょう。

結論

font-feature-settingsはすごく魅力的なプロパティには変わりないので私は使っていきます。特に見出し周り。
Web上で出来ることがどんどん増えて僕は見てて楽しいです。

関連記事

【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました... これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。 乗り換えた理由 以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。 理由は単純で、Frontnoteだと導入が楽だったからです。 ス...
WinSCPで特定フォルダをアップロードから除外した... 普段WinScpの同期の機能を使ってアップロードしているのですがGitを使っているとそのファイルも対象になってしまうのでうざいなと感じてました。 設定画面で簡単にできたのでメモです。 上記画像の除外のところにといれれば.gitっと記載されているフォルダはアップロードの対象外となります...
WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法... 各種ソーシャルボタンってWordPressなら簡単に設置できるけど、自分で普通に設置しようと思うと初めてだとどうやって設置していいかわからないですよね。 そんな人向けに、よく見るデザインを簡単にSNSボタンの設置方法をご紹介します。 はじめに 各種ソーシャルボタンをまとめて簡単に設置できて...
Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】... CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。 実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。 ...
RGBAをIE8でも使う簡単な方法 CSS3で使いたい機能というと角丸やグラデーション系が多いと思いますが、割りとRGBAも便利かなと思っています。 PIEを始め、角丸やグラデーションはIE8でも使えるようにという対策はありますが、RGBAはあまり聞きませんね。 私はPHPを使ってRGBAで色指定(透過率も)したものを画像生成する...
元WEBデザイナが1年間WEBディレクターになってみて気がついた事... 2013年2月から転職をしました。 前職はWEBデザイナーでしたが今はWEBディレクターです。 もともとコミュ力が低いのにディレクターに転向したのは今でも無謀だったなーと思っていますが、将来的にディレクションのスキルを持っていないとマズイなと考えているので後悔はしていません。 ただやりたいと思...