from zymotux
Down the CSS wormhole we go again, hunting for the perfect sans-serif font for my blog, to make it stand out and add a personal touch. I wanted to find a font like Avenir Next, which is the one I use on my Kobo Aura One e-reader. I also wanted to avoid Google Fonts. After some deliberation, I narrowed it down to three options from https://fontlibrary.org, all distributed under the SIL Open Font Licence:
I tried out all three on the blog, umming and erring over which I preferred, running it by The Canadian for a second opinion, before settling on Metropolitano. A little CSS to optimise it, leaving the option of picking one of the other fonts later if I change my mind, and voila! – we have a sans-serif font to go alongside the Kaushan Script font used to style the “zymtoux” blog title:
/* Fonts used */
@import url('https://fontlibrary.org/face/kaushan-script');
@import url('https://fontlibrary.org/face/metropolitano');
/* @import url('https://fontlibrary.org/face/inter-ui');
@import url('https://fontlibrary.org/face/poppins'); */
* {
font-family: 'MetropolitanoRegular';
}
h1, h2, h3, h4 {
font-family: 'MetropolitanoMedium';
}
p, list, blockquote {
font-size: 1.1rem;
}
I've tweaked it in a couple of other places too:
/* Blog description (underneath title) on index page */
header p.description {
color: #444;
font-family: 'MetropolitanoMedium';
}
/* Pinned posts */
header nav a {
color: #444;
font-family: 'MetropolitanoRegular';
display: inline-table;
}
I did quite enjoy this dive into fonts – there are an overwhelming number in the world these days, although I tend to boringly use the standard fonts provided by operating systems and software i.e. Arial, Calibri and Times New Roman on Windows, Noto Sans and Hack on Kubuntu. I have deviated from this consciously every now and again. Back when I was doing my PhD, I rebelliously chose Trebuchet MS for my titles and subtitles to go alongside Times New Roman as the main font.
I also enjoyed discovering a little bit of font history. For example, Wikipedia and the Linotype website informed me that the working life of Adrian Frutiger (1928-2015), who designed Avenir Next, “spanned the hot metal, phototypesetting and digital typesetting eras”. How exciting to have had a career that bridged such diverse technological innovations! Kinda reminds me of how my childhood and early adulthood saw the analogue to digital transition. I wonder what innovations will transform my working life over the next couple of decades?
Anyway, enough font fiddling for now! Did I find the perfect font? Well, no, not quite – but it'll certainly do the job for now and I had fun along the way!
Entry 32 of my participation in the “100 Days to Offload” challenge – find out more and join in!
2020-09-20 #100DaysToOffload #blogging #coding #css