Copy

―§―

Web Fonts &
Typography News

Issue #34 • 31 January, 2020

Well then, it has been a while. Between the holidays, a perniciously persistent cold, and just general exhaustion from all the travel last year it somehow has turned into a 2-month hiatus. My apologies to all! I’ve got a bunch of ideas to explore and some really interesting projects that I’ll be able to share soon, so hoping this is me getting back on track.

I just got back from giving a workshop on variable fonts at REDspace up in Halifax, Nova Scotia last week, and am starting to get more inquiries about events and in-house visits this year. If your team or event could use one, get in touch! So far the next one on tap is in Cape Town, South Africa at Pixel Up! in May. Hope I’ll see some of you there!

Last year was pretty packed full of events, workshops, and goings on at home. One of those goings on was Tristan, one of our collies, experiencing a massive loss of muscle mass in his hind legs due to arthritis. It was really scary. We’ve had him since he was a puppy (he’s now 11), and we’ve been doing our long walks his entire life.

Our vet suggested water therapy, and we found a fantastic place in Providence called Healing Paws. He’s been going now for over 6 months and has gone from 5 minutes up to 25 on the treadmill, and our walks are back up to their normal length! The change has been amazing, and he’s even more playful at home now too. So for those who haven’t seen this on Instagram, here’s Tristan on a treadmill, and the real motivation that gets him there.

Photo of our dog Trisan on an underwater treadmill
Photo of our dog Tristan getting a spoonful of peanut butter for his efforts

Cheers,

Jason

Replies go straight to my inbox—let me know what you want to learn!
 

Today’s Tip

Glyphs as graphics: make your headlines hit harder

When looking through some vintage posters on the International Poster Gallery’s site not long ago I was really struck by this work by Austrian painter and poster artist Hans Fabigan and another one by an unknown artist that use type as the central graphic elements in their respective designs. It got me thinking again about creating more visual elements out of text, and I wanted to see how it might work when combined with some other recent experiments. The basic premise is playing with scale, transparency, and overlaps to create a really graphic element out of the main page title. Not so much that it’s unreadable, but enough to create a more solid element to anchor the design without compromising ease of content editing and accessibility.

Poster with overlapping letters by Hans Fabigan
Poster with overlapping letters by an unknown artist

While this technique is drawn from a poster design, there’s no reason we can’t adapt it to use on a web page. In this case as a main page title, but the same ideas could be used to make a teaser or landing page that packs some major visual impact.

Bringing it to the web

We’ll start with a font that has a lot of width and weight, giving us a lot of heft to play with.

Image of header without any overlapping letters
Starting out with a pretty standard (if chunky) main heading

Now we’ll add some CSS to create the transparency and overlap. This is all pretty standard stuff, but by adding them together we can allow the words to break as they need to, make the text color slightly transparent, and reduce the letter and line spacing to create a more solid overlapping block of shapes. The transparency helps maintain enough visual clarity so the reader can recognize the letters without undue difficulty.

.overlap {
  /* set up transparency and overlap */
  color: rgba(0,0,45,.5);
  letter-spacing: -0.25em;
  line-height: 0.7;
  word-break: break-all;
  word-spacing: 0.35em;
}

Just a few lines of CSS gives us this, which may be just enough in some cases. Even without anything more, it's starting to look pretty interesting.

Image of header with overlapping letters
Heading with transparency and some overlap

Finally it seemed like it would be fun to vary the color a bit more. Pulling ideas from a great article by Michelle Barker on accessibly splitting text and combining with some ‘plain vanilla’ JS to put it in action, the script splits the text, wraps each element in a span, and adds some ARIA bits to ensure it still reads as a single string of text with assistive technologies. Then we add a few nth-child selectors at varying intervals to create a more random-feeling alteration of colors. The final effect is still easy to apply and modify, but adds a nice bit of flair to the overall experience.

Image of header with overlapping multi-colored letters
Putting it all together with a bit of Javascript and nth-child selectors  to vary the colors

Michelle used splitting.js in her experiment, but I had to work out something that didn’t require an external library, so I’ve created something similar with plain JS. The idea is to take the text content of the element (in this case the H1) and add the necessary bits without requiring any additional markup on the text of the element itself.

// Text from the split-text element
const splitElement = document.querySelector('.split-text');
const str = splitElement.innerHTML;

const words = str.split(' ');
const chars = str.split('');

// Remove the existing text so it can .be replaced by the characters in spans
splitElement.innerHTML = '';

// Set up an aria-label so screen readers will still read out the whole string
splitElement.setAttribute('aria-label', str);

chars.forEach(function (item, index) {
  var c = document.createElement('span');
  // and give it some content 
  var letter = document.createTextNode(item); 
  // add the text node to the newly created div
  c.appendChild(letter);  
  // add the newly created element and its content into the DOM 
  splitElement.append(c);

  // Add aria-hidden to each character if the aria-label has been applied to the parent
  if (c.parentElement.getAttribute('aria-label')) {
    c.setAttribute('aria-hidden', true);
  }

});
Now that we have the spans around each letter we can apply a smattering of nth-child selectors with different repeat-counts to create a more random alternation of colors for the letters to complete the effect.
/* mix up the letter colors a bit */
.colors span:nth-child(odd) {
  color: rgba(0,0,75,.4);
}

.colors span:nth-child(5n+1) {
  color: rgba(35,50,00,.5);
}

.colors span:nth-child(7n+0) {
  color: rgba(0,80,95,.55);
}

These techniques can add some real punch to your design without requiring lots of additional markup or compromising accessibility. It’s easily tweaked, and would be a snap to integrate with a CMS (possibly as one of several styles to be utilized).

I hope this helps fire up your imagination and gets you thinking about more ways to use type as a graphic element—and not just as text to be read.

Resources

Web Type News

Does your organization need a boost?

If your brand voice needs some volume, or your team could use a hand improving font performance—maybe you could use a Type Audit. I work with you and your team to identify how well your site’s voice aligns with your brand, and can show you how to improve how quickly it gets on screen on any size device. Read more about Type Audits and let’s talk!

Upcoming Events

  • Headed to Cape Town, South Africa for Pixel Up! in May to give a talk and a workshop on editorial design with variable fonts
  • I’ll be returning to the An Event Apart stage in Boston at the end of June
  • More events and workshop details coming soon!
If the typeface in this message has Georgia on your mind, you're not seeing the web fonts :( I'm hoping that you're seeing it set in the lovely Roslindale (Display Condensed and Text) designed by the amazing David Jonathan Ross for his FontOfTheMonth.club. You should check it out!
Website
Twitter
LinkedIn
Instagram
Copyright © 2020 Jason Pamental, All rights reserved.


Forward to a friendSubscribe
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.

Email Marketing Powered by Mailchimp