Hacking a tool for myself — Font + weight comparison
Will keep this one short and focused.
A couple of months ago we were working on streamlining a multi-family font stack to natively support the majority of our user-base. As part of this exercise, it was important to streamline/ define what font-weights we had to our disposal and which of them made good combinations for us to work with.
The challenge however was that if we directly would open the page on our browsers, it would only reflect the output in the font which would be the first one to match. This made comparison between the 5–6 font families close to impossible.
I asked around my peers as well as searched the web if there’s something. But don’t think I even had the right keywords to know what I was after, hence didn’t make progress there.
The solution
While everyone had obviously more important things to adhere to, I decided to give it a shot myself, with whatever html+css ‘expertise’ I had.
While discussing a couple of possible things we wanted to achieve, the solution at the least would need to achieve the following:
1- Should be a catalogue of multiple fonts
2- Show us their display at various weight
3- Also give a preview of how they’d look at different sizes
With this end-goal in mind, a couple of hours, a LOT of caffeine and a messy css file later, i was able to hack this successfully:
This grid got me the preview I wanted with the following weight based css properties:
- Normal
- Bold
- Weights 100 to 900
Surprisingly, the difference b/w the fonts at different weights isn’t as bad as I was expecting (apart from a couple of exceptions.)
Overall, I’m very pleased with what I’ve built for myself. Feel free to download it here, and let me know if (by any measure) you found it useful too!
P.S. If you’re wondering the logic behind the term ‘handgloves’, you might find this article helpful.
