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上で出来ることがどんどん増えて僕は見てて楽しいです。

関連記事

コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...
Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】... CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。 実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。 ...
日本語でわかるSketchの使い方と機能 実際私も英語は苦手ですが、Sketchは全然使えています。 ただ初めての方だとSketchの機能が全然わからないと思いますので、メニューを日本語でわかるようにしてみました。 メニュー  メニュー項目の紹介です。 ショートカットキーメモ ⌘…Command...
使ってみたい管理ツール 近々職場の環境が変わりそうなので、プロジェクト管理ツールが必要になるかもしれないのでメモ。 Backlog ガンチャートが使い勝手良さそうだけど、その機能使う場合は月額費用がかかってしまうのが気になりどころ。 brabio 5IDまでOKの無料.エクセル風なので他の人でもとっ...