Subscribe Twitter

2012年9月29日土曜日

このエントリーをはてなブックマークに追加

◎ Adobeが公開しているオープンソースのソースコード表示用フォント「Source Code Pro」を試してみた。



 「Source Code Pro」は、9月24日にAdobeが公開したオープンソースのフォントで、プログラミングやコーディングなどソースコードを表示して作業する際に、視認性を高めて、文字の打ち間違いを減らし、作業効率のアップを図ることに重点をおいて開発された欧文フォント。「Source Code Pro」という名称からしても、ソースコード用に特化していることが分かる。利用はオープンソースなので無料。

実際に使って、他のフォントと比較して、具体的にどこが違うのか試してみた。

 紛らわしい文字の特徴差が強調されている
Macで報告書などを作成する際、システム標準のフォントで、例えば「Illustrator」などど入力すると、大文字の「I」(アイ)と小文字の「l」(エル)がほとんど同じに見えて、プリントするまで不安になる。「Source Code Pro」に限ったことではないが、紛らわしい字形の特徴差が強調されている。画像は最下部が「Source Code Pro」。

 モノスペース(等幅)フォントなので、同じ範囲内の文字数は同じに
下画像は、Mac上のフォントの比較。これも「Source Code Pro」に限ったことではないが、モノスペースの「Source Code Pro」(画像左)のほうは、半角スペースを含めて、同じ26文字が揃う。プロポーショナルなフォント(画像右側)より明らかに見やすい。

 同じモノスペースの「Monaco」との比較
下画像の同ポイントサイズのテキストのそれぞれ上が「Source Code Pro」、下が「Monaco」。実際にソースコード編集に使う12ptの文字は、シンタックスハイライトのカラーを付けて3種類。「Monaco」のグリフは「Source Code Pro」によく似ていて、同様に見やすいが、小文字の「a」や数字の「0」は、「Source Code Pro」のほうが、視認性が良いかもしれない。このあたりになると好みの問題になる。

左:Source Code Pro 右:Monaco

記号もいろいろ工夫されている。各サイズの上が「Source Code Pro」、下が「Monaco」。

 「Source Code Pro」のライセンス
SIL(Summer Institute of Linguistics International )のオープンフォントライセンス(Open Font License 略称OFL)。

OFL は、フォントの使用、研究、改変、再配布を、それ自体を販売しない限り自由に無償で行うことができる。ただし、再配布などの場合は、著作権表示および同じライセンスを含める必要がある。基本的に個人がPCやwebで通常のフォントとして利用する限り無料。OFLの日本語訳の詳細は、SourceForge.jpにある。

 Google Web Fontからも利用できる
この発表とともに、Adobeのオープンソースフォントのプロジェクト 「Adobe Edge Web Fonts」が、Google Web Fontsと提携したので、Google Web Fontsからも利用できる。 
ダウンロードページ(Google Web Fonts)へは、このページの右上、「Open Source Code Pro in Google Web Fonts」から。

Google Web Fontsのページを開くと、「Normal 400」(ページの左側)がデフォルトで選ばれている。ここで全てのウェイトを選ばなくても、フォントファミリー全体をダウンロードできる。右側の「Download your Collection」をクリック、「webで使うならダウンロードする必要はないよ」みたいなアラート画面が出るので、真ん中あたりのブルー文字「Download…」をクリックすれば、zipファイルでダウンロードされる。

同じくSourceForgeからもダウンロードできる。
同様にGitHubからもダウンロードできる。

ちなみに、理由は分からないが、Google Web Fontsから落としたフォントファミリーは、「.ttf」のみだが、SourceForgeから落としたフォントには、「.otf」も入っている。Macの場合は、こちらの方が使いやすいかもしれない。
Google Web Fonts から
SourceForge から

 htmlエディタの「Brackets」には標準で入っている
下の画像は、同じくAdobeがオープンソースとして公開しているhtmlエディタの「Brackets」に 「Source Code Pro」を 表示させたところ 。

Related Post:


0 コメント: