Blog Typography

As I have lamented in past, the typography of my blog leaves much to be desired. I have never really liked the fonts, chosen from the slim pickings of the Blogger fonts dropdown menu. I must say this is slightly maddening: why can't they integrate with their own Google Fonts service?! But anyway, the difference between “smart quotes” and "dumb quotes" has plagued me since the beginning of this blog, and the current diagonal-ish styling of hy-phens, en–dashes and em—dashes is enough to drive me up the wall.

Considering my hefty amount of schooling in the ways, uses, and history of typography, should I not take some time to put my knowledge to good use? Surely so. Hence begins my dance with a new type design for my blog. I have two goals in mind:

• Improve the reading experience for the user
  As I read through my own blog like a user, I find that the experience is not a good one. Even the most basic paragraph styling is not as legible as it could be, and it tires my eyes to read it. So how can I expect others to do the same?
• Find a font pairing that aligns with the voice and content of my blog
  The choices of typefaces that I make should directly relate to the brand and tone that I want to convey, so that the reader can get a feeling for the content of the blog before they even read a sentence. Since the blog is going to align more with my portfolio as well, I'll be thinking this through as it relates to my personal website as well.

You might consider this post the first semblance of a style guide for my blog...but I'm not calling it that because I will probably raise more questions here than I will be able to answer.

Research & Inspiration

I'd like to give a shoutout to three big sources of web typography inspiration for this project (and most definitely projects to come). 

Typewolf

The first is Jeremiah Shoaf's excellent Typewolf project (which I have mentioned before on this blog). Shoaf truly understands the needs of web typography, as well as the simple fact that web needs are different from those of printed type. In a nutshell, Shoaf did a lot of research upfront and saved myself and countless other web designers a lot of time. And he did it with style.

Practical Typography

The second is an extremely well thought-out guide to web typography by Matthew Butterick (with a foreword from Erik Spiekermann). Butterick knows his way around a letterform, that's for sure. Possibly the most magical thing about this website is that it is actually the web version of a real printed book, available for free to everyone on the internet.

Butterick has written a number of type-related books, possibly my second favourite of which being Typography for Lawyers, in which he states,

“Times New Roman is not a font choice so much as the absence of a font choice, like the blackness of deep space is not a color.”

Wonderfully apt.

Fonts In Use

It can be challenging to envision exactly how a typeface will manifest when actually put into use on a website. I would relate this best to seeing a shade of lipstick in the tube versus seeing it on your face. Two completely separate experiences. And so, Fonts In Use curates a collection of typefaces found in the wild, applied right to the lips of websites. Led by Sam Berlow, Stephen Coles and Nick Sherman, Fonts in Use is choc-ful of content through which designers can imagine how a specific typeface may manifest onto their content.

Typeface Selection

As I see it, the blog will consist of two typefaces: a heading font (serif) and a body font (sans serif). Call me a contrast fiend.

For headings, I am looking at mostly readable, clear fonts in bold weights, nothing too fancy. I started out by selecting some clean choices that carry a little bit of personality (we don't want to head down Helvetica Avenue, now do we?), and narrowed it down to three choices. Note that I was trying to pay attention to the styling of the ampersand, as that will be a common element to my weekly update posts and will be sprinkled throughout the site. Some possibilities (set at 40px):

Montserrat

An extremely clean geometric sans serif if I ever did see one. Simple and clear, yet still holds a hint of character. The ampersand is completely in-tune with the rest of the alphabet which is certainly a good thing, but I almost feel like I should design a special & character with a bit more personality. It wouldn't be that hard, in fact this Stack Overflow article explains how to do it with jQuery (although it's probably a bad idea to mess with that kind of stuff).

Abril Fatface

This one appeals to my nostalgia. A lovely didone style of serif with extremely high contrasts of thick and thin, it sort of reminds me of the Gatsby era typography, perhaps found on a perfume bottle or on a dinner menu at a fancy restaurant. And of course, the ampersand leaves nothing to be desired. It is poised and stands out just the right amount. Just graze your eyeballs over that curve down to the circular finial. Yum.

Arvo

Egyptian slab serif, yes please! I tend to love some of these letters; the capitals are simply divine. But some of the lowercase renditions are less so; I'm not really sure what that lowercase k is doing, and the lowercase y looks a little off. Not to mention that the kerning is quite strange, especially between the F-a-c of Facebook. The ampersand is nice, though. I could almost take this ampersand and replace the one in Montserrat.

Now, on the other hand. Body copy's #1 job is to be legible (for people to literally be able to understand the words on the screen), but also to be readable. I want to make it easy (maybe even joyful) for the reader's eyes to glide across the screen. This is one of the major problems I have right now (sorry, readers). I read an excellent article by Christian Miller on screen-based body text being too small, so I know the font size is going to have to go up to 18px at a stark minimum. One other thing to note here is how “smart quotes” are treated. I much prefer the real ‘ball’ on the end (high contrast) to the more linear quote that relate more closely to dumb quotes. And of course, there has to be at least some choice of italics and bolds. Some choices I have set at 20px with a line height of 1.5 (though I can't attest to how Blogger resizes images unfortunately):

Vollkorn

Source Serif Pro

Roboto Slab

Lora

Domine

Of course, the final choice of each of these elements must complement each other, so it doesn't make so much sense to see them on their own as it does in a font pairing. So I made some font specimens:

From left to right:

1. Arvo with Domine
2. Abril Fatface with Source Serif Pro
3. Montserrat with Vollkorn

The next step will be to select a pairing and a set of typographic styles, and then build visual comps of the rest of the site. I feel that building off the style created in the blog post will be the best way to capture the voice I am looking for.

Symbols

In addition to ampersands and smart quotes, I am paying attention to other specific symbols and characters like commas and bullets in unordered lists. On top of all that, I'll need a few icons to persist throughout the blog, such as a magnifying glass inside the search box (as per custom), a unified directional arrow for links to “Read More”, dropdowns and previous/next post controls.

But, you know, not terrible.

Sketches:

Font Awesome has SO MANY directional icon styles. It's cray.

But really the most fun to create will be what we in the typography community call the tombstone. This is a small glyph at the end of an article that signifies just that, the end. You may have seen these used in magazines. Arguably they make more sense in the printed medium, when the turning of the page may or may not lead to more content. This problem does not exist in the digital space, where each article has its own page to fill in as much or as little as it needs. That said, I do enjoy the terminal, finite power that the tombstone carries, so I may or may not add one to the end of my posts.

I'm pretty into the pause icon as a tombstone. It sort of stays away from the inapplicable purposes of a tombstone in printed typography, and asks the reader to do something they may not normally do at the end of a web-read article: to pause and think about what they've read. And a bonus: in written music, the double bar line means the end of the song. So it works!

Elements

Let's talk typographic elements, shall we? The blog will have four types of headings, as I see them.

• Heading 1 - main title of post
• set in the display font,
• focal point of the whole blog arguably
• Heading 2 - “In this series/Related Posts” 
• set in display font
• smaller than post titles
• Headings 3 & 4 - primary and secondary subhead within post 
• not sure how these should be treated just yet, but they should be only a few hairs larger than the body copy
• not break the flow too much, probably shouldn't be set in display
• leaning toward setting them in the body font as a translucent bold or something
• spacing and placement will also play a factor here

There are lots more elements, which I have listed below to note them down.

• Date written
• exists under the post title
• “written on Thursday November 26, 2017”
• could use a different verb than “written”, maybe like mused, published?
• does this ruin the usability of the information? would it confuse readers?
• I have always liked the look of oldstyle numbers that dip down below the baseline

• Tags
• beside the date written
• will act as links to search filter
• small-caps with a capsule outline around perhaps? or knocked out for better visibility?
• tiny bookmark?
• colour-coded, or icon, or both?

• Paragraph
• A body copy font will be selected for readability and legibility
• line spacing and tracking
• comfortable line length on desktop and mobile
• Pullquotes 
• I have always been partial to high-contrast indentation and oversized quotation marks
• these will not be used like magazine pull-quotes which simply repeat what has already been read (see an interesting article on this topic on Adactio.com)
• content will be quotes from people and websites (duh)
• use display font? depends on the level of contrast between that and the rest of the body
• (Un)ordered lists
• think about bullet and number styling (will use content already published as example)
• I enjoy the look of numbers inside circles...it makes them more stark somehow

• Link styling
• Should internal and external links be treated differently?
• somewhat unrelated, but should external links be opened in a new window and if so, should there be an icon to represent that?
• I really love the way Typewolf styles links: italic with a very thick faint underline (almost like a highlight) that fades in to fill the whole background of the link on hover

• And a similar example from Vice (it works on Mobile too - no need for a hover effect):

• Italic & Bold
• not sure how these will be used, but something to keep in mind
• currently use italic as the preface for some posts, such as Weekly Updates
• should be mindful of the design of these as related to font choice (the italic of my current fontface is terrible)
• if I use italic for links as Typewolf does, I have to be careful about using it anywhere else because it will denote a link. Design is dangerous work, no?
• Drop caps & Small caps
• I'm a nostalgist at heart, and love the way some books use drop caps with small caps at the beginning of sections or chapters. I'd love to follow this – think of how stark it would look with a huge drop cap set in display...I'm drooling on my keyboard.

• Code snippets
• I am in love with code snippet formatting as a typographic device. I use it all the time on Slack, often in contexts having nothing to do with code at all. It simply acts as a differentiator of context between the description and the item itself. An example of this (written inside Slack):

• What's happening here is all the actual names of players are being contexted-out with code snippets. This would make Abbott and Costello's conversation easily understandable. Honestly, I don't even know if I wrote this out correctly! But if we remove the factor of human error, I think you can understand the usage of this.

• Image captions
• depending on whether I follow through with my idea about mini image galleries, the caption design might get in the way of that functionality
• Some examples I like from Practical Typography (that both happen to live in the margin):

And a final thought on elements - how will images interact with text in layout, if at all? This will merit some exploration of layout.

Issues

Every project has its ugly history...and this one is no exception. I have to redesign my blog, which is very much an extension of my portfolio site. You might think I am running this exercise backwards and should begin with my portfolio's typography before moving onto my blog, and you might be right. But I figure, either website could learn from the other and, as I want to unify them more, it may not really matter where I start from. That said, all of the above rules will also apply to my portfolio site sooner or later. Some components live on both websites, and will undoubtedly fall into the “sooner” column:

• header and footer
• style, typography, the embarrassing lack of “selected page” affordance in the navigation
• removal of the ridiculous email form (goodbye spam)
• a better bio about myself
• updates to the monogram, using randomized moiré lines
• previous and next areas
• to be styled the same way as the project previous and next pages
• to follow the same type of directional arrow as everywhere else
• buttons
• there are undoubtedly more buttons on my portfolio site, but they should all somewhat match
• notably on the blog will be a button to submit a comment, and to confirm search

If I choose to move my blog off of Blogger, one upside is that my blog and portfolio can live under the same CSS.

Critique & Suggestions

I heartily welcome your critique and suggestions regarding anything listed above, especially the type specimens and your favourite of my above type combinations, or perhaps one that I didn't cover here! Feel free to post your thoughts in the comments below.