Mixing Helvetica with Open Sans

FOLDER - UX

TAGS: , , , , , ,

September 20, 2012 1 COMMENTS

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

  1. Helvetica
  2. Droid Sans
  3. Open Sans

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:

-webkit-font-smoothing: subpixel-antialiased  

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. )

1 Comment

    Comment # 1

    COMMENT BY - John Kennedy

    September 25, 2012 04:03 UTC Reply

    Thank you for writing about Mixing Helvetica with Open Sans | thanix.info. Other web-site creator should take this website content as a benchmark because it has very clean and excellent style and design, in addition to the very valuable content. You are surely an expert in this topic!

Leave a Reply



©thanix.info 2012 | RSS | cc share-alike

thanix [at] gmail [dot] com