セミナーに行ってまいりました。今回はこちら↓

ABCでabcを語ろう!　TypeTalks 第44回
『Typography13』刊行記念
　「ウェブ組版の現在ーウェブのタイポグラフィを検証する」
http://www.aoyamabc.jp/culture/39428/

正式名称長かった！講師はカワセタケヒロさんです。

＜学んだことまとめ／目次＞
・Webにおけるフォントの変遷
・HTMLタグだけで引用符つけたりイタリックに出来る！
・CSSで合字使える！フィーチャー情報ってすごい！
・素晴らしきリガチャーアイコンフォント
・感想とまとめ：Webデザイナーの仕事について
※筆者はWeb制作ビギナーです。何か間違っていたらそっと教えてください！

■Webにおけるフォントの変遷

＜ビットマップフォント時代＞
ガタガタしてるけど可読性重視！
スタイルの主流は”MS Pゴシック”,サンセリフ。
↓
MacにOsakaが入る。
Osaka,"MS P ゴシック",サンセリフ
↓
＜flash全盛期＞
Googleの検索エンジンはflashデータから文字情報を拾ってくれないので、SEO的にとてもよろしくない。
↓
＜HTML5+CSS3時代（～現在）＞
flashなしでも色々実装できるようになった！
↓
アンチエイリアス（ざっくりいうとアウトラインが滑らかできれいな）フォントがシステムフォントに。
Macはヒラギノ角ゴ、Windowsはメイリオ。
この二つ、だいぶ印象違うけど、ひとまずきれいに表示されるようになってよかった！
↓
Mac、Windows両方に游ゴシックと游明朝が入る。
どちらのユーザーにも同じ表示ができるように！
↓
Webフォントサービスもいろいろ登場。
いろんな書体が選べる！
※GoogleFontは、世界中の文字文化の保護の一環、という側面もあるそうです。知らなかったー。

■HTMLタグだけで引用符つけたりイタリックに出来る！

HTMLタグは、「文章に意味づけする」もの。
その意味付けに応じて、表示を変えてくれるんですね。
そういえば<small>ってすると小さくなるけど、あんまり気にしてなかった…。ということで、今回はじめて知ったタグ２つ。

<i>→他と区別したいテキスト・印刷される際にイタリック体となるようなテキストに使う。固有名詞や慣用句など。自動的にイタリック（フォントやブラウザによってはオブリークになることも？）
イタリックにするのは欧文ならでは・日本語にはないルールなので、間違った使い方をしないように注意！
参考：http://www.htmq.com/html5/i.shtml

<q>→引用文に使用。引用符がつく。
和文にはカギカッコ、欧文にはダブルクォーテーションがつくが、その判断はhtml langの指定による。
参考：http://www.htmq.com/html5/q.shtml

■CSSで合字使える！フィーチャー情報ってすごい！

上記のように、「とある文字が並んだ時に変な風にくっついちゃうから、あらかじめくっつけておく」文字を表示させる方法です。
CSS3のfont-feature-settings、font-variant-ligaturesプロパティで実装可能。
フォントによりますが、フォントはあらかじめ合字（やそれ以外にもたくさん）の情報を実は持っている。CSSプロパティでそれを引き出す、ということだそうです。
※あらかじめ持ってる情報＝フィーチャー情報についてはこちらを参考にしました。

■素晴らしきリガチャーアイコンフォント

この合字＝リガチャーの機能を応用して、リガチャーアイコンフォントというのがあるそうです。
これは、見た目はアイコン（画像）だけど、ソースはimg等ではなく言葉になっているというもの。
たとえば、

これの何が良いのかというと、まずアクセシビリティ。
上記の「これはFacebookです」のアイコンを画像で入れた場合、音声読み上げではこんな感じ→「これは、画像、Facebook（alt属性）、終了、です。」一応意味は通じますが…。（もちろん、alt属性を入れてなければもっと意味が分かりません。）
リガチャーアイコンフォントなら、「これはFacebookです」とストレートに読んでもらえる！ノーストレス！
そして、altを記入する手間も省けるし、きれいでシンプルな文書構造になるのでSEOにも効果的。画像じゃないのでレスポンシブも扱いやすい。
いいことづくめのリガチャーアイコンフォント、自作もできるらしいです～。

CSSの機能すごいなーと感心しきりでしたが、まだまだブラウザやOS、他のプロパティとの兼ね合いで誤作動を起こしたりするようなので、しっかり検証しながら使ってきたいです。

■感想とまとめ

このように、Webの組版は技術の進化によりいろんなことができるようになりました。
タイポグラフィーは、ビジュアルだけでなくUI、IA、アクセシビリティ等様々な場面で重要になる要素。どこまで実装できるかは置いておいても、しっかり知っておかねばと思いました。

そして、セミナーの最後にWebデザイナーのお仕事について言及されていてまして。
UX、UI、グラフィックデザイン、コーディング、ライティング、ディレクション等々…デザイナーが考えるべき仕事は幅広いが、これらすべてに配慮したものが作れるのはデザイナーだけというお話。
荷が重そうだなぁ大変だなぁと思うけど、デザインという基盤をしっかり固めつつ、多方面に勉強していかねば！と気が引き締まる思いでした。