強火で進め

このブログではプログラム関連の記事を中心に書いてます。

『「書体」はデザインの要 −デザイナーのための 文字&Webフォントセミナー』に参加して来ました

株式会社モリサワ監修!「書体」はデザインの要 −デザイナーのための 文字&Webフォントセミナー−
http://www.dhw.ac.jp/research/lecture/#lecture-298

フォント全般についての話

  • 山手線の駅名表示はモリサワの新ゴが使われている
  • 七夕まつりのフォント「くもやじ」。装飾的。格式張らない様に
  • マンガの表紙は装丁デザイナーが行なっている
  • 有名な装丁デザイナーとして NARTI;S の新上ヒロシさん

フォント関連の用語

  • ウェイト/ファミリー
  • 字面
  • 骨格/エレメント
  • 重心/ふところ
  • ウェイト:文字の太さ
  • 種類として U/H/B/M/R/L が有る
  • ウェイト全てをまとめたものがファミリー
  • ボールドは出来だけ使わない。理由としては機械的に均一的に太くしているため(明朝体のはらいの部分なども機械的に太く成るためゴシック体の様な見た目になってしまう)
  • ウェイトにより太さを変更した場合であればフォントの制作者が見栄え良く太く成るようにそれぞれのウェイトで調整している為、どの太さでもファミリーの特長が出ている
  • 一冊の本の中ではファミリーを統一するとすっきりした統一したデザインが可能に
  • 仮想ボディ:一番外側の枠。金属の金型の文字の時にボディと呼ばれていた
  • 字面が大きい文字:仮想ボディ一杯に書かれる文字。圧迫感を与える。長い文章の時には向かない。小さい声でしゃべっている様なイメージの場面では使ってはダメ
  • 骨格:文字の骨格に当たる細い線。そこに肉付けをしてデザインする
  • ふところ:周りが囲まれた領域
  • 重心:人間で腰の位置に当たる部分
  • ふところが広いとおおらか、狭いと引き締まった印象に。ゴシックはおおらか
  • 重心が低い:安定、親しみ
  • 重心が高い:品格が有る

エレメント

  • シンプル:すっきりした印象。ニュースタイル
  • 豊か(複雑):重厚な印象。オールドスタイル。筆跡が残っている様なデザイン
  • ウェイトが細い:読ませる文章に
  • ウェイトが太い:見せる文章に
  • 新聞書体:80%平体を掛けるときを前提にデザインされている。推理小説のタイトルなどにも使われている

Webフォントの話

※Webフォントは自分が既に知っていた事も多かったのでメモは少なめです。

画像で準備する代わりにWebフォントを使う優位性

  • Webサイトの検索製の向上
  • 読み上げ可能
  • 機械翻訳を掛ける事が出来る
  • レスポンスシブWebデザインへの親和性が高い

Webフォントへの対応状況

  • iOS 4.2からはttf/otf対応
  • iOS 5.1からwoffに対応

フォントのフォーマットを変換するサービス
※日本語フォントには微妙との事

ttf2eot - Convert TrueType Fonts (TTF) to EOT (Embedded OpenType) - Google Project Hosting
http://code.google.com/p/ttf2eot/

Microsoft Typography - Features of TrueType and OpenType
http://www.microsoft.com/typography/WEFT.mspx

Create Your Own @font-face Kits | Font Squirrel
http://www.fontsquirrel.com/fontface/generator

  • ダイナミックサブセッティング機能:ページに使われている文字だけを抽出してサブセット化されたフォントを配信。サブセットの最大文字数は1書体/1500字種(重複する文字は1文字種として判定)

※スライドには1書体/1500字種と書かれていたがこれは1書体に付き1500字種までという意味みたい。

国内のWebフォントサービス

FONTPLUS|フォントプラス
http://webfont.fontplus.jp/

デコもじ|ウェブフォントで、ホームページが、ブログが、もっと楽しくなる♪
http://decomoji.jp/

WEBフォント|アマナイメージズ
http://amanaimages.com/font/web/index.aspx

もじでぱ|ウェブフォントでブログ&ホームページの文字(フォント)を自由に変更して楽しもう♪
http://mojidepa.com/login

海外のWebフォントサービス

Typekit
https://typekit.com/

Fonts.com Web Fonts
http://www.fonts.com/web-fonts

Web
http://www.webtype.com/

Google Web Fonts
http://www.google.com/webfonts

Q:TypeSquareではサブセットのフォントが使えるとの事ですが、フルセットのものも使えるのか?
A:出来ない。フォントを販売している企業として流石にフルセットでの提供というのは抵抗が有る

Q:モリサワのTypeSquareで最も多く使われているフォントは?
A:通常のフォントではリュウミンや新ゴが人気だがTypeSquareでは意外にUDフォントの利用が多い

  • ブラウザ毎でのレンダリングのされ方が異なる。Windows/MacなどOSの違いで同じブラウザでも異なった描画がされる。
  • 意外にモバイルデバイスで使われている