游とMerriweather

少し前にこのサイトのデザインをちょっと変えて、「本文は明朝、ただし見出しや強調などはゴシック」というスタイルにしています。と言っても、本文が明朝で表示されるのは游明朝体かヒラギノ明朝体が使える場合だけで、それ以外の環境ではゴシックになるはずです。

欧文書体は和文の従属欧文ではなくMerriweatherです。セリフとサンセリフのファミリーがあることと、エックスハイトが高く和文との相性が良いことから選びました。ウェイトは和文とのバランスから400ではなく300を使っています。MerriweatherはGoogle FontsやTypekit、Font Squirrelなどで入手できます。

CSSの指定としては、まずデフォルトがMerriweather Sansとゴシック体の組み合わせ。そして游明朝体またはヒラギノ明朝体が使えるかどうかをJavaScriptで検出し、もし使えれば本文でMerriweather（serif）と組み合わせます。ただし、見出しやテーブル、ボールドになる部分などはサンセリフとゴシックです。明朝体が使えるかどうかの検出には、FontDetectという自作のライブラリを利用しています。明朝が使える場合はhtml要素にminchoというクラス名がつくので、これでスタイルを分岐させます。

$font-family-serif:  "Merriweather";
$font-family-sans:   "Merriweather Sans";
$font-family-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN";
$font-family-gothic: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo";

html {
    font-family: $font-family-sans, $font-family-gothic, sans-serif;
}

.mainBody {
    .mincho & {
        font-family: $font-family-serif, $font-family-mincho, serif;

        h2, h3, h4, h5, h6,
        blockquote, dt, figure,
        em, strong, dfn, i, b,
        table {
            font-family: $font-family-sans, $font-family-gothic, sans-serif;
        }
    }
}

けっこう気に入ってます。