#307: CSS Tools, CSS Data Charts and Fluid Typography

With less-known but useful CSS tools that might come in handy for your projects. From fluid typography with clamp() to line-height calculator and CSS data charts, to general guidelines and resources for writing better CSS. Issue #307 • June 29, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( Zdravo, Do you remember the very first time you wrote a CSS media query? What about your first CSS clearfix? Undoubtedly, CSS has become incredibly powerful over the years; not only did we see new CSS features widely adopted in modern browsers, but [CSS tools]( have improved significantly, too. In today’s newsletter issue, we highlight some of the less-known but useful CSS tools and resources that might come in handy for your projects. From fluid typography with clamp() to line-height calculator and CSS data charts, to general guidelines and resources for writing better CSS. Also, don’t forget about our upcoming online event [Smashing Meets]( the CSSummer edition, with talks by Miriam Suzanne on CSS and CSS container queries. Here’s a kind thank you to all of the wonderful people behind the scenes contributing to CSS and figuring out the techniques and building out the tools. You are our heros, and thank you for your incredible efforts! — Vitaly ([@smashingmag]( --------------------------------------------------------------- #1. CSS clamp() Generator Thanks to clamp(), we can set a font size that grows automatically with the viewport but doesn’t go below or above the minimum and maximum font size that we define. To help us find the perfect CSS values (e.g. for your fluid heading) and control how it scales across different viewports, Erik André Jakobsen built the [Fluid Typography]( tool. [Fluid Typography]( You enter the minimum and maximum font size as well as the minimum and maximum viewport width, and the tool calculates not only the clamp() rule for you but also shows you an example of how the heading will behave. Another helpful [generator to help you figure out the clamp() rule]( for your project comes from Maxime Roudier. It works similarly to Erik’s tool but also lets you select a font family and a range that you adjust with a slider instead of entering concrete minimum and maximum values. (cm) --------------------------------------------------------------- #2. Line Height Calculator If you’re building a type scale based on a baseline grid, there’s a tricky question to be answered: What’s the right line height for every text size on your scale? Fran Pérez’s [Good Line-Height calculator]( does the math for you. [The Good Line-Height]( To calculate the line-height, you need to enter three parameters: font size, multiplier, and grid row height. Font size is the key to ensure your text sits nicely on the baseline grid, the multiplier gives you control over the distance between lines, and grid row height defines the height of each row in your baseline grid. (cm) --------------------------------------------------------------- From our sponsor The “Now What?” Podcast: Hear How Crypto Is Unlocking New Opportunities [The “Now What?” Podcast: Hear How Crypto Is Unlocking New Opportunities]( [Now What?]( is a new podcast series presented by Wix, featuring in-depth conversations with the world’s leading creatives. [Listen to the latest episode]( where Co-Founder and VP Engineering at BuyCoins, Ire Aderinokun, shares how cryptocurrency is unlocking economic potential and presenting new opportunities for designers and developers worldwide. --------------------------------------------------------------- #3. Pure CSS Data Charts Do you need a simple chart to display data but a heavy JavaScript library feels like overkill? Then [Chart.css]( might be for you. The open-source CSS framework uses CSS utility classes to style HTML elements as charts. No JavaScript required. [Charts.css]( Twelve different kinds of charts are supported, from area charts and bar charts to multi-dataset charts, stacked columns, and charts with 3D tilt effects. The charts are responsive, accessible, and, with the entire library weighing in at only 72 KB (6 KB gzipped) and no dependencies required, lightweight and performant. (cm) --------------------------------------------------------------- #4. Upcoming Smashing Online Events Direct from the Smashing family, we are very proud and honored to invite you to our upcoming online event — [Smashing Meets]( — the CSSummer edition. The event will take place online, on July 8th, with sessions by Miriam Suzanne and Ahmad Shadeed on what’s happening in CSS — with a particular focus on CSS container queries. We’d love to see you there, as it will be good fun, of course! [Smashing Online Workshops]( Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with [personal and inclusive events](. And if you’d like to dive deeper, we couldn’t be more excited for Stephanie’s [Level-Up With Modern CSS workshop](. We also have plenty of other topics to choose from. As always, here’s an overview of our upcoming [front-end & design workshops](. - [Creating & Maintaining Successful Design Systems]( Dev with Brad Frost. June 29 – July 13. - [Level-Up With Modern CSS]( Dev with Stephanie Eckles. July 8–22. - [Designing Websites That Convert]( UX with Paul Boag. July 22–30. - [The TypeScript Masterclass]( Dev with Stefan Baumgartner. August 5–19. - [Getting Web Forms Right]( UX with Vitaly Friedman. August 18–20. - [Jump to all online workshops →]( --------------------------------------------------------------- #5. Auditing Different CSS Sources How do you usually test if your front-end components look fine across browsers? Do you have a dedicated test HTML file that includes all HTML elements you’re using to see all the styling at a glance? Austin Gill created a little tool that takes a similar approach: [Style Check](. The benefit: You won’t need to set up a test HTML file yourself, the tool does it for you. [Style Check]( Upload your .css file to Style Check to audit your styles. You can also select a library or reset (Bedrocss, Bootstrap, Eric Meyer’s CSS Reset, and Normalize.css are available), or enter inline styles. The elements range from headings and paragraphs to media, lists, and tables, buttons, forms, as well as other kinds of input, and details such as sub- and superscript, code, quotes, and much more. A handy little helper. (cm) --------------------------------------------------------------- From our sponsor Build Web Experiences That Drive Business Growth [Build Web Experiences That Drive Business Growth]( [CMS Hub]( enables seamless integration with CRM data for advanced personalization, automation, and dynamic content. Develop locally with the tools and frameworks you prefer, then deploy to HubSpot via the CLI, where marketers can create and edit content with visual design tools. [Get started with a free developer test account →]( --------------------------------------------------------------- #6. Image Maps Generator Image maps let you create clickable areas on an image. If you’d like to create an image map but don’t want to fiddle with coordinates to define the clickable regions, [imagemaps.net]( is here to help. [Image Maps]( The site has a UI to make the process slightly more straightforward. Once you’ve uploaded your image, you can use the Pen, Rectangle, and Polygon tools to draw your clickable regions. You can then name each region, assign a link to it, and adjust its color, height and width. A click on the “Export” button provides you with the HTML map and React code that you can copy and paste into your project. And as we all have to make image maps responsive, we could create image maps with [SVG shapes]( and then make [responsive images with SVG responsive](. (cm) --------------------------------------------------------------- #7. HTML/CSS Best Practices Ensuring that websites and applications are usable and accessible for everyone is the responsibility of every developer. However, what if somebody asks you about a set of general CSS good practices, all bundled in one document? Where would you point them to? Joy Heron has collected [valuable HTML and CSS guidelines]( that she learned over the years and that will help you, too, to create responsive, accessible experiences. [Responsible Web Applications]( For people starting out learning HTML and CSS, Shay Howe has released a [comprehensive guide to HTML/CSS](. To provide you with a solid base you can build upon, it outlines the fundamentals and works through all common elements of front-end design and development. A [guide with more advanced lessons]( teaches modern front-end development for designers looking to round out their front-end skills. Also, speaking of modern techniques: - Stephanie Eckles publishes a fantastic resource on [modern CSS solutions for old CSS problems]( — from keeping the footer at the bottom to future-proofing your styles. - Josh W. Comeau has launched a video course on [CSS For JavaScript Developers](. - For some more CSS wisdom you might want to keep an eye on [Ahmad Shadeed’s articles and books](. He regularly publishes CSS tutorials that are bound to take your skills to the next level. --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #8. Shining The Spotlight On... This week, we’d like to give a huge shout out to: - UX Design Weekly Staying on top of what’s happening in the community can be hard. [The UX Design Weekly newsletter]( has your back with a hand-picked list of the best user experience design articles, resources, portfolios, and more every week. - RWD Weekly Newsletter A free, once–weekly round-up of responsive design articles, tools, tips, tutorials and inspirational links. Justin spends hours curating the best content, interview industry leaders and send it to you [every Friday](. We love supporting wonderful community efforts, and we’re always happy to share articles and resources from, so please do feel free to reach out to us anytime. Community matters. 🧡 --------------------------------------------------------------- #9. New On Smashing Job Board - [DevOps Engineer]( at PVH (Amsterdam) - [UX Researcher (For Conversion Rate Optimization)]( at Conversion Rate Experts (CRE) (Remote) - [Web Team Manager]( at Oregon State University Ecampus (Corvallis, OR) --------------------------------------------------------------- #10. Recent Smashing Articles - [Creating Custom Emmet Snippets In VS Code]( - [Creating A Multi-Author Blog With Next.js]( - [How To Run A UX Audit For A Major EdTech Platform]( - [Rise Of Design Thinking As A Problem Solving Strategy]( --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](