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