Quick typography tips №2

Here’s a quick design tip for making headlines more interesting using text-decoration.

I really enjoy thumbing through print magazines and finding inspiration for making my typographic designs more interesting. I can’t remember the last time I saw the CSS text-decoration property used online for anything other than hyperlinks. But, text-decoration and related properties can be used on other text elements too. Here’s the design I’m making:

The design
A headline and standfirst made more interesting by using text-decoration.

The headline has a thick, offset green underline. The standfirst paragraph which follows it also has an offset underline plus a thicker top border. These offsets are simple to apply, starting with that headline:

h1 {
text-decoration-color: var(--color-accent);
text-decoration-thickness: 10px;
text-decoration-line: underline;
text-underline-offset: 3px; }

Unsurprisingly, the text-decoration-line property sets the type of decoration on any text element. There are several value options including line-through, overline, and underline.

Whereas in the past the colour of a text-decoration always matched the current colour of the text, today there’s the text-decoration-color property to change that. For this design, I set the decoration colour from the default blue/grey to my green accent:

h1 {
text-decoration-color: var(--color-accent); }

A thick underline adds extra impact to my headline, so I change the thickness of that decoration to 20px which matches the weight of the headline text:

h1 {
text-decoration-thickness: 20px; }

The text-underline-offset property sets the distance from a decoration line’s default position which can be especially useful for fine-tuning the look of hyperlinks and my headline. I position this underline 3px lower than its default position:

h1 {
text-underline-offset: 3px; }

These text-decoration and text-underline-offset properties—combined with tight leading—turn an uninteresting looking headline into a design element which feels considered and intentional.

This headline looks even better when combined with a standfirst paragraph which shares some of the same styles. First, I add thick top and thin bottom borders, plus a little padding:

h1 + p {
padding: 1rem 0;
border-top: 10px solid var(--color-dark);
border-bottom: 2px solid var(--color-accent); }

I add a hairline width underline and offset the decoration so it fits neatly between my lines of text:

h1 + p {
text-decoration-color: var(--color-accent);
text-decoration-line: underline;
text-decoration-thickness: .5px;
text-underline-offset: 6px; }

I’ve long been of the opinion that every text element can be an opportunity to add interest to a design and this is especially true of headlines. It’s also true that typographic design doesn’t stop with choosing a typeface and that simple techniques like this can help make a design more special.

Here’s this headline design on CodePen for you to experiment with.


Working with clients for over 25 years

Contact us OK, LET’S TALK

Press to call 01745 851848