4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

CSSで文字をもっと読みやすく工夫しませんか!?

image.png

一番重要なのは“文字の読みやすさ”

Webサイトやブログ、様々なサイトがインターネットのなかには溢れていますが、その中でもやはり一番みられるのは文章だと思っています。

書籍では文字は一番の重要度であったため、様々な工夫が凝らされていたように、Webでもその点を重要視してみるのは、原点に立ち返ることにも含まれるのではないでしょうか?

日本語ベースに考えるフォント

Webでは、大体のベースが英字になっているため日本語に置き換える必要があります。

例えばフォント。Windowsがその最たる例ですが、確実に日本でシェアを獲得しているのに、日本語のフォントを基本的に重要視していない気がします。ここでCSSで指定することが重要です。

僕のよく使っている font-family はこれです。

font-family:
     -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;

基本的なOSごとのフォントを抑えたシンプルなものになっています。

Windowsとmacには游ゴシックが搭載されていますが、文字のデザイン上読みにくい気がして、導入していません。しかもmacとWindowsの游ゴシックは同じものではなく、デザインもベースラインも異なる全く別物なため、使おうとすると相当なテコ入れが必要です。

フォントをこだわるなら「Adobe Typekit Webフォント」

よく、Webで日本語フォントを使う際にGoogle Fontsからインポートする例がありますが、日本語フォントは英字フォントと異なり、容量が大きすぎるため、モバイルでの動作や、ユーザビリティを考えると使ってはいけない代物です。

そこで、Adobeが提供しているWebフォント、「Typekit Webフォント」をお勧めします。

https://fonts.adobe.com/typekit

Typekitの日本語フォントのほとんどでは、JavaScript経由で表示されている文字のみのフォントを読み込む「ダイナミックサブセット」を導入しているため、非常に軽量にフォントを適用することができます。

ダイナミックサブセットと Web フォント提供

https://helpx.adobe.com/jp/fonts/using/dynamic-subsetting.html

CSSでカーニング

Webでは、和文フォントは等幅で表示されています。

書籍では文字の間手動で修正するのが一般的ですが、Webでは一般化する必要があるため、手動でのカーニングをすることはできません。

ですが、CSSでも字間を修正する方法は存在します。

画面に対する文字の大きさで調整する必要がありますが、今回は例として私のポートフォリオで使用しているものをご紹介します。

font-feature-settings: "palt" 1;
letter-spacing: .11em;

font-feature-settingsについて

font-feature-settingsは、OpenTypeフォントの機能を使うことができるようになるCSSプロパティです。

詳しい内容については省略しますが、この機能を使うことによってOpenTypeに内蔵されているフォントの字間情報を制御する「プロポーショナルメトリクス」を使用して、カーニングを自動的に行うことができるというわけです。

詳しい内容についてはこちらの記事がとても参考になります。

https://ics.media/entry/14087/

image.png

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

https://ics.media/entry/14087/

まとめ

フォント、カーニングを意識することによって、あなたのブログやサイトをもっと、読みやすく、一つグレードの高くなったサイトへと変貌させられるはずです。

これを期に、文字を再意識してみませんか?


話題のNotion Blogで作ったブログの方にも掲載しているので、ご確認いただくとありがたいです!!
https://blog.yahiro.me/css-readable-text


このような記事をどんどん作っていきたいと思っているので、
Twitterのフォローをしていただけるとありがたいです!!
Twitter @Yahimotto

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?