デバイステキストをCSSで制御するTips諸々

レスポンシブWebデザインもすっかり定着し、様々な解像度の端末も増えたからか、昔と比べると画像テキストを使わずデバイステキストを扱う機会が増えたように思います。

なのでデバイステキストをコントロールするtipsをメモがてら連々記しておきます。

内容

メディアクエリで改行を切り替え（brの表示非表示）
デバイステキストをウインドウ幅に合わせて拡縮（単位 vw）
デバイステキストの文章をウインドウ幅に合わせて折り返し（inline-blockの利用）
URLなどの長い文字列の強制的な折り返し（word-break:break-all）
デバイステキストの文字詰め（font-feature-settingsを使用してカーニング）
約物のみ文字詰め（Yaku Han JP）
デバイステキストのアンチエイリアスの制御（font-smoothingプロパティ）

メディアクエリで改行を切り替え（brの表示非表示）

メディアクエリでbrタグのdisplayを切り替えて制御します。

↓幅640px以下でのみ改行したい箇所用のクラス

//CSS
.pcNotBreak {
    display:none;
}

@media only screen and (max-width: 640px) {
    .pcNotBreak {
        display:inline;
    }
}

↓幅640px以下でのみ改行をとりたい箇所用のクラス

//CSS
@media only screen and (max-width: 640px) {
    .spNotBreak {
        display:none;
    }
}

//HTML
<p>少しあかりて、<br class="pcNotBreak">紫だちたる雲の細くたなびきたる</p>

brタグのdisplay初期値はinlineですので、一度display:noneを指定したbrタグのスタイルを上書いて表示する場合、blockではなくinlineにした方が想定通りの動作になるはずです。
（blockにしても基本問題ないケースが多いですが、inlineの方が予期せぬ挙動の違いに悩まされることはないはずです。）

また、ソース内の改行も見た目に影響するので、このようなスタイルをあてる場合はソース内の改行はしない方がよいかと思います。

// Bad
<p>少しあかりて、<br class="pcNotBreak">
紫だちたる雲の細くたなびきたる</p>

// Good
<p>少しあかりて、<br class="pcNotBreak">紫だちたる雲の細くたなびきたる</p>

デバイステキストをウインドウ幅に合わせて拡縮（単位 vw）

font-sizeの単位に「vw」を使用。
幅X%、高さautoを与えたリキッド画像のようにウインドウ幅に合わせて文字が拡縮します。

//CSS
font-size: 3.12vw;

ただ、メディアクエリなどで切り替えずにfont-sizeの単位に「vw」を使用すると、ウインドウ幅を広げると文字が大きくなりすぎたり、ウインドウ幅を縮めると文字が小さくなりすぎるなどといったことも起きやすい気がします。
その場合、最大サイズや最小サイズ（画像でいうmax-width、min-width）のようなものをメディアクエリを利用して設定すると扱いやすいです。

//CSS
html {
    font-size: 20px;
}

@media only screen and (max-width: 640px) {
    html {
        font-size: 3.12vw;
    }
}
@media only screen and (max-width: 320px) {
    html {
        font-size: 10px;
    }
}
//値はテキトーです

calcを利用してpxとvwを組み合わせた値を利用するのも手かと思います。

//CSS
p {
    font-size: calc(112.5% + 0.5vw);
}

Viewportに応じたフォントサイズ指定の精度をより上げたい場合は下記記事が非常に参考になります。

参考：Viewport Unit Based Typography

//ビューポート幅が1000pxのとき18px、ビューポート幅が600pxのとき12px相当の文字サイズを設定する場合
html {
    calc(75% + 6 * (100vw - 600px) / 400);
    //(12/16×100%) + (18 - 12) × (100vw - 600px) / (1000 - 600)
    //※16は多くのブラウザのデフォルト文字サイズ
}

デバイステキストの文章をウインドウ幅に合わせて折り返し（inline-blockの利用）

日本語の場合、センター揃えのテキストなどでウインドウ幅を狭めたとき、想定外の箇所で折り返されたりすると可読性が下がったり、見栄えがよろしくなくなったりすることも多いです。
そのような場合予め一塊にしておきたい分節どうしをspanなどで囲ってinline-blockを指定しておくと、その文節の塊が収まる幅より広い幅であれば改行されなくなります。

//CSS 
.inlineBlock {
    display:inline-block;
}

//HTML
<p>少しあかりて、<span class="inlineBlock">紫だちたる雲の細くたなびきたる。</span></p>

URLなどの長い文字列の強制的な折り返し（word-break:break-all）

ブラウザは基本的に英文において、単語の途中で折り返しをしません。
なのでURLなどで長い文字列が1単語とみなされてウインドウ幅が突き破ることがあったりするので、word-breakにbreak-allを指定して強制的に折り返したりします。
その際、文章全体にあてると英文にスタイルがあたった場合可読性が下がるので、その折り返したい文字列にのみスタイルをあてると良いかと思います。

//CSS 
.link-text {
    word-break: break-all;
}

デバイステキストの文字詰め（font-feature-settingsを使用してカーニング）

font-feature-settingsを指定する。

//CSS 
{
    font-feature-settings: "palt" 1;
}

font-feature-settingsはOpenTypeフォントの字形の切替えを行なうスタイルだそうです。
この指定は全てのフォントで有効ではなく、フォント自体がOpenType且つ「プロポーショナルメトリクス情報」を持っている必要があるそうで、「メイリオ」などには有効ではなく、「ヒラギノ」「游ゴシック体」「游明朝体」「Noto Sans CJK JP」などには有効です。

一部ブラウザでは特定条件下でバグもあるらしく、使用する場合はブラウザチェックした方が安全かと思います。
font-feature-settingsの値は「normal」か「"タグ名" 値」（タグ名の後の値は省略可）だそうで、タグ名は沢山あるっぽいです。
複数指定は、カンマ区切りで可能だとか。…現状のブラウザでどの程度対応しているか調べていません…

参考：
OpenType Layout tag registry
CSSでのOpenType機能の構文｜adobe

ブラウザ対応状況：
Can I use

"palt": 約物すべて文字詰め全角英数字はそのままの字形で文字詰め

"pkna": ひらがな、カタカナのみ文字詰め; 全角英数字、約物は文字詰めされない

"pwid": 全角英数字は半角に変換して文字詰め; 約物は一部のみ文字詰め、句読点は文字詰めされない

参考：
font-feature-settings の文字詰めを考察する｜スープアップデザインズ株式会社

約物のみ文字詰め（Yaku Han JP）

font-feature-settingsはブラウザによって挙動が変わったりもするので、せめて約物のみ詰めたいという場合もあります。
そのような場合、約物半角専用のWebフォントを作成、公開されている素晴らしい方がいるので利用させてもらいます。

Yaku Han JP - Qrac GitHub

FullバージョンとSmallバージョンがありますので、状況/お好みによって選択します。

Full Versionに含まれている文字
、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝…

Small Amount Versionに含まれている文字
〈〉《》「」『』【】〔〕（）［］｛｝…

// HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/yakuhanjp/1.3.1/css/yakuhanjp.min.css">

// CSS
.yakuhanjp {
  font-family: YakuHanJP, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}

デバイステキストのアンチエイリアスの制御（font-smoothingプロパティ）

mac OSで黒背景に白文字などの場合、文字が太く見える場合があります。
font-smoothingプロパティを設定すると、文字のアンチエイリアスを制御できます。

// CSS
セレクタ {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ただ状況によってはこの指定によって文字が細く見えすぎてしまう場合もあるので使用する箇所は選びたいです。

参考：
Webブラウザにおける文字のアンチエイリアスの現状の最適解

連々と書きましたが情報が間違っている/古いなどあるかもしれませんが、その場合は申し訳ございません。m(_ _)m

Makery Blog

西麻布のクリエイティブラボ「Makery」でテクノロジーとアイデアをこねています。