Quantcast
Channel: EXP - クリエイティブな事をはじめた(い)全ての人達へ »デザイン一般
Viewing all articles
Browse latest Browse all 4

ちょっと話題になってたから「Google Noto Fonts」を触ってみた

$
0
0

台風8号が過ぎ、一気に夏が到来した感じで暑い日が続いておりますね。皆さま、如何お過ごしでしょうか?お久しぶりです、まゆげです!

今回は、各フィードでちょっと盛り上がっていた「Google Noto Fonts」について書いていこうかと思います。

Google Noto Fontsとは

Noto’s goal is providing a beautiful reading experience for everyone and for all languages. With visual harmony when multiple languages share a page.
引用元:https://code.google.com/p/noto/

Noto はすべての人が、複数の言語を扱うようなページでも読みやすいと感じられるようなものを目指して作られているようです。その目標の通り、かなり多くの言語を網羅して、かつそれぞれの言語で読みやすいフォントの特徴を活かした形で作られています。ちなみにこの「Noto」の由来は“No Tofu”の略だそうです。端末上で表示できない文字は代替文字として四角い記号(□)で表示されるのですが、これが“豆腐”と呼ばれていることから来ているそうです。つまり目標の通りの、“ノー トーフ”。

このフォントは、Adobeでもともと開発が進められていたSource Sansに、GoogleがオープンソースのPan-CJKに興味を持ち共同開発をスタートさせたようです。Adobeでは同様のフォントが「Source Han Sans」という名前で公開されています。

そしてついに、日本語のサポートが7月16日より開始されたとのことで、実際に中身を見てみました。

NotoSansJapanese

NotoSansJapaneselist

7ウェイト提供されています。その中でも私は細字ダイスキなので、一番細い「NotoSansJP-Thin-Windows」というのを最初に確認してみましょう。

NotoSansPreview

一番細いものでも、視認性も高いタイプフェイスで良い感じですね!個人的にはかなり好みです。

次、「NotoSansJP-Medium」

NotoSansMedPreview

最後、「NotoSansJP-Bold」

NotoSansBoldPreview

その他のウェイトについても気になる方は、ぜひご自身でダウンロードしてみてください。

ライセンス

誰もが気になるライセンスについてですが、同梱のLICENSEファイルにもあるようにApache 2.0 ライセンスにて提供されています。なので、再頒布となる形で使用する場合は一定の条件が発生しますので、注意が必要です。用法、容量を守って正しく使いましょう!

サブセット化

そのまま使うにしても、ファイル容量も1ファイル5MBほどと、ちょっと大きいので使いそうな文字だけを抽出します。

使用させていただくソフトは以下2つです。

それぞれインストールした状態から始めます。

サブセットフォントメーカー

まずはサブセットフォントメーカーを起動し、サブセットしたいフォントファイルを選択します。その後、「作成後フォントファイル」を入力し、抽出する文字を「フォントに格納する文字」に入力します。

subsetfontmk_001

一通り指定し終えたら、WOFF形式のフォントも作成する場合は一番下の「作成終了後、WOFFコンバータを起動する」にチェックを入れておきます。ここまで出来たら「作成開始」。

WOFFコンバータ

ファイルの作成が終了し、自動的にWOFFコンバータが起動すると思います。ファイル作成と一緒に表示を確認したいので「サンプルHTMLファイルを作成する」にチェックを入れ、「サンプル文字列」に、サブセットフォントメーカーで入力した文字列を入れておきましょう!

woffconv_001

ここまでを入力し「変換開始」を押下します。

たったこれだけで終了です。さっそく、できあがったファイルを確認してみます。

作成されたファイル

NotoSansSubsetlist
かなり小さくなりましたね!このサイズであれば色々と使用できるのではないでしょうか。ついでに、WOFFコンバータで作成したHTMLファイルを確認してみます。

表示確認HTMLファイル。クリックしてご確認ください。
表示確認HTMLファイル。クリックしてご確認ください。

キャプチャーはFirefox 30.0です。なかなか良い感じ!…かと思いきや、文字が数個崩れてしまっています。(※追記あり)何度か作成し、他のブラウザでも確認してみましたが、結果は同じでした。また別の機会に、手段を変えてサブセット化してみようかと思います。

タイプフェイスはすごく好みです。さっそく、機会があれば何かに使ってみようかと思います!

最後に、昨今フォントのニュースが大好物なまゆげです。綺麗なフォントとか熱いタイポグラフィーネタがあれば、ぜひTwitterなどでも教えてください!!

リンクまとめ

最後までありがとうございました★

2014/8/10 追記

コメントにて、文字崩れの件が修正されたとのことで、確認をしてみました。
今度は分かりやすいように Thinフォントファイルで試しています。
NotoSansJP-Thin-subset_html2
ご覧のように、完璧に綺麗な第一水準文字でのサブセットが行えました!これは使い道がありそうですね★

コメントにて教えてくださった方もありがとうございました!!


Viewing all articles
Browse latest Browse all 4

Latest Images

Trending Articles





Latest Images