Swiss inspiration & morning rituals observed
This week’s issue took a bit of a meander. I started thinking I might make another Google Fonts API tutorial. But part way through that I got another email from International Poster Gallery celebrating the work of Swiss designer Herbert Leupin. One in particular caught my eye: Tribune De Lausanne, 1955 — one of his most popular works. It beautifully captures the message that one should start their day with coffee and Le Tribune.
The way the text is set inside the coffee pot grabbed me, and I started to think about masking and clipping again. I created a silhouette of the coffee pot outline and saved it as a PNG with transparency so I could play with the ’shape-outside’ property. That ended up not working like I’d hoped as it doesn’t scale the same in different browsers. So I used it to make a polygon shape as an outline and assigned it to a custom property. Since the same syntax is used for both shape-outside and clip-path, this is a perfect use case.
Adding a figure element with an empty DIV inside, I used that as a placeholder for the next part of the experiment. I set the coffee pot as a background and assigned a width and height roughly the same aspect ratio in viewport width units (so it would scale with the window). The empty DIV has the clip-path applied to it, and the Javascript takes the text content of the whole container and…
