狠狠撸

狠狠撸Share a Scribd company logo

「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）

?
?
swwwitch inc.
swwwitch inc.

2013年11月21日（木）19:00-20:00、アップルストア銀座で開催されたCSS Nite in Ginza, Vol.72のスライド。 http://cssnite.jp/ginza/vol72/ 参照リンクなど http://bit.ly/1blGiqd

1 of 220
Download to read offline
Webデザイナーのための タイポグラフ と文字組版 ィ 鷹野 雅弘 （スイ ッチ） アップルストア銀座 3Fシアター このスライドは、2013年11月21日にアップルストア銀座で開催された CSS Nite in Ginza, Vol.72のものです。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
私は、1996年から都内で「スイッチ」という制作会社を営んでいます。
当初、顿罢笔（グラフィックデザイン）からスタートし、
奥别产のフィールドと両轮で制作を行っています。
グラフィックデザインの人間からは、Webは文字に関して 甘い と言われます。
今回は「搁别濒辞补诲别诲」とついているように「続编」です。
前編をご覧になっていない方は、ぜひご覧ください。 http://www.slideshare.net/swwwitch/web-10114816
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
3つのパート（+1）で构成します。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
今年4月に青森は弘前（ひろさき）にお邪魔したとき、
こんな看板がありました。
あまり美味しそうじゃないですよね...
っていうか、「世にも奇妙な...」？
ホテルを予约して、実际に行ってみると印象が违うという経験はありませんか？
実店舗、サイト、それぞれのパーソナリティがありますが、 これらが一致していないと不自然に感じてしまいます。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
こちらの「キャッチ」のフォントを考えてみましょう
「AXIS B」：無難な印象ですが、クールやセクシーというニュアンスが出ません。
ウエイトを落として、軽めに「AXIS L」：悪くない感じです。
さらに細く「AXIS UL」。悪くないですが、可読性という面で難があります。
助词の文字サイズを下げてメリハリを付けるとよさそうですが、あまり変わりません。
「りょう」は、かな部分がやさしい印象となりますが、柔すぎるかも...
「ロゴアール厂迟诲」は游びすぎで、そぐわない感じが残ります。
使い古されつつありますが「础1明朝」がはまるかもしれません。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
こちらは「ヒラギノ角ゴ奥6」で组んだもの
英数字（たとえば惭）を见ると、笔文字っぽいニュアンスになっています。
下のサンプルは英数字に惭测谤颈补诲を设定。こちらの方がしっくりきませんか？
和文フォ ント 欧文フォ ント 英数字 英数字 半角記号類 半角記号類 ひらがな 漢字 全角記号類 和文フォント、欧文フォントは、英数字と半角記号類が共通しています。
和文フォ ント 欧文フォ ント 英数字 英数字 半角記号類 半角記号類 ひらがな 漢字 全角記号類 和文フォント内の英数字と半角記号類を「従属欧文」と呼びます。
2013年6月30日(日) 2013年6月30日(日) たとえば、日付を組むとき、英数字には欧文フォントを設定し、
2013年6月30日(日) 2013年6月30日(日) さらにメリハリを付けて仕上げます。
少なくてもグラフィックデザインの分野では混植が常识です。
ただし、フォントのメカニズムそのものが异なりますので、
英数字には、サイズやベースラインの调整が不可欠です。
ご参考までに、础辫辫濒别のコーポレートフォントはこのように変迁しています。
こちらは、アドビ。
Typography: Corporate typefaces As with our logo, consistent use of our corporate typefaces—Adobe Clean and Minion? Pro—reinforces Adobe’s brand identity. Both are OpenType?, a cross-platform format that provides richer linguistic support through widely expanded character sets and advanced layout features. Both fonts are available for download from Marketing Hub under Corporate > Corporate Fonts. Primary typeface - Adobe Clean Secondary type face - Minion Pro ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 =~!@#$%^&*()+[]{}|:;’:”<>?,./ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 =~!@#$%^&*()+[]{}|:;’:”<>?,./ Adobe Clean should be used for headlines and may be used for copy. Short headlines or labels can be all caps, otherwise headlines and subheads are sentence case. Minion Pro should be used primarily for extended running body copy in longer, multiple-page documents, such as brochures and datasheets. The introduction of the proprietary typeface Adobe Clean in April 2009 was to help differentiate Adobe in the marketplace. It replaces the previous sans serif corporate font, Myriad Pro. It will not be available for license to the general public. Avoid using weights other than Minion Pro Regular. Use Minion Pro SemiCondensed Bold for emphasis when needed. Avoid using Minion smaller than 9pt. Use standard numerals; do not use Minion’s Old Style numerals. To use Adobe Clean well along side the corporate logo, which continues to use Myriad Pro, avoid condensed or extended type. Minion Pro Semibold Condensed Minion Pro Regular Minion Pro Semibold Minion Pro Bold Adobe Clean Light Adobe Clean Regular Adobe Clean Bold Adobe Clean SemiCondensed Adobe Clean Bold SemiCondensed Adobe Clean Light Italic Adobe Clean Italic Adobe Clean Bold Italic Adobe Clean SemiCondensed Italic Adobe Clean Bold SemiCondensed Italic Minion Pro Semibold Condensed Italic Minion Pro Italic Minion Pro Semibold Italic Minion Pro Bold Italic Note: Alternate glyphs are available for the letter “g” and number “1” in Adobe Clean Regular. 25 Adobe Corporate Brand Guidelines | Adobe Confidential | 25 October 2010 アドビは現在「Adobe Clean」を使用しています。
具体的な 組み合わせ例を 教えてください ！ どのように混植（組み合わせ）のか、という質問を多くいただきますので解説します。
新ゴ 「画像をなるべく使わずにWebをレイアウ ト するテクニック」と題して、CSS3のプロパ ティ、Typekitを使ったWeb Fonts の実装 を解説。 こちらは「新ゴ」。
新ゴ 「画像をなるべく使わずにWebをレイアウ ト するテクニック」と題して、CSS3のプロパ ティ、Typekitを使ったWeb Fonts の実装 を解説。 新ゴ ＋ MO ClearTone SG ト 「画像をなるべく使わずに Web をレイアウ するテクニック」と題して、CSS3 のプロパ ティ、Typekitを使った Web Fonts の 実 装 を解説。 英数字部分に異なるフォントを与えると、ずいぶん印象が変わります。
AXIS 「画像をなるべく使わずにWebをレイアウト するテクニック」 と題して、 CSS3のプロパティ、 Typekitを使ったWeb Fontsの実装を解説。 AXISフォントは、従属欧文を使うことを前提に制作されていますが、
AXIS 「画像をなるべく使わずにWebをレイアウト するテクニック」 と題して、 CSS3のプロパティ、 Typekitを使ったWeb Fontsの実装を解説。 AXIS ＋ MO ClearTone SG 「画像をなるべく使わずに Web をレイアウト するテクニック」 と題して、 CSS3のプロパティ、 Typekitを使った Web Fonts の実装を解説。 「MO ClearTone SG」と組み合わせると、今っぽい感じです。
MO ClearTone SG なるべく使わずに Web をレ ニック」 と題して、 CSS3のプ を使った Web Fonts の実装 ただし、拡大してみると...
MO ClearTone SG なるべく使わずに Web をレ ニック」 と題して、 CSS3のプ を使った Web Fonts の実装 英数字部分のベースラインの調整が必要です。
小塚ゴシック 「画像をなるべく使わずにWebをレイアウト するテクニック」 と題して、 CSS3のプロパティ、 Typekitを使ったWeb Fontsの実装を解説。 アドビCS/CCなどをインストールすると必ず入る「小塚」フォントですが、
小塚ゴシック 「画像をなるべく使わずにWebをレイアウト するテクニック」 と題して、 CSS3のプロパティ、 Typekitを使ったWeb Fontsの実装を解説。 小塚ゴシック ＋り ょう 「画像をなるべく使わずにWebをレイアウトす るテクニック」と題して、CSS3のプロパティ、 「な」など、かな部分にクセがありすぎます...
小塚ゴシック 「画像をなるべく使わずにWebをレイアウト するテクニック」 と題して、 CSS3のプロパティ、 Typekitを使ったWeb Fontsの実装を解説。 小塚ゴシック ＋り ょう 「画像をなるべく使わずにWebをレイアウトす るテクニック」と題して、CSS3のプロパティ、 小塚ゴシック ＋り ょう ＋ Myriad 「画像をなるべく使わずに Web をレイアウトす るテクニック」と題して、CSS3 のプロパティ、 また、英数字はMyriadをベースにしていますが、若干細めなので再指定します。
ヒラギノ明朝 「画像をなるべく使わずにWebをレイアウ トする テクニック」と題し て、CSS3のプロパテ ィ、 Mac OS Xのデフォルトフォントのひとつ「ヒラギノ明朝」
ヒラギノ明朝 「画像をなるべく使わずにWebをレイアウ トする テクニック」と題し て、CSS3のプロパテ ィ、 ヒラギノ明朝 ＋ Garamond トする 「画像をなるべく使わずにWebをレイアウ ィ、 テクニック」と題し て、CSS3のプロパテ やはり英数字が少し野暮ったいので「Garamond」などを組み合わせるとベター。
ヒラギノ明朝 「画像をなるべく使わずにWebをレイアウ トする テクニック」と題し て、CSS3のプロパテ ィ、 ヒラギノ明朝 ＋ Garamond トする 「画像をなるべく使わずにWebをレイアウ ィ、 テクニック」と題し て、CSS3のプロパテ ヒラギノ明朝 ＋ Garamond ＋ り ょう アウ 「画像をなるべく使わずに Webをレイ トする ィ テクニッ ク」と題して、CSS3のプロパテ 、 「りょう」の明朝版もいい感じです。
A1 明朝 「画像をな く るべ 使わずにWebを イ ウ す テ レ ア ト る ク ニ ク」 題し ッ と て、CSS3のプロパテ 、 ィ ここ数年、イヤというほど見かける「A1明朝」
A1 明朝 「画像をな く るべ 使わずにWebを イ ウ す テ レ ア ト る ク ニ ク」 題し ッ と て、CSS3のプロパテ 、 ィ A1 明朝 ＋ Georgia 「画像をな く るべ 使わずにWebを イ ウ する ク レ ア ト テ ニ ク」 題し ッ と て、CSS3のプロパテ 、 ィ こちらも英数字が野暮ったい印象...
骋别辞谤驳颈补は、惭补肠/奥颈苍诲辞飞蝉に入っているフォントですが、
オールドスタイルと呼ばれる形状をしています。
http://blog.petitboys.com/archives/georgiaverdana.html
A1 明朝 「画像をな く るべ 使わずにWebを イ ウ す テ レ ア ト る ク ニ ク」 題し ッ と て、CSS3のプロパテ 、 ィ A1 明朝 ＋ Georgia 「画像をな く るべ 使わずにWebを イ ウ する ク レ ア ト テ ニ ク」 題し ッ と て、CSS3のプロパテ 、 ィ A1 明朝 ＋ Warnock レ ア ト テ 「画像をな く るべ 使わずにWebを イ ウ する ク ィ ニ ク」 題し ッ と て、CSS3のプロパテ 、 オールドスタイルはクセがありすぎるので、日本語では避けるとよさそうです。
合成フォントの組み合わせ（ゴシック系） ベース 英数字 かな ヒラギノ角ゴ Helvetica り ょう 小塚ゴシック Frutiger ネオツデイ 新ゴ Myriad 鴨野かな AXIS Verdana ゴシック MB MO ClearTone SG メイリオ ゴシック系では、これらを組み合わせるとよいでしょう。
合成フォントの組み合わせ（明朝系） ベース 英数字 かな ヒラギノ明朝 Garamond り ょう 小塚明朝 Minion リ ュウミン小がな リ ュウミン Warnock リ ュウミンオールドがな A1 明朝 Georgia アンチック 明朝系では、これらを組み合わせるとよいでしょう。
ところで、「贬别濒惫别迟颈肠补」と、それに似た「础谤颈补濒」というフォントがあります。
「どっちがHelveticaか？」というクイズがあったり... http://www.ironicsans.com/helvarialquiz/
その形状の違いを解説されたりしています。 http://ragbag.tumblr.com/post/187708731/arial-helvetica-on-friday-i-hosted-a-screening
ちなみに「础谤颈补濒」をどう読むのか、については
http://tosche.net/2012/09/arial_j.html なんと、正解がない！とのこと。
と、海外で活跃される大曲都市さんがブログで解説されています。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
上と下では、ずいぶん印象が変わります。
「する事が出来る」を
「することができる」のように表现することを
ひらく と呼びます。
どの文字を ひらく かについては、colissの記事を参考にしてみてください。 http://coliss.com/articles/build-websites/operation/writing/288.html
俺俺ルールではなく、ガイドラインがあります。
产颈锄驰辞耻の「エキスパートコラム」の
奥别产文章入门「わかりやすい文章の10大原则」も、ぜひ、ご一読ください。
スクロールしていくと
8番目に「ひらがなを多く」というセクションがあります。
「ひらがなを多く」したサンプル
さらに下、9番目に「カタカナを効果的に」というセクションがあります。
「カタカナを効果的に」使ったサンプル
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
あるコンビニのウインドウで、こんな掲示がありました。
パスモス イカ開始 一瞬、悩みますよね...
イカ？？
パスモス イカ開始 こちらは...
パスモ スイカ開始 これが正解
パスモス イカ開始 スペース的に厳しいのであれば、
パスモ?ス イカ開始 たとえば「?」（中黒）を入れるとよかったですよね。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
インフラエンジニアに相談 しておくことをおすすめします とあるプレゼンのスライドから拝借したものですが、
インフラエンジニアに相談 しておくことをおすすめします インフラエンジニアに 相談しておくことを おすすめします 改行位置を変えるだけで、理解できるスピードが変わることを理解できるでしょう。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
2013年6月30日(日) さきほども出てきた日付ですが、
2013年6月30日(日) 2013年6月30日(日) 英数字のフォントを変えたり、
2013年6月30日(日) 2013年6月30日(日) 重要でない文字の大きさを変えて
2013年6月30日(日) 2013年6月30日(日) ベースラインを調整します。
2013年6月30日(日) Before/Afterを
2013年6月30日(日) このように並べると、その差は歴然です。
次は「値组み」です。
数字は位取りのカンマを付けた方が理解しやすいですよね。
日付と同様、「円」の文字サイズを下げた方が理解度が増します。
重要度に応じて、适切に文字サイズを変更すると、伝わりやすさに反映します。
つまり、入力したままでなく、适切に手を入れようよ、ということです。
これもとあるプレゼンのスライドから拝借したものですが、
段落间のスペースを変更するだけで、构造の理解度が大きく変わります。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
箇条书きを「?」（中黒）で入力されてしまう方がいますが、
ワープロ系なら箇条书き机能、贬罢惭尝なら耻濒/濒颈要素でマークアップします。
さらに项目间にスペースを入れると见やすいですよね。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
こちらも、あるプレゼンのスライドから拝借。
パッと见た目、
3つの项目があるように见えてしまいませんか？
行间は広げればいいというものではなく、
适切にすべきです。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
入力したままにせず、
ツメ（カーニング処理）を行うのがセオリーですが、
そもそも、なぜ、詰める必要があるのでしょうか？
以前、话题になったもので、
「なぜか読めてしまうコピペ文章」というものがありました。
文字単位での顺番が适当でも、読めてしまうというものです（日本语/英语ともに）
たとえば、电话番号も、数字だけの罗列よりも
ハイフンで区切ると、読みやすさに差が出ます。
私たちは文字単位でなく、「まとまり」で认识しているということです。
先の例を出しますと、
日本语では「仮想ボディ」と呼ばれる正方形で文字が并びます。
下のようにツメ処理をすることで、単語やフレーズが まとまり になります。
そういう意味では、最近のトレンドとして「アケ组み」がありますが
「まとまり」として认识しにくくなるので、読ませたい场所には不适切です。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
アプリケーションでの自动カーニングについて解説します。
滨濒濒耻蝉迟谤补迟辞谤には「自动」「オプティカル」「和文等幅」などの自动カーニングがあります。
笔丑辞迟辞蝉丑辞辫にも「メトリクス」「オプティカル」の自动カーニングがあります。
滨苍顿别蝉颈驳苍には「メトリクス」「オプティカル」「和文等幅」と呼びます。
自動 （メトリクス） 自動 メトリクス メトリクス オプティカル 和文等幅 アプリケーションによって、名称が異なることがあります。
「自动/メトリクス」を使い、ツメが効かない场合に「オプティカル」を使用します。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
アルファベットの场合、文字ごとに固有の横幅を持っています。
前の文字に食い込んで组むことを「ペアカーニング」と呼びます。
文字ごとに决まっており、「自动/メトリクス」ではフォントが持っている値を参照します。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
自动カーニングで终了ではなく、若干の调整は必要です。
しかし、このとき、致命的なバグがあります...
これを回避するには、［プロポーショナルメトリクス］をオンにします。
笔丑辞迟辞蝉丑辞辫では、
［文字］パネルメニューにあります。
http://d.hatena.ne.jp/works014/20110827
この回避方法は、大石さんという方が発见されました。
カーニングに興味を持たれた方は、KERNTYPEで遊んでみてください。 http://type.method.ac/
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
実際(に近い)画面 実際（に近い）画面 パーレン（丸括弧）を半角で入力するか、全角で入力するか…
実際(に近い)画面 実際（に近い）画面 ベースラインを引いてみると、半角の方は下がっていることがわかります。
これは、フォントの设计が异なることが原因です。
このようにパーレンやブラケットが混じる场合....
全角を使った方が、上下のズレは生じません。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
住所を例に考えてみましょう。
数字やハイフンの前后はカーニングの调整の必要があります。
さらにハイフンを见てみると、このように下がっています。
文字サイズを调整したり、
ベースラインを调整すると、このようになります。
比べてみると、その差は歴然です。
电话番号も同様です。
中心线を引いてみるとわかりますが、
ハイフンの调整が必要です。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「巴里の咏」 巴里の咏 女性誌などでは、カギ括弧を罫線で表現しています。
このセッションでは「画像をなるべく使わずに Webをレイアウ トするテクニック」と題して 「新ゴ」などのフォントでは、ウエイトの太い場合、カギ括弧も太くなってしまいます。
このセッションでは「画像をなるべく使わずに Webをレイアウ トするテクニック」と題して このセッションでは「画像をなるべく使わずに Webをレイアウ トするテクニック」と題して これをウエイトを下げ、軽めのものにするとスッキリします。
このセッションでは「画像をなるべく使わずに Webをレイアウ トするテクニック」と題して このセッションでは「画像をなるべく使わずに Webをレイアウ トするテクニック」と題して このセッションでは「画像をなるべく使わずに Webをレイアウ トするテクニック」と題して ヒラギノなどを使って「小かぎ」にすると、さらにスッキリします。
「テクニック」 「テクニック」 「テクニック」 好みもありますが、ずいぶん印象が変わります。
こちらは滨濒濒耻蝉迟谤补迟辞谤で入力しただけのキャッチです。
下は少し加工したものですが、违いがわかりますでしょうか？
背面に帯を敷くとわかりますが、上の方は1-2行目が引っ込んでいます。
これを「面（ツラ）が合っていない」と表現しますが、これも手を加えておきたいです。 caption
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
画像化
OS X Mavericks（10.9）と
Windows 8.1では
はじめて同じフォントがプリインストールされています。
http://blog.petitboys.com/archives/yugothic-yumincho-jiyukobo.html
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
Google Fontsがポピュラーですが、
现在、629フォントもあります。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
http://mojidepa.com/login
http://decomoji.jp/
http://webfont.fontplus.jp/
http://typesquare.com/
Web Fontsを使うと、ウエイトの太いフォントに、さらに太字設定されてしまうなど、
现在では、问题山积みです。
http://takanomasahiro.tumblr.com/post/33520166004/web-fonts-2012-10
本日は、フォント（选び）の大切さについて触れてきましたが、
http://www.linelabo.com/gtmincho.htm
ある意味、フォントやその他の配虑は、适切に行われるほど存在感が消えます。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
その结果、実现したいのは、この2つです。
こだわりポイントを知って、こだわりましょう。
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）

More Related Content

「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）