タイポグラフィとCSSのスタイル宣言

みんなのウェディング、松久(@kamonegi1977)です。 このブログのフォント関係のスタイルを少し変えました。
変更する時に、CSS で設定できるテキスト関係はどんなのが今はあるんだろう?と思って調べたことを書き出してみます。

今回は、各項目毎に MDN へのリンクを用意しています。気になった箇所については、ドキュメントを参照してみてください。

くふうカンパニー Advent Calendar 2019の14日目の記事です。

text-emphasis

文字の上に「・」がつけられます。
地味なのですが、意外と古くからあるスタイルでした。使う機会があまりないですが、長文を扱う時に活用できそうです。

text-decoration

文字列に装飾を加えます。
下線(実線、点線、波線)の他に、上下ともに線をつけることもできます。
実際には text-decoration-line text-decoration-style text-decoration-color の省略になっています。
他に太さの指定のスタイル( text-decoration-thickness )もありますが、実装しているブラウザーが少ないようです。

ちょっと意外なのが、 text-decoration-color です。
何気なく紹介されていますが、あまり印象にない設定で iOS 12.2 から使えるようになっていたようです。正直、知らなかったです。

font-size

フォントの大きさを指定します。
この時、どの単位を使うのか?に悩みます。現在、みんなのウェディングではpxで指定しています。border なども px 指定なので単位を合わせている、というのが現状です。

font-weight

文字の太さなのですが…数値指定は、IE 以外で全て使える状態になっています。
数値指定を反映するには可変が可能な可能なフォントであることも必要になります。
結局 bold で指定しています。

bolder など親要素を起点として設定することができるのは知らなかったです。
本文中で、本文よりも強調したい要素に設定したりすることができそうです。

font-feature-settings

OpenTypeの文字詰情報を使うことができるようになります。
使えるフォントは限られているのですが、使えると長文があるサイトで効果がありあそうです。

詳しくは Adobeのサイトに書かれています。正直、情報量が多くて読みきれていないです。

letter-spacing

古くからある字間のスペース調整です。
今まで使い道が1つぐらいだったのですが、font-feature-settingsと組み合わせて使うと強力です。カーニングしたあとに少し広めにしたりすることが可能になります。

font-family と @font-face

@font-face は、ウェブフォントを利用するためにも、ローカルにあるフォントを指定するためにも使えます。
@-規則 の1つとして紹介されています。

まとめ

このエントリーを書くきっかけになったのは、游ゴシック、San Francisco などの書体を活用する方法を知りたくなりました。そこでfont-family と @font-face について確認しようと思ったのでした。
そこから、話が広がり OpenType を活用することで、長文が多いサイトで読みやすさを提供できる方法の一つになりそう、とタイポグラフィに関するスタイルについて確認しました。

「Typography - Atlassian Design」や、「The type system - Material Design」を見ると、スタイルに関する数値まとめがあります。

「Spectrum, Adobe’s design system」では、用途ごと、言語毎に書かれており、多言語ならではデザインシステムについて知ることができます。

フォントはデザインをするときに大切な一要因です。
タイポグラフィに関するスタイル設定が Web 上ではどうやって、どこまで再現できるのか?確認してみるのは勉強になりました。