I have always found typography and text effects to be inspiring. 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.
This article is a show-and-tell about the process I used with the Edge family of tools and the discoveries I made while working with text effects in SVG, CSS, and the HTML5 canvas (see Figure 1).
Note: For more information about using Edge Web Fonts, read Dave Klein's article, Better web typography with Adobe Edge Web Fonts, in the June issue of Adobe Inspire Magazine.
Beyond the discussion of browser technologies, the goal of this article is to have fun exploring the supplied files and the process I used to create them. You can download Adobe Edge Code CC from Adobe Creative Cloud and easily get started experimenting with text effects using custom fonts and formatting. I've included a few instructions and video demonstrations to help you along.
Follow these steps to get started:
Note: Edge Animate CC is not free, but you can download a free 30-day trial from Adobe Creative Cloud.
There are a handful of approaches you can use to create text effects natively in a browser including SVG, CSS3, and the HTML5 canvas. In recent work, I've been impressed with how well SVG graphics and animations render across browsers. I've also had good luck working with CSS and the HTML5 canvas. I thought an interesting experiment would be to create a collection of simple text effects and see how they perform across technologies on desktop and mobile.
SVG renders vector graphics natively in a browser using XML. SVG is resolution-independent, so it's a good solution for designing content that can be seen consistently across devices of varying resolutions (such as the desktop, an iPad with Retina display, and so on). I focused on SVG effects for the desktop. I also added a parallel set of CSS3 and HTML5 canvas text effects to see how they would perform in comparison. CSS has the ability to style and format text, as well as animate it with CSS transitions and animations. Working with the HTML5 canvas is similar to working with SVG — the primary difference is bitmap graphic rendering in HTML5 canvas vs. vector rendering in SVG.
As I set out to work on the examples in this article, I decided to use Edge Code CC as my text editor. Doing so enabled me to use the integrated Edge Web Fonts as the basis for choosing custom fonts for the project. I was also able to leverage the integration of Edge Code CC with Edge Inspect CC, so I could sync my work to my iPad for device testing.
Edge Code CC is a straightforward, simple-to-use text editor built for writing HTML5 code. I'm finding that the workflow is particularly nice when it comes to integration with Google Chrome and other Edge Tools & Services (see Video 1).
Video 1. Configuring a text effect and adding it to a web page in Edge Code CC
To use Edge Code CC to edit styles and create a text animation, follow these steps:
<script>tags at the bottom of the page, and paste the Clipboard's contents. Save your work.
<div>tag. The text line adds the text to the screen.
<script>tags, Arial is selected by default. You will change this in the next section when working with Edge Web Fonts.
As you can see, the Live Preview integration with the browser is pretty handy. Use the configuration page to experiment with adding different effects and settings to this template page. In particular, you'll find that editing fonts and colors is easy in Edge Code CC (see Figure 3).
Note: Make sure the lightning bolt icon in Edge Code CC is highlighted yellow to indicate it is connected. If it becomes disconnected, you will not see the live updates as you save changes in Edge Code CC.
To add a custom web font to the animation using Edge Web Fonts, follow these steps:
Tip: If you have any problems setting up the effect, take a look at the text_effects_completed files for a working sample.
Edge Inspect CC is a great tool that enables you to sync any web content from the desktop to different devices. This is a real time-saver when you need to know how your work appears on tablets, phones, and laptops.
Note: Before you begin working in Edge Inspect CC, you need to pair your device. For more information on how to do this, check out Preview and inspect web designs on devices with Adobe Edge Inspect.
While the text animations run smoothly across modern desktop browsers, this isn't necessarily the case on mobile browsers. Mobile devices have less power and memory at their disposal, so large animations or complex letter-by-letter animations may lead to perceivable problems. Edge Inspect CC provides an easy way to test performance on each type of technology (see Video 2).
Video 2. Testing the animations on an iPad
To set up Edge Inspect CC for testing across devices, follow these steps:
That's it. Now you're ready to sync your device to your live edits in Edge Inspect CC.
At this point you should be able to return to Google Chrome on your desktop computer and select the device in the Edge Inspect CC extension menu (see Figure 5).
The last stop on my tour of working with Edge Tools was to explore adding text effects to Edge Animate CC and Edge Reflow CC.
Edge Animate CC is a timeline-based tool used to create interactive animations using HTML5. You can easily create text animations directly in Edge Animate CC without the use of an external library, but in this case, you can use Edge Animate CC as a way to sequence multiple code-driven animations with each other and other content. You can use this technique to create animated banners and similar compositions.
Edge Reflow CC is a website development tool used to create fluid layout sites that can size themselves to any screen size. As the web is increasingly viewed on tablets, smartphones, and devices other than desktop computers, designing content that can be seen across screens is important. Edge Reflow CC makes the task easier by providing intuitive layout and responsive design tools.
In my final experiment, I created a banner template in Edge Animate CC (see Figure 6), edited the related code in Edge Code CC, and then added the template to a web page created in Edge Reflow CC (see Video 3).
Video 3. Creating an animated sequence in Edge Animate CC and adding it to a web page created in Edge Reflow CC.
The possibilities for creating unique workflows with Adobe Edge Tools are endless. Try working with Edge Code CC, Edge Animate CC, and Edge Reflow CC to see how they integrate together for coding, animation, and layout. And set up your computer so you can test your work across devices with each tool's Edge Inspect CC integration.
For more information on Adobe Edge Tools & Services, check out these resources:
Dan Carr is lead developer of Dan Carr Design in San Francisco, California. With 15 years' experience collaborating with Adobe and Macromedia, Dan has produced training materials, technical articles, and features available in Flash, Flex, and more. Dan's most recent work specializes in gaming and video for Flash, HTML5, and iOS.