tanatiyo デザインカンプからのコーディングを行っている時に、文字のサイズや行間、文字間は指定通りなのに、なぜか文字がデザイン通りに合わない、ということが出てきました。
その解決方法を備忘録がてら( ..)φメモしておきます。
結論からいうと、プロパティはtransformを使います。
もっと詳しくかくと、例えば以下のように
transform: scale(0.8, 1) translate(-10px, 0);とします。scaleとtranslateの両方を使いました。
scaleの1つ目の引数は左右方向への縮小・拡大、2つ目の引数は上下方向への縮小・拡大、を設定できます。
次にtranslateですが、これは1つ目の引数が左右方向への位置の調整、2つ目の引数は上下方向への位置の調整になります。
なぜscaleとtranslateの両方を使うかというと、例えば上の例でいうと、scaleで左右方向への文字が0.8倍に縮小された分、文字の幅全体が中央に縮んでしまいます。それをtranslateのー10pxなどと指定して、縮んだ分左方向に寄せています。（＋の値なら右方向に寄る）
例えば、文字を全て左寄せしている場合などは、scaleを使うと文字のスタート位置がズレることがあるので、translateを使って微調整していく、という流れです。
このtranslateについては文字を何倍に縮小したか、拡大したかで計算して、具体的な数値を割り出す方法もあるらしいです。
私は計算等はせず、デザインを透過させながら微調整を行いました。