Heading font update
As I start adding content to this blog more regularly, I thought I update – and I think improve – its design a little. Today I updated the headings and navigation links.
While I was previously using a single serif font for the whole site, I now introduced a second font for the mentioned elements: “Helvetica Neue Condensed Bold”.
I think this font is a good pairing to the serif body font. The upper-case Helvetica more clearly separates posts from one another and makes navigation links stand out more. I often think a two-font serif/sans-serif pairing looks good and I’m glad I now found one that I like using fairly common fonts. I particularly like it because of the condensed variant (my thanks goes to zeldman.com for the inspiration).
Implementation
During implementation, I noticed it wasn’t very consistent to implement across Mac/iOS browsers, though.
Normally the following CSS should have been enough in my opinion:
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-stretch: condensed;
text-transform: uppercase;
For Safari and Firefox on a Mac, this is enough indeed and for iOS as well. But Chrome on the Mac wouldn’t show the condensed variant of the font. I had to add the condensed variant (its Postscript name to be precise) as a font-family:
font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
This made Chrome (and Opera) show the same condensed version on a Mac as the other two browsers. For Safari however, this overwrites the "Helvetica Neue" + font-stretch statement again. But Firefox seems to ignore the additional font-family and still uses the font-stretch statement.
Anyhow, this works now and I thought I share this little CSS-inconsistency finding here.
In a future update I might look into having Android and Windows show a condensed font, but for now I’m fine with the fallbacks in this font stack.