Most designers have a personalized toolkit of go-to resources that they rely onfor each web design project. Each tool is special to the designer and is valued for its unique qualities — some act as the source of creative inspiration while others are key components of the design and development workflow.
While it’s easy to stay loyal to the same set of resources, creativity demands that we stray from the status quo. Lucky for us, countless new design tools and resources are released each month which can help freshen up our design process.
With that in mind, we’ve created a series of articles dedicated on showcasing trending, emerging, and unknown web design resources. This week we’re sharing a handpicked list of typography tools that will help you discover the perfect fonts for your upcoming web design projects.
You might also like:Font Pairing For Designers 101, Plus 10 Free Font Pairing Tools
Font Flame
A self-described “Tinder forfont pairing,”Font Flameis a simple application that helps web designers discover new and unexpected pairings of web-based fonts. By randomly generating a phrase consisting of two fonts from theGoogle Font Library, Font Flame prompts users to either “Love” or “Hate” afont pairing. While some font combinations are truly unusable, all your “loved” pairings are saved on-site and can be easily accessed when starting a future design project.
Type Genius
If you already have a primary font in mind and you’d rather not wager on random pairings,Type Geniusmight be the font resource for your design toolbox. This straightforward website allows designers to find a perfectfont pairingfor their existing designs. Simply enter a starter font and Type Geniuswill provide you with a suggestion for a secondary font that is guaranteed to look clean and consistent.
You might also like:How to Use Web Fonts in Your Shopify Store
We Love Icon Fonts
No matter how you feel about them, icon fonts hold a special place in the hearts of some designers.We Love Icon Fontsis like an open source version of Google Fonts, but for icon fonts sets only. Each font pack is free to download and can be easily integrated into your CSS file. But be warned — while icon fonts are simple to implement in your web projects, you might end up witnessing a reduction in sharpness and quality when compared to inline SVG vectors. Check out thishandy comparison chartto see which option is best for your project.
Palettab
Palettabis an extension for Google Chrome that hits two birds with one stone. Once installed, this application randomly presents you with new fonts each time you open a new tab in your web browser. What makes it even more useful is that it pairs each font alongside a unique colour palette courtesy ofColourLovers. It’s a great way to get a burst of fresh design inspiration every time you surf the web!
Glyphr Studio
Have you ever wanted to design your own font? If you have, you might want to giveGlyphr Studioa look.Glyphris a free-to-use, online font editor which has everything you’d come to expect in a vector editing software including lockable attributes, keyboard shortcuts, and root components. Once you’re happy with the look of your font, you can easily export it as Open Type, True Type or SVG files.
TypeCase
As designer you’ll more than likely build up an extensive collection of fonts over the length of your career. Rather than cluttering your panels with fonts you barely use, you can rely onTypeCaseto preview and compare multiple typefaces without having to install them on your hard drive. Just drag your font folders into theTypeCaseapplication, enter your custom text, pangrams and colours, and find the perfect font for your web design project.
Blokk Font
Have you ever shown a wireframe to a client and been told that “the design looks great, but can we get rid of that random Latin text?”. WhileLorem Ipsum generatorsare often the go-to for finding placeholder language for mockups, it can create unnecessary confusion in the minds of our clients. To help alleviate some of this, try usingBlokk Fontas an alternative in your next web design project. Rather than random Latin squibbles, Blokk Font uses solid bars to imitate text in your design mockups or wireframes.
RightFont
RightFontis a Mac-based font management application that you can install as an alternative to Apple Font Book. While still in beta, this typography tool offers a bunch of features that help designers locally manage all their fonts in a clean and intuitive interface including enhanced search capabilities, customized lists, and filtering options. Plus, RightFont seamlessly integrates with Adobe CS/CC and Sketch, so you can apply your desired font to a text layer in a matter of clicks.
Font Face Ninja
Font Face Ninjais a typography tool that finds itself in a little bit of a grey area. On one hand, it’s a tremendously useful tool in that it allows you to identify any font used on any webpage you come across. On the other hand, however, it opens up a door for font theft. Luckily, the founders atFont Face Ninjahave created a font blacklist to avoid unauthorized downloading of licensed typefaces. So if you plan on using this browser extension to explore and discover new web fonts, please support the designers who created them by purchasing them legally.
Fontstand
Often designers purchase a font for a specific project and end up never using it again. To help avoid these kinds of situations,Fontstandoffers a licensing model that allows designers to test outthousands of fontsfor free before buying anything. If you happen to fall in love with a font, you can rent it for a designated time period for only a fraction of its regular retail price. If you’re working on a project and aren’t sure if you’ll ever re-use a certain typeface again, this might be the safest and cheapest route to take.
Did you “love” or “hate” the typography tools in this web design resource list? Comment below and let us know what some of your must-have resources for typecase are!
You might also like:6 Places to Find Design Inspiration Early in Your Process
