Black Ground by Letterhend Studio is, in my opinion, a pretty good font.
It’s slightly messy with a brush texture and hand lettered feel and it’s free for personal use only.
Download at FontSpace or buy on Creative Fabrica.
Black Ground by Letterhend Studio is, in my opinion, a pretty good font.
It’s slightly messy with a brush texture and hand lettered feel and it’s free for personal use only.
Download at FontSpace or buy on Creative Fabrica.
Found 99 vulnerabilities (84 moderately irrelevant, 15 highly irrelevant)...
Bookmarking this article for the next time dependabot alerts come up at work. It’s a really fun read on a pretty dry topic and full of an appropriate amount of incredulity at some of the high severity vulnerabilities that get flagged.
A new addition to my growing collection of starry fonts (if that’s your thing too, make sure to check out Starry Night and Publicite d’epoque).
Space Time has a regular version with the full design and lightly touching letters and a stackable, overlapping version with separate layers for the base, outline, shadow, and stars (plus the base and outline versions can be used as standalones!).
When I mentioned a couple weeks ago that I was working on a font with fussy kerning, this is the one I was talking about so if you notice any oddities please let me know in the comments or through the contact form.
It’s free for personal use so download it here.
It’s a Friday font day with Cherish Today by Sarid Ezra.
Loving the fun, casual feel of this font. Plus all of the promo posters are great. It’s all caps but with a cut out effect on the lowercase letters and free for personal use only.
Download at dafont or buy on Creative Fabrica.
It’s time for another Google Core Web Vitals themed TIL. This one concerns image loading. Specifically, huge, above the fold image preloading.
The site I work on uses a lot of super wide to full width hero images. We’d done some previous optimizations around serving images in WebP format (Serve images in modern formats) and using picture
and srcset
for responsive images (Properly size images). I won’t go into details since those topics already have a ton of tutorials that explain things better than I ever could. In fact, Smashing Magazine alone has you covered with Using WebP Image Format Today and Responsive Images Done Right: A Guide To picture And srcset.
Preload critical assets to improve loading speed.
The one downside to our earlier work? It made things a little more confusing when we started looking into preloading images.
Preloading assets that aren’t actually used isn’t particularly helpful (Chrome will even warn you if you do it!). If you’re serving a WebP image but preloading the fallback or preloading a mobile image on a desktop browser, you aren’t getting any benefits out of it.
Let’s say you have a picture
block that selects an image based on browser support, screen resolution, and breakpoint:
<picture>
<source srcset="large-image.webp, large-image-2x.webp 2x" media="(min-width: 768px)" type="image/webp" />
<source srcset="large-image.jpg, large-image-2x.jpg 2x" media="(min-width: 768px)" />
<source srcset="small-image.webp, small-image-2x.webp 2x" type="image/webp" />
<img src="fallback-image.jpg" srcset="small-image.jpg, small-image-2x.jpg 2x" />
</picture>
The first question is how to handle different image formats. Looking at the Can I use entries for Webp image formats and preload, it seems pretty unlikely for a browser to support preloading but not WebP images. And according to a quick aside in this Addy Osmani article on hero images, you can use the type="image/webp"
attribute with a link
tag to specify that you want to preload a WebP image.
Next, we need to deal with screen sizes and resolutions. In addition to type
, the link
tag supports media
and imagesrcset
attributes which should look very similar to the media
and srcset
attributes on our source
and img
tags. The main difference is that you have to be more explicit with your breakpoints since the browser won’t be choosing the best image itself.
Putting that all together, you would add this code to your head
tag to preload the images from the example above:
<link rel="preload" as="image" href="large-image.webp" media="(min-width: 768px)" imagesrcset="large-image.webp, large-image-2x.webp 2x" type="image/webp" />
<link rel="preload" as="image" href="small-image.webp" media="(max-width: 767px)" imagesrcset="small-image.webp, small-image-2x.webp 2x" type="image/webp" />
If you prefer an example with real images, check out this Pen on Codepen. Just click on Settings and HTML to view the preloading the code.
A farewell to The Quick Brown Fox....
I’m finishing up a font with some extremely finicky kerning so this list of words with awkward letter combinations from the Hoefler&Co. blog is fantastic. There’s even a Github repo with PDFs.
I’ve been in a real sixties retro design mood lately (or, if you look at my fonts, maybe I always am at least a little bit). So Ducky Manly by Allmo Studio really hits the spot. It’s free for personal use and the commercial version comes as a duo.
Download at dafont.
GitHub Pull Request Review workflow is great. What I particularly like is the “file viewed” toggle, which mean that I’m not tempted...
This is so helpful! I love the viewed checkboxes on Github but not being able to reset them was driving me crazy.
What’s up hot dog?
I’m a sucker for a sixties style font, especially one with skinny inner lines, so I’ve gotta recommend Hot Dog by Toko Laris Djaja. It’s free for personal use only.
Download at dafont.
Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing....
This a great tool for testing out font pairings and exploring new fonts. Plus, the machine learning details are super interesting.