CSS
font
Webデザイン

おしゃれなWebをつくるには。

More than 1 year has passed since last update.

おしゃれなWebデザインをつくるTipsを、備忘録としてまとめます。

フォント

Font family

日本語でも、google fontを使う。
https://developers.google.com/fonts/
https://fonts.google.com/

サンセリフ系

"Josefin Sans",sans-serif;
'Roboto', sans-serif, 'Noto Sans Japanese', sans-serif, 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;

セリフ系

"Cinzel",serif,"游明朝体","ヒラギノ明朝 Pro W3",HiraMinProN-W3,"Hiragino Mincho Pro","MS P明朝","MS PMincho",serif;

font-smooth

アンチエイリアスをかける。

    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;

※モダンブラウザ:Chrome, Firefox, Safari対応。IE非対応。
font-smooth - CSS | MDN

font-weight

font-weight: 200;

letter-spacing

少しでもレタースペースをとるとオシャレ。

letter-spacing: 0.1em;

line-height

line-height: 1.5em; 

シャドウ

text-shadow: 1px 1px 3px rgba(0,0,0,0.6);

color

黒ではない色を使うとおしゃれ。
例:color: #323232;

その他

Box要素には、
shadowをかけるとおしゃれ。

border: #EBEBEB 1px solid;
box-shadow: 3px 3px 0 rgba(8, 1, 2, 0.03);

あとは、写真、マイクロインタラクションを工夫するなど。

メモ:
写真をぼかす/半透明フィルターかけて背景にする。
ボックスの右・左上に三角や、タイトルをいれる。

タイトル:日本語・記号・英語でサンドイッチするとおしゃれ。