Animatable: Text

Brandon Rozek

October 3, 2015

This post is part 3 of my series on animation. In this post, I’ll show you different animations you can add onto text. If you haven’t already, you should check out part 1 and part 2 of this series. Animations on text can be used to bring attention, to add importance, or to convey a point. As with all animations, however, keep your user in mind and your text readable.

This post follows along with a Codepen demo{.broken_link} I made.


Line-height is the space between each line in a text block. It is commonly recommended that you use a unitless line-height because then it takes the font-size into consideration. When you use an unitless value, the browser determines the line-height by taking the unitless value and multiplying it by the element’s font-size. In the Codepen demo (#1), you can see the line-height decreasing while the opacity increases.


Font-weight specifies the boldness of the text. If the typeface doesn’t come with multiple weights, then the animation would only happen between the weights that it does have. In the demo (#2), the text will go from normal weight to bold.


It is important to note that changing the font-size could change the value of other text properties that are dependent upon it. (Like unitless line-heights) In the demo (#3), you can see the text’s font-size shrinking.


Text-shadow applies a shadow to both the text and it’s text-decoration. Multiple shadows can be added, and they are applied from front to back. In the animation (#4), you can see the text’s shadow move.


This sets the color for text-decoration-line (underlines, overlines, or strike-throughs) In the demo (#5), the strike-through changes from red to black.


Word-spacing defines the space between tags and words. Negative values bring the words closer to each other. In the demo (#6), you can see the word-spacing increase with ‘good bye!’ where the word ‘bye!’ is moving away.


Letter-spacing specifies the spacing between text characters. Negative values bring the letters closer together. In the demo (#7), each letter gets separated from one another.


These animations show the different things you can do with text. Perhaps you’ll add a small animation to a heading to bring depth and attention, or you’ll add some to the text of a button to scream “call to action”. Whatever you decide, I hope this post helped. I’ll see you again next time with another animatable post! 🙂{.broken_link}{.broken_link}{.broken_link}{.broken_link}{.broken_link}{.broken_link}