デザインが素晴らしいのが前提として素晴らしいデザイン通りにWEBコーディング時にて
難儀なところをいくつか出てきたので、
お客様とのすり合わせの際に参考にしてもらえると嬉しいです
#フォントファミリー
あたりまえのように日常に存在しているフォント。
しかし、デザイナー様が持っているフォントは当たり前のように皆様のパソコンに付属しているものではなかったりします。
例をいくつか
- ヒラギノ - macのみ（windowsXD使いはフォントもっていないと見れない、無理やり持ってきても改行は〼となります）
- 游ゴシック - mac , windowsのみ（実際は近しいフォント）,モバイル(iOS , Androidにはない）
- Adobe製品のフォント デザイナー様ではなくサイト管理者様がadobeフォントを使用できるライセンスに登録してもらう必要があります
これらはフォントを選別して使いたいフォントを使用したいのならフォント自体どのようなものかを知っておく事が大事だと思うのです。
#カーニング(letter-spacing)
●デザイン上のレタースペーシング
レ◯タ◯ー◯ス◯ペ◯ー◯シ◯ン◯グ
●WEB上のレタースペーシング（lette-spacing:◯em;）
レ◯タ◯ー◯ス◯ペ◯ー◯シ◯ン◯グ◯
文字の最後にレタースペーシングの値分余計に増えています。つまり。
テキストの中央配置のときにその分ずれます
●デザイン上のレタースペーシング
【左余白】レ◯タ◯ー◯ス◯ペ◯ー◯シ◯ン◯グ【右余白】
●WEB上のレタースペーシング（lette-spacing:◯em;）
【左余白】レ◯タ◯ー◯ス◯ペ◯ー◯シ◯ン◯グ◯【右余白】
きっちり中央寄せしたい場合にちょっとずれるので__WEBではtext-indentを足してあげます__
●WEB上のレタースペーシング（lette-spacing:◯em; + text-indent:◯em;）
【左余白】◯レ◯タ◯ー◯ス◯ペ◯ー◯シ◯ン◯グ◯【右余白】
こうなります。
##起こる可能性のある不具合
きっちり中央寄せしたい場合text-indentとletter-pacingのスペースがデザインより設定した値の2つ分増えてしまうので
__letter-spacingに値がある＋中央寄せしたい場合は無理のないような余白があるデザイン__が必要です。
###右詰めは？
文字部分をspanなどでインラインにしてから右ネガティブマージンをいれてあげます。
margin-right:-◯;
#トラッキング(font-feature-settings)
字詰をよしなに設定する装飾です。
よしななので厳密にはわかるかもしれませんが、どのくらいのサイズを詰めているかは計測難しいです。
2021/10/28時点ではnoto sans JPがまたfont-feature-settings効くようになったみたいです。
##起こる可能性のある不具合
トラッキング＋カーニングで＋の値を指定している場合
広げたいのか詰めたいのかどっちなのかわからないのと実数が計測しにくいのでやめてほしい。
##まとめ
昔はこんなカーニングやトラッキングが頻繁に発生している場合は全部画像でよかったのですが、
昨今はフォント＋装飾で指定できるようになってきました。
（本当に画像よりフォントだけのほうがSEO評価高いの？グーグルさん！？とは未だに謎ではありますが）
また映画などの翻訳が昔よりかなり短い文章になっていると聞いたのですが、
昨今のデザインにデフォルト的に使用される文字を広げるカーニングはその時代背景を組んでいるのかもしれません。
疑問なのですがその文字を広げるカーニンは果たして日本だけで起こっている現象なのでしょうか。
英語圏の方はletter-spadingなんてタイトル部分以外使わんよ？と言われるかもしれません。
海外サイト作成の際はどの国の人に向けて文字を見てもらいたいかを考えると海外のWEBに詳しい人に教えてもらうしかないのかもですね。
（誰かしっていたら教えてください。）
読んでいただきありがとうございました！