Hero Text

While text in SVG has a number of limitations, at least in the current spec - text can’t be wrapped, and positioning it is more like arranging elements in CSS, rather than the natural “flow” of HTML text - it also has some significant advantages in particular use-cases. Understanding those use-cases, together with the associated SVG text attributes, will allow you to know where and how to employ SVG text in your web page designs.

As always, there’s more to be added to this list (especially as the SVG2 draft is finalised and its features adopted by browsers), so I would recommend checking back regularly.

Time: 2 hours

Prerequisites: Intro to SVG, CSS Typography

  1. Introduction
  2. Responsive Hero Text
  3. Stroked Text
  4. Text Clipping Masks
  5. Text on a Circle
  6. Comic Book Speech Bubbles
  7. Staggered & Fainting Text
  8. Comic Book FX Lettering

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.