今こそ使えるレトロなタイポグラフィ【10選】

HipstamaticやSpotify、アディダスなどをみると、私たちは昔ながらの方法や日々を求めているように感じます。マーケットがすべて最新技術で埋め尽くされすぎたせいなのでしょうか。進化し続けることに飽きてしまったでしょうか。それとも単にすべてシンプルで華やかだった過去を懐かしんでいるだけなのでしょうか。最近では、過去への執着心がその証拠となって現れてきています。そしてWebデザインも例外ではありません。

 

 

実際に、レトロなスタイルは時代ごとにはっきりとした特徴がありました。パステルカラー、ドュオトーン、シンプルな図形、アートデコスタイル、細かく賑やかなデザイン、ポロライド、タブロイドから影響を受けた配置、古くからのゲームの風景、そして昔ながらのタイポグラフィなどです。

 

 

特に、タイポグラフィはレトロを表現したい時にとても人気な方法です。とても絶妙で味がある一方、プロジェクトを飲み込むほどではありません。そのため、人の目を集めるために最高の手段なのです。

 

 

80、90年代のエフェクトをCSS/JSとSVGをつかって再現することができます。どんな言葉にも追加できて、数秒で結果が出るのです。Photoshopやsketchなどの画像編集ソフトも必要ありません。非常に簡単なのです。

 

 

ここに10このタイポグラフィのコードがあります。それでは順番に見ていきましょう。

 

 

Left the country 

 まずはガブリエル・ウィーの作ったコードからです。これは、「left the country」といい、ザ・ダファー・ブラザーズのストレンジャー・シングスから影響を受けていました。そして、たくさんのデザイナーたちが再現してきました。DribbleとCodepenは番組のイントロに溢れています。Nelson Cashが作ったジェネレーターではロゴの作成やダウンロードができます。まずは、ウィーの作ったHTMKとSCSSから始めましょう。

 

See the Pen
Left the Country by Gabrielle Wee 🧧 (@gabriellewee)
on CodePen.

 

No Vacancy 404

ライリー・ショーの「No Vacancy 404」は、ガブリエル・ウィーの作ったものに似ています。根底にあるのは、輝かしいタッチのラインアートと、リアルなエフェクトです。前世紀のアメリカでの、眩しいネオンを彷彿とさせます。ライリー・ショーの名作ほどエレガントではありませんが、ビンテージとエレガントさ、精巧さが融合されたものになっています。

 

See the Pen
No Vacancy 404 by Riley Shaw (@rileyjshaw)
on CodePen.

 

Vintage Neon Sign

もっとネオンが欲しいなら、カイル・レイバリーの「Vintage Neon Sign」を見て見ましょう。まるで、60年代の光に溢れた広告の看板のようです。様々な太さのチューブや光り輝くエフェクト、昔ながらの色使いや活字のコンビネーションは、素晴らしい作品を生み出してくれます。

 

See the Pen
Vintage Neon Sign by Kyle Lavery (@kylelavery88)
on CodePen.

 

Splitting : Space Invaders

80 年代の特徴的なタイポグラフィを見てみましょう。80年代と90年代はビデオゲームの時代でした。マーティン・ピットはそんな可愛らしい子供時代を思い返してくれる、「Splitting : Space Invaders」を作りました。遊び心満載の楽しい空気感は魅力的で、可愛らしく夢のようになっています。CSSでの操作が簡単にするためSplitting ライブラリーの協力のもとで作られています。

 

See the Pen
Splitting: Space Invaders by Martin Pitt (@nexii)
on CodePen.

 

Playing with Retro Typography

90年代を、家庭用ゲーム機Atariのアーケードゲームなしで語ることはできないでしょう。マニアの世界では、80、90年代を指す言葉になっています。マックス・ケーラーのコードはAtariのロゴを再現しています。また、レタリングに心地いいレトロタッチを与える効果が他にもあります。

 

See the Pen
Playing w/ Retro Typography by Max Kohler (@maxakohler)
on CodePen.

 

New Retro Text / 80s Typography / 404 SVG

テレビに関連した記憶を彷彿とさせる、素晴らしいテキストエフェクトがあります。「New retro text」、「80s Typography」、「404 SVG」などです。最初の２つは大胆なタイポグラフィ、光沢のある見かけ、ネオンスタイル、VHSのレトロなイントロの雰囲気を持った色使いを利用しています。一方、最後は質素で平凡で粗く、MTVのミュージックビデオのようになっています。

 

See the Pen
New retro text by Vladimir Jovanović (@vlasterx)
on CodePen.

See the Pen
80s Typography by David Parker (@boldfacedesign)
on CodePen.

See the Pen
404 SVG with GIF fill by Marcos Mellado (@mmellado)
on CodePen.

 

Vintage Typeface / Awesome Vintage Title

最後に、従来のタイポグラフィを見ないと終われませんね。タイバルト・ジョン・ベイヤーの「Vintage Typeface 」とケビン・ナガタの「Awesome Vintage Title」は素晴らしい例です。伝統的なビンテージの見た目で薄いエレガントな書体に、アートの心臓とも言える、繊細なアートデコタッチの影。まるで、心に描いていたかのようです。最初の方が古典的で威厳があるのに対し、２つ目のコードは遊びご心がある近代的なものになっています。

 

See the Pen
Vintage Typeface by Thibault Jan Beyer (@ThibaultJanBeyer)
on CodePen.

 

See the Pen
Awesome Vintage Title by Kevin Nagata (@ikevin)
on CodePen.

 

その時に戻って

すべて最先端な世界に疲れたら過去に逃げてインスピレーションを探してみましょう。とっておきの決め手が必ずあります。他の作品から一目おかれるような、トレンドや解決策を得ることができます。そして、タイポグラフィはそのうちの１つです。過去からの心地よい風は注目を集め、新鮮な空気で息をするような感覚を味わえることでしょう。