🔧 Code & Creativity - Crafting Accessible Forms with a Dash of CSS Magic!
Tags: webdev, css, ui, ux
Published: 2024-04-04 13:24:00


**Hey everyone** ✌️ Here's a quick look at this week's newsletter:

🌐 From Pixels to Paper  
🌟 Typographic Alchemy  
✏️ Icon Design Decoded

Enjoy this week's edition 👋 - Adam at Unicorn Club. 

---

**The Newsletter for Unicorns 🦄**

5-minute bite-sized weekly newsletter for design-savvy front-end devs and code-loving UX/UI designers. Filled with the best hand-picked resources. 100% free.

[**Subscribe for free**](https://unicornclub.dev/)

--- 

Sponsored by  [Webflow](https://go.unicornclub.dev/webflow-agency)

## [Accelerate your agency’s growth](https://go.unicornclub.dev/webflow-agency)

[![](https://unicornclub.dev/wp-content/uploads/2024/04/webflow-unicorn-club-apr2024.png)](https://go.unicornclub.dev/webflow-agency)

Whether you need to win new business or wow an existing client, Webflow empowers agencies to deliver high-quality client work, faster — without growing your dev budget.

[Start building →](https://go.unicornclub.dev/webflow-agency)

---

### 🦄 This week's best

[**Front-End solution: progress indicator**](https://piccalil.li/blog/solution-009-progress-indicator/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

I knew when I set this challenge, there were multiple ways to solve it and I was not disappointed by the diversity in approaches that folks kindly sent to me.

[**A formula for responsive font-size**](https://jameshfisher.com/2024/03/12/a-formula-for-responsive-font-size/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

This CSS is now part of most websites I make:  `:root { font-size: calc(1rem + 0.25vw); }`

[**The hidden power of typography**](https://microsoft.design/articles/the-hidden-power-of-typography?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

The science behind how design choices influence perception and behavior.

---

**🧠 Fun Fact**

**The Origin of "Upper" and "Lowercase"**  - Did you know the terms "uppercase" and "lowercase" come from the physical layout of a traditional print shop? Letters used in printing were stored in cases; capital letters were kept in the upper case while the smaller letters were stored in the lower case.

---

[**Setting And Persisting Color Scheme Preferences With CSS And A “Touch” Of JavaScript**](https://www.smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

There are many ways to approach a “Dark Mode” feature that respects a user’s system color scheme preferences and allows for per-site customization.

[**How to design icons in Figma**](https://blog.streamlinehq.com/designing-icons-in-figma/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Design should be democratic, that's why our team refuses to hide the process behind our art.

[**Accessible Forms with Pseudo Classes**](https://css-tricks.com/accessible-forms-with-pseudo-classes/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

I am going to take you through creating a simple contact form using semantic HTML and an awesome CSS pseudo class known as :focus-within.

[**From ink to pixel to ink**](https://manuelmoreale.com/from-ink-to-pixel-to-ink?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

There’s something about the book, as an object, that managed to survive across all the various societal and technological changes.

### 🔥 Promoted Links

_Share with 2,000+ readers, book a  [classified ad](https://unicornclub.dev/sponsorship#classified-placement)._

[**Get smarter about Tech in 5 min**](https://go.unicornclub.dev/techpresso)

Get the most important tech news, tools and insights. Join 90,000+ early adopters staying ahead of the curve, for free.

#### Support the newsletter

If you find Unicorn Club useful and want to support our work, here are a few ways to do that:

🚀 [Forward to a friend](https://preview.mailerlite.io/preview/146509/emails/117499339770693368)

📨 Recommend friends to  [subscribe](https://unicornclub.dev/)

📢 [Sponsor](https://unicornclub.dev/sponsorship)  or book a  [classified ad](https://unicornclub.dev/sponsorship#classified-placement)

☕️ [Buy me a coffee](https://www.buymeacoffee.com/adammarsdenuk)

_Thanks for reading ❤️  
[@AdamMarsdenUK](https://twitter.com/AdamMarsdenUK)  from Unicorn Club_