ホームGatsbyブログのフォントを変更しました。
2020年1月08日

ブログのフォントを変更しました。

font

10月28日追記
Gatsbyブログについて、初noteを書きました。
【完全版】爆速GatsbyでWordPressちっくなブログを作る全手順

こんにちは、筋肉めがねです。

読みやすいフォントの大きさ、そして色はどういうものなのか。幾つかのブログを参考にさせていただいたところ、どうやら文字の大きさは16pxが主流であること、そして文字の色は真っ黒ではなく、少しグレイがかっている色が良い、という事がわかりました。
参考にさせて頂いたブログの中でも特に以下のブログは参考になりました。
読みやすいWebタイポグラフィとデザインルール設計について

以下、本日の目次です。

SCSSでフォントを変更した

以前、以下のブログでsrc直下にindex.scssを作りましたが、こちらのファイルへ必要な情報を書いていきます。

/src/index.scss
p, li{
    font-family: Yu Gothic, Helvetica Neue, Helvetica Sans, sans-serif !important;
    line-height: 1.8 !important;
    letter-spacing: .05rem !important;
    color: #444 !important;
    font-size: 16px !important;
}

html {
    color: #444 !important;
    }

各行の末に!importantと書いておりますが、これはそれぞれの項目が他のscssファイルで定義されている事があるので、それを上書きするんですね。
これで、pタグとliタグの文字の大きさとfont-familyを変え、そして、全体の文字の色をグレイっぽくしてみました。

もう一つ、各記事のタイトルの文字の大きさを変更し、タイトルを左寄せにしたかったので、以下の修正を加えました。

/src/components/PostTemplateDetails/style.scss
.post-single {
    &__inner {
        max-width: $layout-post-single-max-width;
        padding: 0 15px;
        margin: 0 auto;
    }
    &__title {
        //font-size: $typographic-base-font-size * 2;
        font-size: 2.2rem !important;
        text-align: left !important;
        ...

以上で、各記事のページの文字の見栄えは満足のいくものになりました。
次回は、top pageのデザインを変更していきます。

それでは、本日は以上です。

シェアする