|
This is a strange and stressful time. I debated sending this given all of the far more important things with which we all must contend. But I know I found comfort in getting Rachel Andrew’s CSS Layout newsletter and Val Head’s on animation recently. And given conferences and workshops the world over are being postponed or canceled, the one thing I can continue to do for others is provide some education and (hopefully) inspiration as we find ways to work in relative isolation.
It’s my sincerest hope this finds you in good health (and if not, for a speedy recovery). I’ll continue to try and find ways to provide more online learning resources here, on VariableFonts.io, and on my own site. If there’s something you’d like to see, please don’t hesitate to ask.
|
|
Cheers,
Jason
Replies go straight to my inbox—let me know what you want to learn!
|
|
|
A few things coalesced to inspire the issue this week, and they bring us back to exploring some beautiful cover designs dating from the early 1960’s. I recently picked up Impact 1.0 and Impact 2.0 from Unit Editions, each filled with publication cover designs from 1922–1973 and 1974–2016 respectively. There's inspiration for days in each but a couple from 1.0 caught my eye. One is a cover of Type Talks in the US, and the other Idea from Japan (pictured below). Both feature big, bold type and lots of layers—though the former is monochromatic and the latter very much not. They both reminded me of wood type experiments and prints I’ve seen over the years, so I wanted to see if I could create a way to achieve that effect on the web.
|
|
|
Another piece of the inspiration puzzle came in the form of the latest release from the Font of the Month Club: Datillo DJR (variable). The heavy end of the weight spectrum seemed a perfect pairing, so I decided to see how these could come together. As always, the goal is to create something that could easily integrate into a blog or other sort of content management system and not require any special effort on the part of the publisher.
Thinking back to the technique I used in Issue 34 it seemed like there were some good elements from which to draw. I wanted to make sure that there was no special HTML markup required, and that the text would remain readable by assistive technologies. Using a little Javascript to wrap the letters and add a data attribute lets us achieve the effect without complicating the publishing process. Here’s a snippet of where we’re headed:
|
|
|
|
The final result: a simulation of several overlapping layers of printing
|
|
Wrap it up, we’ll take it
Just like in #34, we’ll use a take on Michelle Barker’s ‘Accessibly-split text’ technique in order to have a plain ‘ol H1 element split and wrapped in individual spans. This also allows us to add some ARIA magic to make sure the text stays readable for assistive technology while still giving us the chance to play a bit with the letterforms.
I won’t go through all of the JS again (you can read all about it here), but the one thing we do in addition to creating a series of spans with the individual letters in them is add a data-attribute (we’re calling it ‘data-content’) with the value of the letter contained in the span itself. This lets us target the content of the data-attribute with CSS and apply positioning and styling to it as well.
|
|
c.setAttribute('data-content', c.innerHTML);
|
|
|
|
This gives us a span for each letter that looks something like this:
|
|
<span data-content="T" aria-hidden="true">T</span>
|
|
|
|
Now we can have a little fun with pseudo-elements in our CSS. Using the pseudo-elements of ‘:before’ and ‘:after’, we can create additional content which we can grab from the ‘data-content’ attribute. This effectively creates another copy of the letter which we can style and layer.
First things first
We’re borrowing a bit of the overlap in the letters from the previous experiment, but not quite as much. We’re also just using one color, but giving it a little transparency.
|
|
|
|
The first layer with just a bit of overlap and transparency
|
|
|
Here’s the CSS to get us started:
|
|
.overlap span {
color: rgba(55,110,25,.75);
letter-spacing: -0.135em;
line-height: 0.7;
position: relative;
word-spacing: 0.75em;
}
|
|
|
|
By positioning the span relatively, we can position the :before and :after copies absolutely (relative to the original letter. With that we can use a series of nth-child selectors to move them around, change characteristics, and opacities—all combining to give a bit more random feel.
|
|
|
|
Using the :before selector to add some depth, color, and layers
|
|
|
First we add a second layer with a slightly lighter weight and different color and opacity. Notice how we can use the ‘data-content’ attribute to supply the content for the pseudo-element. Add to that another series of nth-child selectors and it feels pretty random.
|
|
.overlap span::before {
content: attr(data-content);
color: rgba(125,20,0,.75);
font-weight: 750;
line-height: 1;
opacity: 0.35;
position: absolute;
top: 0.1em;
left: -0.05em;
}
/* Play with the second solid fill color and opacity */
.overlap span:nth-child(odd)::before {
color: rgba(0,0,75,.14);
}
.overlap span:nth-child(5n+1)::before {
color: rgba(35,50,00,.15);
}
.overlap span:nth-child(7n+0)::before {
color: rgba(0,80,95,.25);
}
|
|
|
|
Finally we add the ‘:after’ element, make it an outline, and nudge it around a bit as well. We’ll throw in some changes to line thickness, color, and opacity too. The final effect is a nicely layered, sort of textural feel. You could even take it further with a bit more JS and randomize the nth-child offsets to let it shift with every view.
|
|
.overlap span::after {
content: attr(data-content);
color: transparent;
font-weight: 900;
line-height: 1;
position: absolute;
top: 0.1em;
left: 0;
-webkit-text-stroke: 0.01em black;
text-stroke: 0.01em black;
}
/* mix up the letter outlines a bit */
.overlap span:nth-child(odd)::after {
-webkit-text-stroke: 0.01em black;
text-stroke: 0.01em black;
left: -0.0025em;
top: 0.12em;
opacity: 0.7;
}
.overlap span:nth-child(5n+1)::after {
-webkit-text-stroke: 0.03em rgba(70,80,95,.9);
text-stroke: 0.03em rgba(70,80,95,.9);
left: 0.05em;
opacity: 0.7;
}
.overlap span:nth-child(4n+3)::after {
-webkit-text-stroke: 0.02em black;
text-stroke: 0.02em black;
top: 0.125em;
left: 0.015em;
opacity: 0.7;
}
.overlap span:nth-child(7n+0)::after {
-webkit-text-stroke: 0.015em black;
text-stroke: 0.015em black;
left: -0.025em;
top: 0.072em;
opacity: 0.7;
}
|
|
|
|
And here’s everything all together:
|
|
|
|
The complete final result
|
|
|
I realize it might feel pretty repetitive to have every title on your blog use this effect. But the goal is to build some of these options and perhaps some variations into a system that lets you apply and customize the effect when appropriate. The real power of the web is to combine artistic expression with systematized application—giving you the ability to be far more creative without sacrificing accessibility or maintainability. No need to have to custom code things every time.
|
|
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
- [Event postponed until September] 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!
|
|
|
|
