Web typography, text effects, and working with Adobe Edge Tools

September 2013

Software & Technologies

HTML5, CSS, Canvas, JavaScript, SVG, Typography, Text Effects

Overview

I have always found typography and text effects to be inspiring (see Fig 1). I started my career working as a print designer producing typographic layouts and logos for the music tour department of Winterland Productions in San Francisco. That’s where I first fell in love with Adobe Illustrator and Adobe Photoshop. In the years that followed, my focus shifted to web design, but the use of typography always remained a constant.

text-animated.fw

Fig 1: Text animation effects applied to each letter of a word

In recent work, I’ve been looking at web standard technologies for use in banners and simple animations. To improve my own use of fonts on various web projects, I began to explore Adobe Edge Tools & Services to learn how I could create text effects in a browser. I started by creating a configuration tool (see Fig 2), and a small JavaScript library that I could use to experiment with workflows in Adobe Edge Code CC, Edge Inspect CC, Edge Animate CC, and Edge Reflow CC.

text-fig2.fw

Fig 2: The configuration tool for the animation engine

Links

http://www.adobe.com/inspire/2013/09/edge-text-effects.html

**This article has been retired along with other Adobe Inspire Magazine content.  (December 2015)

Companion Videos

Companion videos for the article are still available at the following links:

19977_tmb_150x84_0049

Web Typography: Text Effects in Edge Animate CC and Edge Reflow CC (12 min)
http://tv.adobe.com/watch/companion-videos-for-inspire/web-typography-text-effects-in-edge-animate-cc-and-edge-reflow-cc/

19975_tmb_150x84_0049

Web Typography: Configuring Text Effects in Edge Code CC (8 min)
http://tv.adobe.com/watch/companion-videos-for-inspire/web-typography-configuring-text-effects-in-edge-code-cc/

19976_tmb_150x84_0018

Web Typography: Testing Text Animations Across Devices (5 min)
http://tv.adobe.com/watch/companion-videos-for-inspire/web-typography-testing-text-animations-across-devices/