#372: Free Fonts and Illustrations

With free Figma kits, free fonts and illustrations, generators and a few lovely spinners. Issue #372• September 27, 2022 • [View in the browser]( 💨 [Smashing Newsletter]( Bună Smashing Friends, Every now and again, you might end up in a situation where you need to deliver results quickly. You might be working on a quick prototype just to explore ideas, or you need to finish a presentation in time. In such cases, having a few ready-to-use resources in your toolbox can be quite helpful. In this newsletter issue, we explore some of the free toolkits, Figma kits, illustrations, generators, and fonts to help you with just that. In Smashing News, we are getting ready for [SmashingConf NYC]( taking place on October 10–13, with sessions on design systems, accessibility, SVG, performance, design patterns, Figma, and Web3. We’d love to see you there — [get your ticket]( [SmashingConf NYC 2022]( Our speakers are not just knowledgeable and amongst the best in their fields. They are also [excellent speakers and teachers]( smart and kind friends, and wonderfully nice and approachable. If you can’t travel to New York, we’ve got your backs! We’ll be running a [SmashingConf Live Stream Online]( for the main stage talks. Plus, you get some behind-the-scenes footage and backstage interviews with speakers, organizers, and friends. Pssssst. Looking for video footage from SmashingConf San Francisco? Well, you can now [watch all talks here](. We also have a new free workshop on [Accessibility in Design & Development]( coming up next week (Oct. 3–4), kindly powered by our dear friends at [Deque]( who take accessibility seriously and help folks build and maintain accessible websites and mobile apps on their own. [Workshop: Accessibility in Design & Development]( Testing for accessibility doesn’t have to be overwhelming. [Register here](. We have lots of exciting news coming your way very soon — this time around all printed things! In the meantime, stay tuned, and take good care of yourself and of your loved ones. — Vitaly (@vitalyf) --------------------------------------------------------------- 1. Design Systems Figma Kits If you are building a design system for a complex product, it’s easy to overlook a few important components or states that you are likely to need in your project. [Design Systems for Figma]( keeps you on track, with a growing repository of Figma kits of design systems — grouped, organized and searchable. [Design Systems Figma Kits]( You’ll find plenty of Figma kits, from Atlassian and Airtable to Shopify and Slack. Additionally, you can take a look at [Gov.uk design system]( focused specifically on complex user journeys and web forms. A goldmine worth bookmarking! (vf) --------------------------------------------------------------- 2. Versatile Fonts Who doesn’t have a sweet spot for well-crafted typefaces? We came across some free typefaces that were not only created with great attention to detail but are super versatile, too. [Anek]( The open-source typeface family [Inter]( was designed particularly for computer screens and shines with a tall x-height to aid in readability of mixed-case and lower-case text. OpenType features like contextual alternates for punctuation, slashed zeros, tabular numbers, and more are bound to make typography lovers happy. Another typeface that was designed to improve readability is the [Atkinson Hyperlegible Font](. Its focus on letterform distinction enables low-vision users to easily recognize and differentiate commonly misinterpreted letters and numbers. The multi-script typeface [Anek]( tells a very special story. It covers nine Indian languages plus Latin and was created through a collaboration of twelve type designers working across eight cities in India. The design of each script is deeply rooted in its typographic culture, while the different scripts live together in visual harmony. The type families [Yrsa and Rasa]( build upon existing typefaces and span different writing systems. Both are intended for continuous reading on the web, while Yrsa has a special focus on Central and East European languages, and Rasa supports a wide array of basic and compound syllables used in Gujarati. How about some color fonts for a change? Two weeks ago, the [first batch of color fonts]( arrived on Google Fonts. The new COLRv1 font format supports gradients, multiple color palette options, color palette customization, and OpenType variations. Exciting times ahead! (cm) --------------------------------------------------------------- 3. Delightful Loaders And Spinners Who said all loaders need to look the same? Griffin Johnston rethought the good old loading indicator and came up with a [collection of loaders and spinners]( that are unique yet simple enough for real-world projects. [Loaders]( The collection includes 24 types of lightweight loading animations built with HTML, modern CSS, and a bit of SVG. Fully customizable, you can adjust their color, speed, and line weight to match your project’s needs. The loading indicators get by without any dependencies and are available as a tiny tree-shakeable component library for React or ready to be copied and pasted with just a click. A delightful little UI detail to shorten any wait. (cm) --------------------------------------------------------------- From our sponsor Flexiple: Hire Vetted Developers In 72 hours. Handpicked For You. [Flexiple]( Build your dream team with Flexiple developers handpicked through a 6-stage screening process. Find a personalized match through a consultation with our tech experts and solve your hiring challenges. [Start your 2-week no-risk trial now]( and supercharge your product goals! --------------------------------------------------------------- 4. Mix-And-Match Illustrations You’d love to include an illustration in your design, but you don’t have the skills to design one yourself, and hiring an illustrator isn’t an option either? Luckily, some great illustration libraries out there help you mix and match your own illustrations from scratch or customize illustration presets until they match your project’s needs. No design skills required. [Designstripe]( One of these libraries is [Sublus](. Sublus provides a set of characters you can customize to create different scenes — whether it’s a forest or desert scene or a gym, lab, or office scene. [Open Peeps]( works similarly. The site lets you mix and match hand-drawn illustrations of people of the world to create avatars, busts, and sitting or standing scenes. Extraordinary accessories like a superhero mask or one-eyed Cyclops characters are perfect if you want to add a surprising twist to the design. [Storyset]( provides a huge variety of different scenes to customize — from business and commerce to nature scenes. Particularly the option to use a custom color palette will come in handy if you want the illustrations to match your brand. Last but not least, there’s [Designstripe]( a growing library of creative, colorful illustrations of people in action. Just adjust the level of detail, the look and feel, and the color palette to make the illustration yours. Happy tinkering! (cm) --------------------------------------------------------------- 5. Upcoming Online Workshops That’s right! We run [online workshops on frontend and design]( be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. As always, here’s an overview of our [upcoming workshops]( - [Smart Interface Design Patterns]( UX 7h-video course on interface design with Vitaly Friedman - [Architecting Design Systems]( Workflow with Nathan Curtis. Oct 6–14 - [Optimistic UI Masterclass]( Dev with Zell Liew. Oct 6–14 - [Designing for Emotion Masterclass]( UX with Aarron Walter. Oct 17–18 - [Designing The Perfect Web Forms]( UX with Vitaly Friedman. Nov 17–18 --------------------------------------------------------------- 6. Illustrations For More Diversity People of color are often underrepresented in illustrations. To bring more diversity to online content, John D. Saunders created [Black Illustrations]( a free resource of beautiful, custom illustrations featuring Black people and people of color doing extraordinary things. Whether it’s business or digital marketing, city life, seasonal activities, performing arts, or mental health, the collection is bound to have the perfect illustration for every occasion. [Black Illustrations]( If you like to get creative yourself, the mix-and-match [Amigos Illustrations]( pack is for you. Just like playing with building blocks, you can combine vector heads, arms, legs, and expressions to create different characters and scenes. The illustrations were created by Gustavo Pedrosa and shine with vibrant pigments, organic textures, and flowy lines. Two fantastic resources to breathe fresh life into any design. (cm) --------------------------------------------------------------- 7. 3D On The Web Have you ever played with the idea of including a 3D photogrammetry model on your site? If so, the [guide to 3D]( that The New York Times published is for you. To help you choose the best technique for your project, it dives deep into different options of publishing 3D models on the web, with demos that take us through New York City’s neighborhoods. [Delivering 3D Scenes to the Web]( Not all 3D models need to be as complex as the street scenes in the New York Times article, though. A great example of how just a sprinkle of 3D can take a reading experience to an entirely different level is Bartosz Ciechanowski’s [blog post about GPS](. He uses small, interactive 3D models to illustrate how satellites help a GPS receiver determine its position. An inspiring and eye-opening look into how much ingenuity is hidden behind the simple act of seeing one’s live location on a map. (cm) --------------------------------------------------------------- 8. Elements And Sketch Annotations Perhaps you already have some favorite icons in your digital toolkit that you love to use. But how about some rather abstract elements? They come in handy if you want to grab people’s attention and make your message more compelling. Streamline offers [34 free sets with elements]( that add a spark of surprise and fun to your projects. [Streamline Elements]( From abstract elements and sketch annotations to arrows, speech bubbles, ribbons, banners, sticky notes, patterns, and schematic shapes, each of the more than 3,000 elements is bound to give your design a handcrafted, modern look. The elements are free to download in PNG, SVG, JSX, and PDF formats. (cm) --------------------------------------------------------------- From our sponsor Northwestern’s Online MS in Information Design and Strategy [Northwestern’s Online MS in Information Design and Strategy]( Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. [Learn more](. --------------------------------------------------------------- 8. New On Smashing Job Board - [Product Designer (UX/UI)]( at Jack Henry (United States) - [E-Commerce UX Auditor]( at Baymard Institute (Remote) - [Front End Web Developer]( at CTAC (United States) --------------------------------------------------------------- 9. Recent Smashing Articles - [Lessons Learned As A Designer-Founder]( - [Things I Wish I Had Known About Angular When I Started]( - [Designing Better Inline Validation UX]( - [Smashing Podcast Episode 53 With Rémi Parmentier: Can HTML Email Use Modern CSS?]( - [What’s New In Gatsby 2022?]( - [Read more articles on Smashing Magazine →]( --------------------------------------------------------------- That’s All, Folks! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- 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](