--- title: "'An unprecedented level of polish to web typography'" publication: "Frontend Focus" issue: 687 published_at: "2025-04-09" canonical_url: "https://frontendfoc.us/issues/687" --- Plus are you making these menu navigation mistakes? | Together with [![Penpot\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_1280,h_423/e_make_transparent/co_white,e_outline:17/kwlh3dmajw175jpnespa.png)](https://penpot.app/collaboration/design-tokens?utm_source=FrontendFocus&utm_medium=Newsletter&utm_campaign=DesignTokens) 🚀 **Frontend** Focus #​687 — April 9, 2025 | [Read on the web](https://frontendfoc.us/issues/687) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1744192460/pbymymuia3e2dxcku0rd.png)](https://leanrada.com/notes/css-only-lqip/) [Minimal CSS-Only Blurry Image Placeholders](https://leanrada.com/notes/css-only-lqip/) — An experimental, pure CSS technique for producing blurry, low-quality image placeholders, using just a single custom property. Beyond just sharing the clever technique, the post also dives into how it all works, exploring the limits of CSS variables and radial gradients. There’s a [gallery filled with examples here](https://leanrada.com/notes/css-only-lqip/gallery/). It's a smart little hack, but one that I found didn't play nice in Safari. Lean Rada [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/b6d7af25.jpg)](https://penpot.app/collaboration/design-tokens?utm_source=FrontendFocus&utm_medium=Newsletter&utm_campaign=DesignTokens) [Penpot Launches Native Design Tokens](https://penpot.app/collaboration/design-tokens?utm_source=FrontendFocus&utm_medium=Newsletter&utm_campaign=DesignTokens) — Penpot is the first design tool to integrate native design tokens—a single source of truth for top design and dev collaboration. Enjoy Penpot’s standardized design tokens format to reuse and sync across different platforms, workflows, and disciplines. Penpot sponsor [Better Typography with `text-wrap: pretty`](https://webkit.org/blog/16547/better-typography-with-text-wrap-pretty/) — Support for improved text wrapping has just shipped in the latest preview of Safari. Here, Jen shares a look at what this update means, noting that it brings “_an unprecedented level of polish to typography on the web_”. [There’s a solid demo here](https://cdpn.io/pen/debug/xxvoqNM) that highlights all of the wins, but you’ll need to view it in Safari Technology Preview 216. Jen Simmons (WebKit) [Overengineered Anchor Links](https://thirty-five.com/overengineered-anchoring) — Anchor links can often be an issue if the linked content is at the bottom of the page, so here’s a surprisingly meaty exploration of the fixes — going _way_ beyond simple padding, and diving into mathematical equations to solve the issue via a custom mapping function. Formulas, visualizations, and more! Mats Erdkamp ⚡️ IN BRIEF - 💻 The [Chrome 136 beta is out now](https://developer.chrome.com/blog/chrome-136-beta?hl=en), adding six new CSS and UI features. - 🎤 New speakers for [CSS Day](https://cssday.nl), taking place in Amsterdam this June, have been announced — the line-up is looking good! - 🤖 WordPress has a new [AI-powered website builder](https://techcrunch.com/2025/04/09/wordpress-com-launches-a-free-ai-powered-website-builder/) tool. - 📓 The [fourth issue of The HTML Review is out](https://thehtml.review/04/), a rad little web-based zine with a unique interactive interface — well worth a scroll. 📙 Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1744191169/mnz3mgc8fnbzlbqjywff.jpg)](https://blog.css-weekly.com/top-5-css-navigation-menu-mistakes) [Top 5 CSS Navigation Menu Mistakes](https://blog.css-weekly.com/top-5-css-navigation-menu-mistakes) — Runs through some of the most common UI gotchas found within navigation menus, such as unforgiving target areas on dropdowns. Zoran Jambor [Use `shape()` for Responsive Clipping](https://developer.chrome.com/blog/css-shape?hl=en) — Support for the CSS `shape()` function is now [slowly rolling out](https://caniuse.com/mdn-css_types_basic-shape_shape) — you can expect it to work in Chrome 135 and Safari 18.4. As such, here’s a quick look at how it can be used with `clip-path` for responsive clipping — there's a [demo here](https://codepen.io/web-dot-dev/pen/YPzgNrL). Ana Tudor has also chucked together [a 'breathing box' demo](https://codepen.io/thebabydino/pen/ZYENVOQ). Noam Rosenthal [Implementing Multi-Tenancy into a Supabase App with Clerk](https://go.clerk.com/4fHJwre) — Learn to build B2B SaaS with secure multi-tenancy: user roles, team permissions, and cross-tenant data isolation. Clerk sponsor [More Accurate DevTools Performance Debugging using Real-World Data](https://developer.chrome.com/blog/devtools-grounded-real-world?hl=en) — The latest on Chrome’s ongoing efforts to improve the DevTools Performance panel — this time with a focus on CPU throttling calibration, and data-driven improvements. Brendan Kenny [Background Image Opacity in CSS](https://blog.jim-nielsen.com/2025/background-image-opacity-css/) — A quick look at the options available for controlling opacity, including ‘blending’ via RGBA, pseudo elements, and an experimental [`cross-fade` function](https://developer.mozilla.org/en-US/docs/Web/CSS/cross-fade). Jim Nielsen ▶[Modern CSS Theming, Light Mode, Dark Mode and More](https://www.youtube.com/watch?v=F1s8MZoGVL8) — A roughly half hour look at what modern CSS features we can use to create dark and light themes and how to save user preference to localStorage. CJ (Syntax) [Making `:visited` More Private](https://developer.chrome.com/blog/visited-links?hl=en) — Here’s how Chrome now prevents any potential privacy leaks that use visited links as an attack vector. Kyra Seevers [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1744200456/s0lircv16jp7lf9cqbxe.png)](https://addyosmani.com/blog/coverflow/) [Cover Flow with Modern CSS: Scroll-Driven Animations in Action](https://addyosmani.com/blog/coverflow/) — The Cover Flow feature on the iPod was super cool, so this scratches a certain nostalgic itch. Addy Osmani [CSS Bursts with Conic Gradients](https://frontendmasters.com/blog/css-bursts-with-conic-gradients/) — Some neat little experiments and demos here. Chris Coyier [CSS Custom Properties vs. Sass Variables: A Pragmatic Guide](https://www.alwaystwisted.com/articles/css-vs-sass) Stuart Robson [Automatically Create Social Card Images for Your Astro Blog](https://www.emgoto.com/astro-social-card/) Emma Goto [Automated Visual Regression Testing with Playwright](https://css-tricks.com/automated-visual-regression-testing-with-playwright/) Frederik Dohr 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1744199761/nhxrgztcxq5ledwbpoap.jpg)](https://tailwindcss.com/blog/tailwindcss-v4-1) [Tailwind CSS v4.1: Text Shadows, Masks, and Tons More](https://tailwindcss.com/blog/tailwindcss-v4-1) — A new version of Tailwind CSS dropped just a few days ago, adding `text-shadow` utilities, the ability to mask elements, fine-grained text wrapping, improved browser compatibility, and much more. Wathan & Hollick (Tailwind CSS) [UA+: User Agent Plus](https://fokus.dev/tools/uaplus/) — If you’re after a better baseline for your stylesheet Manuel has a work-in-progress CSS reset that is worth a look. “_Instead of mostly resetting and normalizing properties, we focus on improving existing user agent styles and adding new styles only where browsers fall short_”. Manuel Matuzović [Your Users Saw the Error. Sentry Makes Sure You Do Too](https://sentry.io/for/frontend/?utm_source=frontendweekly&utm_medium=paid-community&utm_campaign=errors-fy26q1-evergreen&utm_content=newsletter-usererror-trysentry) — Errors? Don't guess what happened on a browser you don’t own — let Sentry tell you. Console logs, stack trace, user actions, it’s all here. 👉 [Stop flying blind with a free trial](https://sentry.io/for/frontend/?utm_source=frontendweekly&utm_medium=paid-community&utm_campaign=errors-fy26q1-evergreen&utm_content=newsletter-usererror-trysentry). Sentry sponsor [Lighthouse Scoring Calculator: A Small Playground for Understanding Lighthouse Scores](https://googlechrome.github.io/lighthouse/scorecalc/) — This tool lets you fiddle around with some hypothetical values calculated by Lightouse so you can get a rough idea of which values have a bigger effect on the overall score. Chrome for developers [Record: Open-Source Web App to Record Screen and Camera Directly in the Browser](https://github.com/addyosmani/recorder) — Another media-related project from Addy, this one is actually a fork of an older project with some modern enhancements. You can [give it a spin here](https://record.addy.ie/). Addy Osmani [Khroma: An AI Color Tool to Design with Colors You Love](https://www.khroma.co/) — An interesting method for generating color palettes. You choose 50 colors you like (saved in localStorage), which personalizes the algorithm to give you palettes based on your favorite colors. George Hastings [Penguin UI: A Plug-and-Play UI Component Library for Tailwind & Alpine.js](https://www.penguinui.com/) Salar Houshvand [UI Inspector: A Chrome Extension to Visually Edit Live Web Pages](https://www.ui-inspector.com/) UI Inspector 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://bsky.app/profile/brandrick.bsky.social) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/687/*|UID|*?ipx=t)