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

関連記事

コーディングが苦手な初心者Webデザイナーに上達するCSSの勉強法... Webデザイナーになろうとして、まず最初につまずくのがコーディングです。 CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。 本記事ではCSSが全然わからない方がCSSのコーディングに慣れるため...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...
Bootstapのグリッドでcolumn崩れが起きるときの対処法... Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。 今回はその対処方を紹介します。 対処方法 Flexboxを使う gridの.rowにFlexboxを当てれば解決します。 CSS ....
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...
このフレームワークに惚れたらレスポンシブデザインについて色々考えちゃいました... 先日フレームワークのResponsive Grid Systemが大幅に変更されたと知って興味があって調べてみました。 Responsive Grid Systemとはグリッドシステムを使うためのフレームワークで、レスポンシブデザインでも使用できるような設計をされているものです。 確認し...
WebデザイナでもできるGitで本番環境に更新(同期)をする方法... 数年前からGitは使っていて最近ようやくバージョン管理にも慣れてきたかなと思っているのですが、実は本番環境のデータがどのコミットのものか把握できでいない時があり悩んでいました。 以前から特定のブランチのものを絶対に公開バージョンにしたいと画策していましたが上手く言っていなかったのです。 当初...