letter-spacingを使用した文字のセンター寄せ・右詰め

letter-spacingを使用する時の小技

デザインをする上で、使用するfontによっては、letter-spacingを多めに使用したい場合がある。
その文字を右詰めにする場合、letter-spacingの特性上、最後の文字の右側にもスペースが発生する。

このように右側にスペースが追加される。
センター揃えの場合、微妙に左に寄って描画されるためデザインデータと一致しない。

そのためには下記のような手法で対処できる。

 

センター寄せの場合

text-indentを使用し、最初の文字の左側にも同サイズのスペースを発生させる

letter-spacing: 0.3em;
text-indent: 0.3em;

右寄せの場合も同様で、右側のスペースが存在するために他の文字や枠にきれいに揃わない。

右寄せの場合

この場合、ネガティブマージンで右側に同サイズ分ズラすことで対処が可能です

letter-spacing: 0.3em;
margin-right: -0.3em;

この様に、letter-spacingをうまく使って、コーディングを行っていってください。