自分用のメモを兼ねて。随時追記中。
ちょっと一手間で見た目が良くなるスニペット集
- フォントのカーニングとアンチエイリアスの調整
- テキストの両端を綺麗に揃える
1.フォントのカーニングとアンチエイリアスの調整
-
font-smoothing
でアンチエイリアスの調整 -
font-feature-settings
でカーニングの調整します -
letter-spacing
で文字間をお好みで空ける
デモ:http://codepen.io/kokimaekochi/pen/XNLMdx
@mixin fontBeauty {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: "palt" 1;
font-feature-settings: "palt" 1;
letter-spacing: .2em;
}
section {
@include fontBeauty;
}
2.テキストの両端を綺麗に揃える
- 基本は
text-align: justify;
でOK - IEの為に
text-justify: inter-ideograph;
を追加
デモの右側が反映済みのやつです。
デモ:http://codepen.io/kokimaekochi/pen/XNLPxQ
.justify {
text-align: justify;
text-justify: inter-ideograph;
}