【レポート】CSS Nite LP, Disk 21: タイポグラフィ、組版、Web Fonts

2012年2月4日にエッサム神田で開催された「CSS Nite LP, Disk 21: タイポグラフィ、組版、Web Fonts」に行ってきました。その名の通り、フォント・フォント・フォントなセミナーになりました。

知って得するアルファベットの基礎知識(高岡昌生さん)

  • 見た目も大切だけど、フォントの背景を知ると、より知識が深まる
  • フォントにはマナーがある
  • 大文字「CAPITAL」、大文字を小さくした文字「スモールキャップ」、小文字「lower case」、大文字&小文字「CAP & low」
欧文を扱う上での誤りやすい例(コントヨコさん)

  • フォントに対する配慮が欠けていると、信頼性を失い、クライアントのイメージを損ねる
  • イタリックにする際は、ツールを使わず同じフォントファミリーにあるイタリックフォントを使う
  • 「〜」は欧文では使わない。ハイフンでもチルドでもない「Enダッシュ - (option + ほ)」
  • 「3点リーダー」はピリオド3つではなく「エリプシス...(option + れ)」
  • 「長いダッシュ」は「Emダッシュ -- (option + shift + ほ)」
  • アメリカ英語とイギリス英語では略し方が異なる。混在するとかっこわるい。
  • 文頭は大文字が原則だが、最近は固有名詞(adidas, eBay など)であれば文頭であっても小文字でOK。
Webデザイナーのための欧文フォント入門(ヤマダコウスケさん)

  • Helvetica」「Univers」「Akzidenz Grotesk
  • 「Arial」の呼び方はマチマチ。「アライアル」派が49%で少し優勢。
  • 「comic sans」は世界一嫌われているフォント(?!)
  • Webフォントでよく使われているフォント「Proxima Nova」「Museo」
The Web Fonts(小山田晃浩さん)

  • 1997年勧告のCSS2には記述されていたWeb Fontsも、CSS2.1ではゴッソリ削除されていた。のち、CSS3にて復活。
  • 文字を画像にした場合「メンテナンスが大変」「HTTPリクエストが増える」「コピー&ペーストができない」
  • Web Fonts の使い方
    1. フォントを用意(ライセンスに注意!市販のフォントはほぼNG)
    2. 変換ツール(「WOFFコンバーター」など)でフォントを変換
    3. サーバーにアップ(日本語フォントの場合、数MBになるので注意。欧文の場合は数十KB。)
    4. CSSの「@font-face」でフォントを読み込み、「font-family」で指定する。
  • 上記のように自分でフォントを用意するよりも、Web Fonts を提供しているWebサービスを利用するのがベター。ただし、ほとんど有料。
  • Web Fonts はすでに使える技術。日本の企業サイトでも使われはじめている(ex. オロナイン)

いままで自分の知識として不足していたフォントに関する知識について、いろいろ勉強することが出来ました。コンさんが「外国に行って日本語の『ー』が『-(ハイフン)』になってたら違和感を感じるよね」とおっしゃっていましたが、日本人が欧文のマナーを守らないで制作していたら、同様のことを感じるんだろうなぁ・・・とハッとさせられました。

そして何よりも、登壇者のみなさんのフォントに対するリスペクトや「フォント愛」をビンビンに感じられるセミナーでした。

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働きながら、個人でもWebサイト制作業務を請け負う。趣味ではシャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー