Ever since the day I got to hold the iPhone and the iPad, I seem to be going crazy about “typography” and it’s importance and get very interested in making the content rendering stand out on the sites that I develop/own.
Thanks to HTML5/CSS3 — @font-face, text-shadow and similar CSS3 stints have sustained this interest in me, as there is a possibility to explore and make the “beautiful typography” happen. Thanks to google, for hosting some of the exquisite web fonts and making them freely available.
Slowly as I researched for what that “one” font which can make my body content text look exquisite, the ultimate – no alternate winner came to the dias as the “Proxima Nova” — elegant, beautiful, clear and crisp font, you cannot simply be satisfied with any others claiming to be the equivalents. Mark Simonson must’ve been in a state of ecstasy when he found the gap for this font between Futura and Aksidenz-Grotesk. Unfortunately, this font has restricted it’s userbase by going commercial with complicated per user licenses, terms and conditions clauses. Fair enough, for the uniqueness this font brings to the table, it’s worthy enough to be paid for the usage term. Interesting to note that Aksidenz-Grotesk itself has been the model typeface for the then 1960 born “Helvetica” which is a very popular font; On a side note, it’s also quite interesting to note that the Grotesk, Helvetica and similar families that we are speaking about are native to European; Helvetica meaning “swiss”. Trust me, Proxima Nova at 14px with a line-height of 20px is bliss.
Afraid of a constantly renewing pay model for the font and page-views dependency clauses, I did not want to take the purchase route for Proxima Nova. So, I was looking at various free license fonts for the body text (of this blog) at 14px/20px*, and finally I closed upon three choices:
* px for comparison; real use could be like 1.4rem/2rem — “root em” css3 unit for specifying font size
Helvetica is a font that is available across Mac OS machines today and I could default to the sans-serif Arial in case it isn’t available. Next, I saw great potential and clarity in Droid Sans for paragraph text content but when compared to Open Sans, appears to be having compressed spacing between glyphs. Open Sans has wider spacing and looks neater than Droid Sans on the web; Open Sans does give a refreshing feel over Helvetica too. I guess, for the print, Droid Sans might look good.
In addition to the main font-selection process itself, I figured that using:
has dramatic difference in the way the fonts appear in the Webkit (Chrome/Safari) browsers. Although at this point, I don’t clearly understand the difference between subpixel-antialiased and antialiased , I see that for Open Sans, subpixel-antialiased works better on the Mac OSX/Chrome while I observed that for some sites which ran Proxima Nova, ran it with the -webkit-font-smoothing set to antialiased. I understand that this is a pure gimmicks play by Mac OS and iOS for better font rendering; wish that other companies to follow up and support/standardize the rendering techniques.
What do you think fit the “exquisite” clause for reading article text amongst the free and open fonts? Do you think there are equally “exquisite” fonts like Proxima Nova on the commercial space?
Do Helvetica for titles and Open Sans for content, mix well? (You’d see this implemented in practice at my blog in sometime from now. )