It’s Friday. Time to download some new fonts.
Alvaro by Don Marciano is a condensed, slightly rounded typeface that is free for personal use. It’s all caps but includes extended punctuation and accents. I’m especially into the way he handles the numeric characters since I think it’s harder to make them really stand out.
Download at dafont.
I just signed up to write for a new campaign on Postcards to Voters (yay! Florida vote by mail enrollment!) so I’ve been going through some of the cards I sent out during the 2018 elections.
In addition to providing something concrete to do when the news gets too depressing, it’s also a pretty good way to volunteer for people who are into fonts or hand lettering. If you’re like me and have trouble staying motivated when it comes to brainstorming ideas, this is a great way to try things out with some actual content to work with. Plus, it feels great when the candidates your write for win.
It’s super easy to get started, just go the site, sign up, and send in a photo of one postcard to get approved.
I try to change up which foundries/designers I recommend and I already mentioned 7NTypes back in July but I also really, really love this font so here we are.
Monorow One is an awesome arrow-y monogram font that comes with a set of frames for the number characters. It’s free for personal use only.
Download at dafont.
Back to the recs. Mightyful by Deena Type is a delightful display font (with great promotional art). It’s free for personal use and includes lots of swirly alternative characters.
Download at dafont.
One of my recent projects at work was a rewrite/redesign for blog pages that averaged page speed indexes (indices?) in the 90000s. The upside is that I managed to accumulate a lot of helpful articles and resources on the topic of web performance. These links cover general tips and asset handling. I have other lengthy lists of bookmarks dealing specifically with optimizing CSS and JavaScript that I’ll try to sort through later.
General
Front-End Performance Checklist 2018
It’s likely this will be replaced by a 2019 checklist in the next few days but for the time being, it’s an extremely comprehensive guide to planning, improving, and maintaining your page performance.
Progressive Tooling
A handy, well-organized collection of third-party tools.
Using Preload and Prefetch in Your HTML to Load Assets
Fonts
In my case, we were too worried about the possibility of a flash of unstyled text to really optimize our fonts (*sigh*). If you have more leeway, these are good reads. Also, if you’re loading web fonts from a third-party (Cloud.typography, Typekit, etc.), always double check that you aren’t loading font weights that you never use!
A Comprehensive Guide To Font Loading Strategies
Web Font Optimization at NerdWallet
Images
lazysizes
I’ve been using this lightweight lazyloading plugin. It automatically handles dynamic content which has been really useful.
Responsive Images: If you’re just changing resolutions, use srcset.
Good introduction to using srcset for image sizing.
SVGOMG
Optimize everything! Even SVGs.
TGIF! Here’s a great free font!
Peony by Sarah Rudkin is an awesome chunky, hand lettered font. I would also highly recommend visiting her website and checking out her icons for an adorable corgi illustration.
Download at dafont.
This week’s (I say as if these have been consistent) font rec is a limited-time free good on Creative Market. Forbidden Isle is a great 70s style tiki number and available free for three more days so get it fast.
Download at Creative Market.
I wanted to get this out earlier but at least it’s (barely) pre-Thanksgiving.
Mistletoe is a mutli-colored font to brighten up the holiday season. It contains hand drawn, thick serif lettering with a leaf and berry pattern inside. It’s an all caps font and better for display situations than long blocks of text.
Color fonts are supported in Illustrator CC 2018 and Photoshop CC 2017 plus Firefox and Microsoft Edge on the web. This package also includes a single color fallback variation. For more information on the technical side of color fonts, checkout colorfonts.wtf.
This is my first color font and the first font I’ve created with the Glyphs app so if you have any technical issues — even if you’re using the free personal version — please let me know so I can get them fixed. Also, I’ve been trying to figure out if additional palettes would be overkill or a welcome feature so feel free to share that or any other feedback.
Download it here.
Later this week I’ll be releasing my first attempt at a color font so it seems like a good time to look at some of the awesome examples that are already out there.
If you need a quick overview of color fonts - how they work, where you can use them, etc. - colorfonts.wtf and Adobe Typekit have helpful primers. Unfortunately, support on the web (Firefox and Microsoft Edge only) isn’t great just yet but these fonts are still worth checking out now.
Bungee by David Jonathan Ross
Not only is this font great, this page is a great example of horizontal scroll page design.
Color Tube by Ivan Filipov
Playbox by Matt Lyon
Olcino by Igor Petrovic
Memphis by Anugraha Design
Bouquet by bloomxxvi
All the reasons you might not need to use a modal!...
This page lured me in with the complaining about modals but the best part is really the awesome 8-bit design.