As an old-school typographer, or at least typesetter, I’m accustomed to combining a serif font for running text with a sans-serif font for titles and headlines, plus site machinery (menus, buttons, “Read More” links, attribution blocks, etc.). Serif fonts are more readable, because the little feet of the letters march in step along the baseline, but sans-serifs are punchier.
For this project, I used (dread word) Google webfonts for the first time.1 We have certainly come a long way from the days when serif meant Times Roman, and sans-serif meant Helvetica. At first I combined Noto (sans-serif) with Martel (serif). Noto has a lot of weights — you never know when you’ll need to reach for Extra Bold — and Martel “is an Old French sobriquet meaning ‘The Hammer,’” which I thought conveyed the right attitude.
As I discovered, I didn’t need all Noto’s weights; my design sensibility, such as it is, is pretty buttoned down anyhow. Worse, I discovered that the Martel font family doesn’t have an italic style. Technically, that should not have been a problem; CSS (Cascading Style Sheets, the ingenious and more-or-less human readable language that makes your site more than a 1995-style direct readout of HTML markup) has the machinery to swap in an italic font from another family; I used Merriweather’s. (Italics that look nothing like their roman counterparts come with the territory, since “roman” characters were first carved in stone, whereas italic characters were inspired by cursives, stroked onto paper.) Unfortunately, the CSS machinery, for reasons I never could debug, was constantly breaking down, and instead of the desired Merriweather, I would get a ginormous hunk of Microsoft’s cheap Helvetica knock-off, Arial, instead of Merriweather. Disconcerting!
So I replaced Noto with Cabin (sans serif), and Martel with Crimson Pro (serif), which does have italics.2 So far as I can tell, “Crimson” is not a subliminal reference to Harvard, but the name pairs well with the other touches of red on the blog.
As I read the CSS file, I encountered more and more machinery that was broken, so rather than starting yet another quest for the missing (or extra) squiggly bracket, or the unclosed (or overly expansive) comment, I sat down and rewrote it. After all, it had been worked over and reworked so many times it wasn’t really readable, let alone maintainable, and I had no idea how it worked anymore. The rewrite was a success, as many of the little touches I had introduced early in the project re-appeared, as if by magic. Plus I can see what I’m doing. (The hardest task, believe it or not, was formatting the orange RSS sigils after the blogroll links.)
If there are any designers out there who care to comment, you can use the contact form.
NOTES
1 Fortunately, Google allows you to download their fonts, so I could put them on my server, as opposed to depending on the Intertubes to fetch them.
2 Although Google claims that Crimson Pro supports ligatures, I can’t get them to work in BUEdit; I get the ligature characters, but in some ugly sans-serif, not Crimson. That’s too bad, because ligatures would have been elegant cufflinks to go with the button-downs.
Add new comment