cssスニペット集

自分用のメモを兼ねて。随時追記中。

ちょっと一手間で見た目が良くなるスニペット集

1. フォントのカーニングとアンチエイリアスの調整
2. テキストの両端を綺麗に揃える

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;
}