Typography, how to choose fonts for your site – WPNYC

In this talk I covered what you should consider, and avoid, when choosing fonts for your site.

Note: There are captions below the slides when it is in slideshow mode. For expedience, I resisted the temptation to mess with the caption styling.

Also note: This talk’s focus is on choosing fonts, not typesetting. There are some mis-uses of quotes and dashes here. Mostly due to bad habits developed as a result of their incompatibility with code.

Edit: I’d like to add a special shout-out to the good people at  Canva for putting together this gorgeous visual glossary of typographic terms.

Web Typography – A quick and dirty guide to Enqueuing Fonts in WordPress.

This coming Tuesday I will be speaking at WPNYC, the official New York City WordPress Meetup, on the topic of WordPress and Typography.

Having started out as a front-end developer, I have always been inspired by beautiful typography used properly. I will post my slides once the recording of the talk goes live, but for now, in preparation, I thought it would be nice to post something about how to actually use typefaces on your site that are not available by default.

In my talk I will cover this topic as well as a provide a few tips on what to avoid when choosing and implementing your type choices.

What’s available?

We are living in a wonderful age of type. There are hundreds of thousands of fonts available online. Which should you choose? I’ll cover a little of that on Tuesday, but for now, I’ll leave it up to you. Here are, IMHO, the three most accessible options where you can find some interesting choices:

  1. TypeKit – Now owned by Adobe, a truly rich and easy to use platform. www.jackreichert.com proudly uses TypeKit fonts. Free account allows two fonts, which is just fine for most any creative designer to utilize.
  2. Fonts.com – While it’s a pretty site, navigation is clearly focused on being unfriendly towards people wanting to try the service before they buy. Here is the buried link to the free fonts.
  3. Google fonts – It got a lot of negative reviews at the beginning because, honestly, they weren’t very discerning. However, since then a lot of money and effort has been put into getting some quality fonts available.

Notable mention: Font Squirrel, they don’t host font files, but it’s a great resource for finding affordable quality fonts. Their Webfont Generator is great for helping you find the ideal “bulletproof @font-face syntax“.

Simply add the above into your stylesheet and you’re good to go using: body { font-family: corbert-regular<span class="pl-pds">', sans-serif; </span> }

A note on “free” fonts

“Free” often means you’re paying in some other manner. “Free” fonts are often knockoff fonts of well crafted classics. Why should you care? Because if you’re going through the trouble of caring about details to the level of which typeface you want to show your content through, you should care about the quality of that typeface.

Alternatively, a free font may be designed by an amateur designer, who then releases it because it’s not quite professional yet.

What’s missing? A lot goes into the crafting of a quality font.

  • Italics, aren’t simply a font tilted, and bold isn’t simply a stroke added to the font. If you’re okay with doing that, JUST STOP READING NOW. LEAVE. SERIOUSLY.
  • Kerning, each letter fits differently with each letter pair, a quality font will have the pairings programming in. Interestingly, pairings are effected by font-size as well.
  • Overall quality, cheap knockoffs and novices won’t take scaling, or details properly into consideration.

Is “free” EVER OK? Yes. Over the past few years Google and Adobe have been commissioning fonts for open source projects. While Google Fonts once was a bastion of amateurism, it now has some high-quality complete font families. As with software, the open-source community has come to the rescue.

How do I do it?

Each of the above tools have their own way to create a collection of fonts, and all have great walk-throughs. Once you generate one replace the above code / paths with your custom generated one. Don’t forget to comment out, or remove what you’re not using.

Now you just use the fonts as you would any other in your stylesheet.

body { font-family: 'Josefin Sans', sans-serif; }

Note: enqueue_script() by default will add the script to the head of your site. If the font provider states that you need to enqueue your script in the footer of your site WordPress has you covered:

wp_enqueue_script( 'add_my_font', '//www.example.com/myfont.js', array(), 20150613, true ); 

That “true” at the end will place the script into your site’s footer.


“The Crystal Goblet or Printing Should be Invisible”

This metaphor is truly stunning and puts into words the careful balance between that must be maintained between content and container. This is as true for a site’s design and the content it contains as it is for typography and the text it contains.

“Imagine that you have before you a flagon of wine. You may choose your own favorite vintage for this imaginary demonstration, so that it be a deep shimmering crimson in colour. You have two goblets before you. One is of solid gold, wrought in the most exquisite patterns. The other is of crystal-clear glass, thin as a bubble, and as transparent. Pour and drink; and according to your choice of goblet, I shall know whether or not you are a connoisseur of wine. For if you have no feelings about wine one way or the other, you will want the sensation of drinking the stuff out of a vessel that may have cost thousands of pounds; but if you are a member of that vanishing tribe, the amateurs of fine vintages, you will choose the crystal, because everything about it is calculated to reveal rather than to hide the beautiful thing which it was meant to contain.

“Bear with me in this long-winded and fragrant metaphor; for you will find that almost all the virtues of the perfect wine-glass have a parallel in typography. There is the long, thin stem that obviates fingerprints on the bowl. Why? Because no cloud must come between your eyes and the fiery heart of the liquid. Are not the margins on book pages similarly meant to obviate the necessity of fingering the type-page? Again: the glass is colourless or at the most only faintly tinged in the bowl, because the connoisseur judges wine partly by its colour and is impatient of anything that alters it. There are a thousand mannerisms in typography that are as impudent and arbitrary as putting port in tumblers of red or green glass! When a goblet has a base that looks too small for security, it does not matter how cleverly it is weighted; you feel nervous lest it should tip over. There are ways of setting lines of type which may work well enough, and yet keep the reader subconsciously worried by the fear of ‘doubling’ lines, reading three words as one, and so forth.”

“The Crystal Goblet or Printing Should be Invisible”
from Beatrice Warde, The Crystal Goblet, Sixteen Essays on Typography, Cleveland, 1956