Web Designing

2009年2月号　P074〜077サンプルデータ
特集「Webタイポグラフィへの挑戦」
あの名作をHTML×CSSで再現しました！

金属活字、写植の時代から、DTPの今日にいたるまで、デザイナーたちは紙という媒体を使って美しいタイポグラフィを生み出してきた。
技術はまったく違うものの、その当時のデザインはいまのWebデザインに活かせるエッセンスに溢れている。
特集の最後に、CSSとHTMLのテキストだけを使って（画像をまったく使わずに）、かつての名作をWebブラウザで再現しようと試みた。
大谷秀映 (オオタニヒデアキ)

追記：2011年12月／ウェブフォントデモ〜http://fontgraphic.jp/wa

Neue Grafik

P074


HTML
P074_neue.html
CSS
main074.css

応用例
HTML
P074_neue2.html
CSS
main0742.css



【074ページ訂正のお知らせ】

書体は主に19世紀に作られたアクチデンツグロテスク体が使われている
↓
書体は主に19世紀に作られたアクチデンツグロテスク体がタイトルに使われている


Typographische Monatsbiatter
nr.4:1980/Scweizer Gragische Mittelungen
↓
Haas type specimen book

Type Specimen Book(HAAS社)

P075


HTML
P075_haas.html
CSS
INLINE

応用例
HTML
P075_haas2.html
CSS
INLINE



【075ページ訂正のお知らせ】

ハース社Helvetica清刷集の表紙裏(表2)



075ページで使っている画像はfettではなくhalbfettです。 （halbfettは現在のHelveticaファミリーのボールドにあたる）

＊Haas活字見本「Entstehungsgeschichte der Helvetica」ではfett＝boldだったが現在ではfettはブラックである。

Type Specimen Book(Belthord社)

P076


HTML
P076_belthord.html
CSS
main076.css

応用例
HTML
P076_belthord2.html
CSS
main0762.css



【076ページ訂正のお知らせ】

Typographische Monatsbiatter
nr.4:1980/Scweizer Gragische Mittelungen
↓
TM SGM RSI(Typografische
Monatsblätter/Schweizer
Grafische Mitteilungen/Revue suisse de I'imprimerie) 4/1980の213ページから

見出しやロゴのタイポグラフィ

P077


（上段左）
P077_01.html
077_01.css

（上段右）
P077_02.html
077_02.css

（中段左）
P077_03.html
077_03.css

（中段右）
P077_04.html
077__04.css

（下段左）
P077_06.html
077__06.css

（下段右）
P077_05.html
077__05.css

P077_05j.html
077__05j.css