The Font Matrix; Phosphor Icons; Hauora Sans

Today, we have a super cool font selection tool, an equally super cool icon collection, and a level-up of an already super cool font.

TL;DR

(This is an AI-generated summary of today’s Drop.)

• The Font Matrix: A tool for pairing and categorizing typefaces, the Font Matrix organizes fonts along two axes based on form (dynamic, rational, geometric) and style (contrasting sans/serif, linear sans/serif). It aids in selecting complementary typefaces for design projects, with an extended guide available at Pimp My Type and a companion post on Google Fonts.
• Phosphor Icons: A vast collection of open-source icons created by Helena Zhang and Tobias Fried, Phosphor Icons offers a variety of icons for different applications. Users can have fun with the “randomizer” feature on the Phosphor Icons website.
• Hauora Sans: A homage to the Manrope font, Hauora Sans is a slightly more condensed font with additional language support, created by Preet Patel and Marc Burgess. It’s available for download at WCYS-Co on GitHub.

---

The Font Matrix

The Font Matrix is a structured way to pair and categorize typefaces based on their inherent characteristics and visual impact. It’s an actual matrix/grid that classifies typefaces along two axes: the x-axis represents the form model — dynamic, rational, and geometric — while the y-axis categorizes typefaces by their style — contrasting sans, contrasting serif, linear sans, and linear serif.

Starting with the bits on the x-axis (the form model) it quickly becomes evident that it focuses on the overall appearance and structure of a given typeface. Dynamic typefaces are characterized by varied stroke weights and often include italics or cursive styles that convey movement and energy. Rational typefaces are more uniform in stroke weight and sport a clean, no-nonsense, modernist vibe. Geometric typefaces, as the name suggests — and as we’ve covered before — are based on geometric shapes like circles and squares, giving them a highly structured feel.

When we move from the horizontal to vertical, we quickly see that it’s all about style. Contrasting sans typefaces are sans-serif fonts that have very noticeable variation in stroke width, providing a balance between structure and flair; whereas contrasting serif typefaces are serif fonts that also exhibit significant contrast in stroke weight, but with the added complexity of serifs (I don’t think we’ve mentioned this before but “serif” likely comes from “schreef”, a Dutch word meaning “dash” or “line”). Linear sans typefaces super-minimalist, with even stroke weights and a clean, modern appearance. Finally, linear serif typefaces combine the traditional look of serifs with the uniformity of stroke weight, which sports a classic yet contemporary vibe.

We can use the font matrix to help select typefaces that complement each other when working on things we want to present to the world. For instance, pairing a dynamic serif with a linear sans can create a harmonious contrast that draws the eye and emphasizes key elements of a design. Another example would be combining a geometric sans with a contrasting serif to add depth and interest to a layout without overwhelming the consumer.

Dig into the linked article and this extended, companion post to go a bit deeper into this relatively nascent concept/tool and hit up Pimp My Type, a site we covered in a Bonus Drop back in February of 2023.

Phosphor Icons

Phosphor is a passion project by Helena Zhang and Tobias Fried that has a bonkers number of open-source icons. It began as a means to create a techie dashboard for a phone and evolved into a widely used resource by scores of app designers and web developers.

Grab them all, but before you do that, have some fun and keep pressing the “randomizer” icon (it looks like a single 🎲) on the preview page. I could likely do that all day.

Hauora Sans

If you like the non-icon design parts of the Phosphor site, one element that likely caught your eye was their use of Manrope, a pretty spiffy font.

Preet Patel and Marc Burgess liked Manrope so much that they gave it a power-up. Their Haurora Sans homage to Manrope is slightly more condensed (I’m partial to condensed fonts), and has support for some addiitonal languages.

It’s super clean and something I almost used for my Observable notebook theme this year. Give it a go!

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️