私は読み易いフォントが好きなのですが、マイクロソフトなどではメイリオが最近好きで、Windowsでは標準装備されているので良く使います。
iOSで言えばHelvetica NeueやSan Franciscoなどです。
ブログで使用するにあたって、似たようなNoto Sansのフォントを試してみました。最近のフラットデザインにも合いそうなフォントだと思います。
 |
| From Google |
数々のサイトからこのフォントのメリットをまとめると、
- 無償で利用できる
- 改変・再配布できる
- オリジナルフォントを作成する際に組み合わせて利用できる
- ウエイト（太さ）が7種類もある
- スマートフォンやタブレットなどのモバイルデバイスで読みやすいようにデザインされている
- 商業デザインでも利用できるクオリティの高さ
- 漢字も豊富に入っており、旧字体、中国語の字体なども含まれている
- 各国語の書体デザインが統一されてる
- 書体が綺麗
などでしょうか。
設定はちょっとめんどくさいですが、気に入っています。
Noto Sansは2014年夏頃からありますが、AdobeからもSource Han Sansとして発表されていました。ただし、単純に『Noto Sans』では、日本語には適用されません。
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
body {
font-family: 'Noto Sans', sans-serif;
}
調べてみると、ありました。
 |
| From Google |
ソースに直接記入する場合は以下のようにします。
<link href='http://fonts.googleapis.com/earlyaccess/notosansjapanese.css' rel='stylesheet' type='text/css'>CSSに記入する場合は以下のようにします。
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);本文に以下のように適用します。
body {
font-family: 'Noto Sans Japanese', serif;
}
後は、フォントの太さを調整しました。CSSの「font-weight」のプロパティには「100・200・300・400・500・600・700・800・900」の数字が使えますが、Noto Sans Japaneseは7つの太さ（7ウエイト）が用意されており、「600・700」は等しくBold、「800・900」は等しくBlackです。CSSのデフォルトは大体「font-weight: normal;」「font-weight: bold;」ですが、Noto Sansでは400がnormal、700がboldです。400がちょっと太い感じがしたので、Thinの100も検討しましたが、Lightの300くらいにしました。
『Noto』の名前の由来は『豆腐』だそうですが、Googleは以下のように説明しています：
When text is rendered by a computer, sometimes there will be characters in the text that can not be displayed, because no font that supports them is available to the computer. When this occurs, small boxes are shown to represent the characters. We call those small boxes “tofu,” and we want to remove tofu from the Web. This is how the Noto font families got their name.
from Google Fonts Noto Sans
昔の話ですが、日本語が英語のブラウザで『□□□□□□』と表示されてしまい、これを『豆腐』と読んでいたそうです。これが『No Tofu』となり、省略されて『Noto』となったそうです。何とも面白い話ですね。
個人的にはメイリオやヒラギノ角ゴよりも、きれいに見えるので、気に入っています。
オープンソースの美しい Noto フォントファミリーに日本語、中国語、韓国語が加わりました。 – http://googledevjp.blogspot.jp/2014/07/noto.html
Beautiful and free fonts for all languages – https://www.google.com/get/noto/#/family/noto-sans-jpan
https://www.google.com/fonts/earlyaccess
※注意事項としては、上記「Early Access」と書かれているように、本格提供のためのフィードバックを得るために公開している段階です。
