type.centerのウェブフォント。圧倒的に格好いい新しいフォント情報サイト

type.center

type.centerという新しい文字のサイトが公開されています。
大日本タイポ組合が編集長を務めていて、デザインもユニーク。
あと、これでもかと日本語WEBフォントが使われていて
いったいどうやってるんだろうと思うところがたくさんあります。
私のようなウェブに詳しくない人は、気になる部分が一杯です。

type.center は「文字による文字のための文字のサイト」。
「文字をつかう人」と「文字をつくる人」の両方に向けて
ニュースやインタビュー記事、独自の連載など
盛り沢山・文字だくさんの内容になっています。

現在上がっている記事だけでもお腹いっぱいの文字一杯。
今後のニュース、文字関連のイベントレポートやインタビュー記事も楽しみです。

またカレンダーは誕生日のタイプデザイナー、きょうが記念日の文字ウンチク
きょう行われる文字イベントなど、毎日楽しめそうです。

今後は「文字と著作権」「文字なぞりによる書体見本」の連載も予定とのこと。
実に楽しみですね。

英文表記 type.center(すべて小文字です)
和文表記 タイプ・センター(ナカグロが入ります)
読み タイプドットセンター(または タイプセンター)
URL http://type.center
サイト公開日 2014年10月1日
問合せメールアドレス [email protected]
twitterアカウント @type_center
facebookページ https://www.facebook.com/type.center.jp

オープンソースの日本語WEBフォントJapanSans。ウェブフォントファンからのフリーフォントの贈り物

japansans日本語webフォント

ウェブフォントファンの仮立ち上げから一ヶ月、ついに正式オープンです。
というわけでフリーフォントの贈り物です。
 
名前はJapanSans(ニホンノSans)でウェブフォント+印刷用フォントのセット。
どんな感じのフォントかはJapanSansのサイトでウェブフォントにJapanSans80を指定しているので見て頂けると一番わかりやすいと思います。
 
「源ノ角ゴシック (Source Han Sans )」をウェブフォント用に表示調整した「かなフォント」。商用・印刷なども含め、あらゆる条件で無償利用することが可能です。
 
JapanSansは100%、90%、80%、70%の幅が選べる等幅で無いフォント。「っ」などの小さな文字はより狭い幅になっています。そのため、使い方によっては狭いスペースに通常よりも文字数を多くできたり、文字間隔をあけて使えば、センスの良い雰囲気を演出できたりと、使うのが楽しいウェブフォント専用書体です。フォントファイルはサブセット化済みでOpenType、Truetype、eot、Woffを収録。漢字も入った印刷用フォントも同時収録しておりWord・Excel・Adobeフォトショップなどでも活用できるフリーフォントです。

 

JapanSansのサイトへ行く

AppleはiPhone6発売以後のウェブサイトを刷新。Webフォント(AXIS)とナビゲーションデザイン、レスポンシブの何が変わったのか知っていますか?

apple-website

ざっくりアップルのウェブサイトリニューアルについて個人的な意見を。
AppleはiPhone6発売以後のウェブサイトを刷新しました。
何が変わったのか?大きく分けて3点です

・ウェブフォントの採用(コーポレイトフォントであるAXISフォントに)
・フラットデザイン化(ナビゲーション・アイコン・フッター)
・レスポンシブ化(スマホ対応)

今まで、こうじゃ無かったのが不思議なくらいです。
よく考えるとアップルがウェブに関しては古典的だったのがよく分かります。
私もこれらの項目に懐疑的な部分も若干あるので(特にフラットデザイン)
見本的なウェブサイトであるアップルとして悩んだ部分もあると思います。

 

アップルのウェブフォントの採用

apple-webfont

ほとんどの部分で上の画像のようにテキストが選択できるようになりました。
いままで画像化していたAXISフォントがWEBフォントとして採用されています。
読み込みも非常に早く、IEでもかなり綺麗に表示されていて流石です。
(レイアウト的にはWinが綺麗、レンダリングはMacの方が綺麗で引き分け)
SEO的にもこちらの方が良いし、ブランディング上の当然の結果だと思います。
実は今多くのサイトでメイリオ・ヒラギノ・MSゴシック指定の上位指定が減ってきています。
もしかしたら、数年後はこれが主流になっているかもしれませんね。

 

アップルのフラットデザイン化

apple-flatdesign

個人的に驚いたのがメインメニューのフラットデザイン化です。
なぜならスマホのボタンは使い捨てのデザインでも良いのですが
ウェブサイトは5年スパンぐらいで見た方が良いと思うし
そもそも今までやらなかったのは、フラットデザインが
デザイン的に良くなく、ボタンは多少立体感がある方が
優れていると判断していたからだと思うんです。
とはいえ、さすがグレー1色に見えて、透明感のある仕上がりになっている。
フッターもメインメニューに合わせたのか薄いグレーに。
またストアのページなどがアイコンに変わり、個人的には萌える。
他社のようにいかにもフラットデザインですというレイアウトやカラーでなく
あえて、グレースケールで統一している事から、フラットと言うよりシンプル化
というのが正解なのかもしれません。

 

アップルのレスポンシブデザイン

iphone-website

これも驚いた点の一つ、アップルのスマホ対応。
今までアップルはスマホで見ても美しい非スマホ対応レイアウトを心がけてきた。
レスポンシブでなくても、ちゃんと考えればスマホで見ても奇麗。
まっとうな考え方だと思うし、実際スマホで見てる人少ないしと思う。
しかしウェブフォント・フラットデザインまでやって
これだけスマホユーザーが増えると流石にやるべきだと
いう意見が多数派になったのだと思います。
といっても、どんなユーザーが見ても伝わるデザイン・レイアウトである
という基本姿勢は変わっていないので、これらの3点の変更も
アップルにとっては、大きな変更の前の小さな変更と言えるかもしれません。

 

 

ウェブフォントのクロスドメイン問題について〜WEBフォントトラブルTIPS1

webfontトラブル

WEBフォントの記述において
IE、Firefoxの一部のバージョンではクロスドメイン問題が発生するようです。
つまり、フォントを利用するサイトのドメインと
WEBフォントを設置したサーバのドメインが異なる場合
上手く表示できなかったりするわけです。

この事を忘れていて、無駄に時間を費やしてしまいました。

この問題を解決するのに役立ちそうなページを記録しておきます。

クロスドメイン制約によりFirefoxでFont AwesomeなどのWEBフォントを表示できない
http://blog.lowaivill.com/development/cross-domain/

さくらのサーバーだとIE9以降でwebfontが文字化けする
http://qiita.com/ikedahidenori/items/a33236a40986cd22f37d

WEB フォントをクロスドメインで利用する
http://logicalerror.seesaa.net/article/198146322.html

Webフォントを利用する際に知っておくと役立ちそうなTips
http://kachibito.net/web-design/web-font-tips.html

ホームページ作成サービス「BiNDクラウド」のウェブフォント〜丸明オールドや丸丸ゴシックが使える

bind-webfont

気になるけど、試してない「BiNDクラウド」のウェブフォント。
フォントワークスの書体に加えて、丸明オールドや丸丸ゴシック等
人気のカタオカデザインワークスの29書体が使えるんですよね。
カタオカデザインワークスのフォントが使えるというのは面白い

私のように、ウェブが苦手で、お店とかのホームページが
作りたいという人は良いかもしれない。
ちょっと高いと感じるけど、サーバー・ショッピングカート・
WEB フォントも使えてこの価格は安いと思う。

入門者向けの“エントリー”コースでもショッピングカートや日本語Webフォントなどの機能が利用可能で、初年度は無料で提供される(2年目以降は月額480円、税 …

Visit Website

日本語ウェブフォントを作ろう!Notosans(源ノ角)で日本語webフォント

webfontmaking

ウェブフォントを作ろうと思っても、実際フォントを作るのはたいへん。
とはいえ実際に公式に無料でウェブフォントとして使えるフォントは
M+フォント
Source Han Sans(源ノ角ゴシック)(Noto Sans

IPA FONTは再配布あたるとの回答が出ているので
通常の方法では難しいかもしれません。
そして無条件で改変して、再配布しても大丈夫なのは
おそらく、M+と源ノ角という事になります。

というわけで源ノ角ゴシックを使ってウェブフォント
の作り方を紹介します。

今回はレギュラーに加えて90%、80%、70 %の細長い書体
も同時に作ってみました。普通じゃつまらないので。

フォントを触るときは、やっぱり1つはフォント作成ソフト
があると便利です。
・OTEditかTTEdit
・Fontographer
・Glyphs

ぐらいがメジャーどころでしょう。今回程度であれば
なくてもなんとかなりそうですが。

1.フォントのサブセット化

日本語フォント全部をアップすると数メガ、いや10メガを越えてしまう
場合が多いので、まるごとアップすると、表示に時間がかかり
ウェブサイトしては致命的です。
なので、「かな」やアルファベットやよく使う記号などのみにして
漢字は「メイリオ」や「ヒラギノ」などが自動的に表示される様にします。
これはサブセットフォントメーカーを使って文字を減らします。
ウェブサービスでも、できる所もあります。

今回は4種類のフォントを作りました。
横幅が100%~70%までの4段階を作っています。

webfont作成

サブセットフォントメーカーはすごく簡単です。
フォントを選んで、フォントにしたい文字をテキストで記述するだけ。
日本語ウェブフォント

 

2.ウェブフォントに変換

ウェブフォントの変換にはWOFFコンバータを使います。

日本語ウェブフォント作る

もしすでにインストール済みであれば自動的に立ち上がります。
フォント名はJapanSansとしておきました。
あとは「変換開始」をクリックするくらいです。はいできあがり。
できあがったファイルは以下。サンプルのHTMLファイルも書き出されます。
これは必要ないので削除してください。

webfont作成

 

TrueTypeが必要なら、フォントソフトなどで書き出してください。
ここまで30分。そして適用してみたウェブサイトがこちら。
http://webfontfan.com/japansans/

実際には、調整にかなりの時間を要します。
というのもWindowsはフォントレンダリングが独特なので
多くの場合綺麗に表示されないからです。
とくに今回のフォントのように、微妙で、繊細なラインは
表示の調整が難しくなりがちです。
どちらかというとM+の様に水平のラインが平行な方が
調整はしやすいです。
フォントレンダリングの確認はMac、Windowsの各OSや
IE、Safari、Chrome、Operaなどのブラウザで一通り確認します。
あとはiOSやAndroidなどでも実機で確認できたらしておいた方が良いでしょう。

モノスペースのGoogleフォントをセンス良く使いたい〜ゴシック体に合わせるwebフォント

monofont-googlewebfont欧文モノスペースフォント(等幅フォント)は使い方によっては
日本語のウェブフォントに合わせるフォントとして面白いと思います。
通常、日本語ウェブフォントは等幅です。しかし欧文フォントは
プロポーショナル(可変幅)でウェブページ全体の濃淡にバラツキが出て
それが好まれない場合もあると思いますし、使い方によっては
モノスペースフォントは、単純にかっこいいんですよね。

そこでウェブフォントが簡単に無料で使えるGoogleFonts
良さそうなモノスペースフォントを紹介します。

Anonymous Pro

Anonymous Pro

 

Cousine

Cousine

 

Share Tech Mono

 

firemono

Fira Mono

 

DroidSansMono

Droid Sans Mono

 

Inconsolata

Inconsolata

 

Lekton

Lekton

 

UbuntuMono

Ubuntu Mono

いかがですか?ちょっとした見出しから本文にも使いやすそうな
GoogleFontsを選んでみました。

フォント描画が綺麗&高速になったGoogleChrome37

chrome-webfont

わーい、というか、うぐっと言うか
Chromeのフォントレンダリングが変わりました。
まだIE8やXPが主流の日本では、小さな変化ですが
方向性としては、歓迎です。今作っていた、ウェブフォントも変更ですね。

個人的にはメイリオが今のWindowsの足かせになっていると思うので
噂されている次期OSの次のOSではWin自体の独自レンダリングを変えて欲しい。
VISTAが出たときには、見守っていましたが
OS8.1から游ゴシック・游明朝を入れてしまったので
どっちつかずの方向性になってしまっている気がします。
Googlefontや源ノ角ゴシックのことも含めると
なおさら今のOS・IEの方向性はどっちつかずです。

今後のWindowsOS・IEはオープンで普通を目指して欲しいです。
最近はあまりに独自で囲い込みをしすぎな気がします。

フォントのレンダリングを従来のMicrosoftのGraphics Device InterfaceからMicrosoftのテキストレンダリングAPI、Direct Writeに移行の引用記事

「Google Chrome 37」公開、Windows版はフォント描画を強化、64ビット版も

INTERNET Watch – ‎2014年8月26日‎
Googleは26日、ウェブブラウザー「Google Chrome」の最新安定版となるバージョン37.0.2062.94を公開した。Windows版、Mac版、Linux版がGoogleのサイトからダウンロードできる。既存ユーザーには自動的にアップデートが適用される。 Google Chrome 37では、Windows …

DirectWriteに対応しフォントレンダリングを強化した「Google Chrome 37」安定版がリリース

GIGAZINE – ‎2014年8月26日‎
Google Chromeの安定版「37.0.2062.94」がWindows・Mac・Linux向けにリリースされました。 Chrome Releases: Stable Channel Update http://googlechromereleases.blogspot.jp/2014/08/stable-channel-update_26.html 今回のバージョンアップによる機能追加は以下 …

オノマトペラボ TypeSquare

オノマトペラボ
オノマトペラボ。オノマトペラボはオノマトペの力でコミュニケーション上の「むずむず」を「しっくり」に変えることを目指すプロジェクト。オノマトペというテーマからして文字好きにはグッときてしまう。やっぱりいろいろなフォントが訪問の度に変わるのも、ウェブフォントを有効に活用している感じでダイスキ。今のところ目立ったウェブフォントを有効に活かしているサイトが少ない中で、頭一つ抜けているデザイン。
http://onomatopelabo.jp/

無料でダウンロードできるWebアイコンフォントFont Awesomeの使い方〜サイズ変更とボタン化

fontawesome

実は日本でよく使われているウェブフォントはアイコンフォントです。

Font Awesome はサイト上でよく使われるアイコンを
ウェブフォントにしたものです。ちょっとした場面で役立ちます。

サイズや色など CSS で様々に調整して利用することができます。
http://fortawesome.github.io/Font-Awesome/

Font Awesome のトップページの『Download』よりダウンロード。

zipファイルを解凍し、サーバーにCSSフォルダ内の
「font-awesome.css」か「font-awesome.min.css」のどちらかと
fontフォルダのフォントをアップロード

難しすぎてよくわからないという人はワードプレスの場合
プラグインもありますのでインストールするのもあります。

例えば<i class=”icon-pencil”></i>やショートコードで鉛筆を表示したサンプル

[icon name=icon-pencil]

センター配置にしつつ、160pxにして、行の高さを160pxにして、リンクを貼ってみたサンプル。

[icon name=icon-pencil]

 

Bootstrapのボタンの中に入れてみたサンプル
[icon name=icon-pencil] 鉛筆です

ちなみにBootstrapのボタンおよびアイコン付きのボタンが簡単に作れるサイト
http://www.thiagocanudo.com.br/bootsbutton/