Blog preview card with variable font and fluid typography

What are you most proud of, and what would you do differently next time?

For my solution to the QR code component challenge, I had explored web sustainability best practice for web fonts. For this challenge, I was able to build on that and extend it from static to variable fonts.

I was able to convert the TTF font file to WOFF2. I may have to look into tools like glyphhanger by Zach Leatherman to subset variable fonts (and keep them variable).

What challenges did you encounter, and how did you overcome them?

This project has slightly smaller fonts sizes in the mobile layout than in the desktop layout. Fluid typography uses the CSS clamp function to reduce font sizes for smaller screens without using media queries.

Working out the clamp functions gets quite mathematical, especially when using relative units like rem for better accessibility. I'm glad I found online tools like Fluid Typography Tool and did not have to do the math myself.

What specific areas of your project would you like help with?

There are three things in this project that were new to me:

• Variable web fonts,
• Styling links in different states,
• Fluid typography.

I would appreciate feedback on any of these.

Thanks for your help!