Following on from last week’s issue (and inspired a bit by receiving the latest Type Directors Club annual in the post), I spent some more time looking at vintage posters. The spark came about when I went looking through the last couple emails from DJR’s Font of the Month Club. I discovered that January’s edition contained a bonus: a new, more complete version of Gimlet in variable format, complete with axes for width, weight, italic, and optical size!

从上周的刊物开始(后来收到了最新的Type Directors Club的启发)，我花了更多时间看老式的海报。 当我浏览DJR的“本月俱乐部字体”中的最后几封电子邮件时，就产生了火花。 我发现一月份的版本有一个好处：可变格式的Gimlet的新版本更加完整，并带有宽度，重量，斜体和光学尺寸的轴！

I’ve loved Gimlet since I first saw an early version just after variable fonts were introduced, and have used it for various demos over the years. I love its quirky 60’s vibe, and have always thought it reminded me of period poster and advertising design.

自从在引入可变字体之后就首次看到早期版本以来，我就一直喜欢Gimlet，并且多年来已将其用于各种演示。 我喜欢60年代古怪的氛围，并且一直认为它让我想起了时代海报和广告设计。

So that’s where we went.

这就是我们去的地方。

搜索很少看到的东西 (Searching for what’s seldom seen)

One of the most common and visually arresting techniques in graphic design is creating the illusion of interplay between text and image. The shifting of typographic forms before and behind photographic elements creates dynamic tension, sparking interest and examination. These techniques have been in use for hundreds of years in illustration, magazine and poster design, and can even be seen in the title screen of the latest streaming sensation, Cheer.

图形设计中最常见且视觉上引人注目的技术之一是创造文本和图像之间相互作用的幻觉。 摄影元素前后的印刷形式的变化产生了动态的张力，激发了人们的兴趣和审视。 这些技术已经在插图，杂志和海报设计中使用了数百年，甚至可以在最新的流媒体轰动声Cheer的标题屏幕中看到。

Have a look at this poster from Schmid/Widmaier (via the TDC annual). Notice how the abstracted letterforms drift in front of and behind the hand.

看看Schmid / Widmaier的这张海报(通过TDC年报)。 注意抽象的字母形式如何在手的前面和后面漂移。

Or this stunning travel promotion by Cussetti. Note the way the flowers curl around the ‘P’ in Paris. Subtle, but lovely.

或者是库塞蒂(Cussetti)的这次惊人的旅行促销 。 请注意花朵在巴黎的“ P”周围卷曲的方式。 微妙，但可爱。

那么您为什么在网络上呢？ (So wherefore art thou on the web?)

The simple answer is that we don’t see this kind of interplay between text and image because it used to be hard to do. We’re conditioned on the web to keep things simple: images in boxes, text on top. Usually on a semi-transparent block. Always optimizing for a system-driven, content-managed, ever-changing world of new posts published every day with no time for design or development intervention.

简单的答案是我们看不到文本和图像之间的这种相互作用，因为它过去很难做到。 我们以网络为条件，使事情变得简单：框内的图片，顶部的文字。 通常在半透明块上。 始终针对每天发布的新帖子而进行系统驱动，内容管理，不断变化的世界进行优化，而没有时间进行设计或开发干预。

While it would be impractical to think every page, promotion, or post could be designed and custom-coded, I’ve written about a middle ground before — and this is another good example. The core text content doesn’t need much if anything modified, but spending a little bit of time customizing a clip-path mask for the text overlaying the image can create some really dynamic effects without requiring very much code.

尽管认为每个页面，促销或帖子都可以设计和自定义编码是不切实际的，但我之前已经写过一篇中间文章，这是另一个很好的例子。 核心文本内容并不需要太多修改，但是花一点时间为覆盖图像的文本自定义剪切路径蒙版可以创建一些真正的动态效果，而无需太多代码。

捕捉旅行虫 (Catching the travel bug)

Taking cues from the poster examples, I dug though my photo archive and found one I posted to Instagram a few years ago on my way back from Baltimore. It’s got a really graphic quality to it that seemed like it would fit. I decided on a horizontal crop that focused on the tail. Setting the image as a background sized to 100% kept it filling the container, and let me set up the basic layout.

从海报示例中获取线索，我翻阅了我的照片档案，并发现了几年前我从巴尔的摩回来时在Instagram上发布的照片​​。 它具有真正的图形质量，看起来很合适。 我决定选择侧重于尾巴的水平作物。 将图像设置为100％的背景大小可以使其填充容器，并让我设置基本布局。

.poster {  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/79D7C2EE-7F10-4AEB-9434-8988EFC7BD52.jpeg);  background-repeat: no-repeat;  background-size: 100%;  ...}.poster-mask {  ...  height: 100%;  width: 100%;  z-index: 1;}h1 {  color: rgba(0,0,67,.7);  font-family: "Gimlet";  font-size: 15vw;  font-stretch: 75%;  font-weight: 900;  font-variation-settings: 'ital' 1;  line-height: 1.1;  padding: 5vw 2vw 0 2vw;  width: 75vw;}

Now what I want to do is allow the text to fall behind the tail of the plane without resorting to adding separate image files with different transparency to sandwich the text (though that’s a pretty interesting technique as well). Enter CSS attribute ‘clip-path’ (and it’s vendor-prefixed cousin to ensure compatibility w/Safari). I found a good article on CSS Tricks about it, and after a little fiddling with the Shapes editor in the Firefox Dev Tools (thanks Jen, Miriam, & the Dev Tools team!) I had pretty good masking layer created.

现在，我想做的就是允许文本落在飞机的尾部，而无需借助添加具有不同透明度的单独图像文件来夹住文本(尽管这也是一种非常有趣的技术)。 输入CSS属性“ clip-path”(这是供应商前缀的表亲，以确保与Safari兼容)。 我在CSS Tricks上找到了一篇不错的文章 ，并且在Firefox开发工具中的Shapes编辑器有点摆弄之后(感谢Jen，Miriam和开发工具团队！)，我创建了相当不错的遮罩层。

Everything is done in percentages and the text is set including viewport units so we can be sure it will all scale nicely. You can always tweak the size values in other ways to fit your layout needs. But with a little bit of Grid for layout layering, this holds up pretty well.

一切都以百分比完成，并且设置了包括视口单位在内的文本，因此我们可以确保它们都可以很好地缩放。 您始终可以通过其他方式调整大小值以适合您的布局需求。 但是，由于使用了一点网格来进行布局分层，因此效果很好。

.poster-mask {  ...  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 69.34% 90.23%, 79.17% 10.09%, 68.35% 8.66%, 35.89% 77.18%, 31.83% 83.22%, 0% 100%);  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 69.34% 90.23%, 79.17% 10.09%, 68.35% 8.66%, 35.89% 77.18%, 31.83% 83.22%, 0% 100%);  z-index: 1;}

Since we are on the web in this example, I’ve added a bit of animation as the whole thing loads. I think that’s one of the emerging areas of typgraphy on the web that should be explored more. Animating type along axes during load or when content comes into view is a wonderful way to draw the readers eye. You don’t want to go overboard — and you should respect preferences for reduced motion — but it’s easy to do and animates beautifully.

由于在此示例中我们位于网络上，因此在整个加载过程中添加了一些动画。 我认为这是网络上印刷术的新兴领域之一，应进一步探索。 在加载过程中或内容出现时沿轴动画显示类型是吸引读者眼球的绝佳方法。 您不想过分地做-您应该尊重偏爱减少运动的偏好-但它很容易做到且动画效果精美。

While certainly not something you might do every day, you could imagine this working really well on a landing page or home page teaser (or some other promo usage). Indeed, given how much time publications put into their cover and article intros in print, it seems an obvious place to put some effort to create this kind of effect on their sites.

尽管当然不是您每天都可以做的事情，但您可以想象这在登陆页面或主页预告片(或其他促销用途)上确实能很好地工作。 确实，鉴于出版物在封面和文章介绍中投入了多少时间，似乎显然是在其网站上花些力气创造这种效果的地方。

This experiment certainly has its limitations, but it does scale pretty well. I hope you’ll find this inspiring enough to try out osme of these techniques on your own projects. Be sure to share when you do!

这个实验当然有其局限性，但确实可以很好地扩展。 希望您能从中获得启发，并在自己的项目中尝试这些技术。 务必在分享时分享！

资源资源 (Resources)

• Example on CodePen

  CodePen上的示例

• CSS-Tricks post on clipping

  CSS技巧的剪辑

• caniuse.com stats and notes

  caniuse.com统计和注释

This is an excerpt from my weekly newsletter about web fonts and typography. If you’d like a weekly dose of web typography tips, news, and my upcoming talks and workshops, you can sign up for the newsletter here.

这是我关于网络字体和排版的每周新闻摘要。 如果您想每周查看一些网络排版技巧，新闻以及我即将举行的讲座和研讨会，则可以 在此处注册新闻通讯 。

If you this helpful, please share what you make — and if there’s something you’d like to see covered in a future issue, please let me know!

如果您有帮助，请分享您的工作-如果您希望在以后的期刊中看到一些内容，请告诉我！

Originally published at rwt.io on February 7, 2020.

最初于 2020 年2月7日 在 rwt.io 上 发布 。