Design Trend: Em Dash Section Headers

Christian Beck
UX Power Tools
Published in
3 min readAug 3, 2018

--

Typography continues to elegantly evolve in web design. Beautiful typography is no long reserved simply for blogs and agency sites — you can find it o eCommerce sites, digital product landing pages and company homepages. Even writing apps like Medium or Dropbox Paper employ long overlooked typography rules such as hanging quotation marks, or proper usage of em dashes.

“See” — nice work, Medium.

Speaking of em dashes, this typographic character has become a go-to decoration for section headers. No longer wanting to simply use font weights, or all-caps, many designers are taking this punctuation mark and turning it into a decoration for section headers. Why? Well as with any design trend it’s probably totally random and meaningless! But since I’m writing an article about it, I’ll hazard a guess. Em dashes aren’t used often so they draw more attention. And to be clear, the usages below are not em dashes, per se, but simply line segments preceding or following section titles. They simply leverage the aesthetic of an em dash. Much like ellipses, they connect thoughts so when using them out of context, it implies these sections are actually connected together throughout the page. Aesthetically, because this trend is used in an unorthodox way, it helps draw more attention than normal.

Let’s take a look at a few examples of sites that use modified em dashes to draw attention to section headers.

--

--

Christian Beck
UX Power Tools

By day, executive designer at Innovatemap where I help tech companies design marketable products. By night, co-founder of UX Power Tools.