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

September 2013

Software & Technologies

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


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.


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.


Fig 2: The configuration tool for the animation engine



**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:


Web Typography: Text Effects in Edge Animate CC and Edge Reflow CC (12 min)


Web Typography: Configuring Text Effects in Edge Code CC (8 min)


Web Typography: Testing Text Animations Across Devices (5 min)