|
Back in Rhode Island again after a quick trip to Edinburgh, Scotland for Finch Front-End. It’s been a whirlwind the past month, full of incredible memories, wonderful people, and amazing places. Happy to be staying relatively put for almost a month. Maybe I can get back on a more regular schedule of newsletters for a bit. At least I can try ;)
I found inspiration in some of the talks this week that prompted me to think more about classic graphic design techniques and how we might bring more of that into our work on the web. I was reminded too of some great posts & talks by Una Kravets and Sara Soueidan over the past few years, and bringing those together resulted in some really fun experiments.
While the details will have to stay under wraps for a little while longer, a couple of really exciting variable font related projects have gotten the green light over the past week or so. This makes me feel even more positive about the direction in which we’re headed with their adoption. I can’t wait to be able to share them with you soon!
And lest I forget, tickets are disappearing for my last workshop of the year at Beyond Tellerrand on using variable fonts and loads of modern CSS techniques for scaling typography, light modes, and more. An amazing lineup at a legendary event. I’m so excited to be heading there for the first time. Hope to see you there!
|
|
Cheers,
Jason
Replies go straight to my inbox—let me know what you want to learn!
|
|
Display typography: text and image, overlays and fills
|
|
|
I’ve been spending some time looking at some typography annuals, inspired by Aga Naplocha’s fantastic talk at Finch Front-End in Edinburgh, Scotland earlier this week. She was showing some fantastic design ideas based on different artistic styles and periods. One of the things that really struck me was how she was combining CSS shapes, masks, clips, and blend modes in such creative ways. I thought it might be interesting to try a couple of those ideas and see what we might be able to do with type.
Aga was showing some effects that looked like they could have come from fashion magazine spreads. I wanted something more typographically focused, so I looked through the Type Directors Club Annual from last year and found a beautiful poster design that showed some similar effects. A design by the Jürgen X. Albrecht studio for the artist Clara Buntin, it does a beautiful job of layering text and image in a really captivating way.
|
|
|
|
A beautiful poster included in the 2018 Annual of the Type Directors Club
|
|
|
Playing around with some of photos from my morning walks, I tried out a couple of different techniques that could be pretty easily replicated. Ranging from a simple overlay with a transparent color fill and a couple of text shadows, to a multiply effect, and finally an image clipping effect that fills the text with the image. While there are certainly issues to contend with regarding readability, given that it’s still a div and an h1 with regular text it should certainly be accessible to a screen reader, and with a little work could be given a toggle of some sort for users with vision acuity issues. Overall I think there’s still a lot of room to create more interesting typographic effects while still ensuring your site is usable by all.
|
|
Hero worship
I honestly don’t care for the naming convention, but for lack of a better one we’ll just roll with it. It’s a fairly typical design component: a big image with some text overlaid. Because it’s often implemented in a ‘use with everything’ sort of intent, in most cases the text is a solid color and placed on a semi-transparent block in order to ensure enough contrast between text and image. But new CSS tricks like ‘mix-blend-mode’ we can try different effects to get the text to stand out from the image behind it without having to resort to heavy-handed blocks of color.
|
|
|
|
The title text is overlaid (Morning, mist, and magic) using a mixed-blend-mode to help the text stand out
|
|
/* these two attributes are the key to ensuring visibility */
.hero--title {
...
color: rgba(205,205,205,.75);
mix-blend-mode: difference;
...
}
|
|
|
Mixed, not stirred
The second example is making use of the ‘mixed-blend-mode’ attribute to create a really interesting interaction between the background image and foreground text in a slightly different way. In this example, the background color of the text element is interacting with them image underneath along with the text color itself. This creates a bit moodier sort of effect. You can play around with different keyword values for blending as well as the color values for background and text. Possibilities are pretty endless.
The code is pretty straightforward: the keys are sizing the time in a scalable way and leveraging the mixed-blend-mode attribute.
|
|
|
|
A mixed-blend-mode creates a strong, moody effect
|
|
.title-filled {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/mist_crop.jpg);
background-size: cover;
}
.title-filled--title {
background: rgba(0, 0, 0, .75);
color: #fff;
mix-blend-mode: multiply;
...
}
|
|
|
Just the text, ma’am (or mister)
If you’ve got a chunky enough font and a shallow enough image, you might want to give the third method a try. This one leverages ‘background-clip: text’ (and the vendor-prefixed version for Safari and Chrome) to fill the letterforms with the image. It can be really stunning, and often brings out fascinating interactions between image details and glyph shapes.
|
|
|
|
Text clipping is working nicely in many modern browsers
|
|
.title-clipped--title {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/mist_crop.jpg);
background-size: cover;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
...
}
|
|
|
|
Bear in mind that in order to get clipping to work in Safari and Chrome, you have to include the '-webkit' prefixed line as well.
These effects aren’t for everyone, or for every layout. But it’s not that much CSS, so the idea of making it an optional style doesn’t seem so far-fetched. And it could go a long way towards breaking away from the Sea of Same we find on the web.
|
|
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!
|
|
|
|
