Chris’ Corner: Type

I’m in the mood for a typography focused edition. I have some links saved up I’ve been meaning to read. I’m going to start reading now and the links that turn out any good I’ll put below.

Mike Mai put together a Typography Manual (for type on the web). It’s a pretty random spattering of 11 bits of advice. Originally a Pen! I can’t help but read through each of them and raise my Well, Actually finger, but I shall keep my finger down because more and more I like eliminating nuance in this industry. Just do this advice is pretty valuable. If you have no idea where to start, well, just follow the advice, and once you’ve leveled up you can do your own rule breaking.

Like #1 is “Use One Font” but Henry, as a very experienced designer, can do what he wants.

This was mid-last-year, but I still think Stephanie Eckles has the best guide at the moment for modern fluid type. There was this whole period where “fluid type” meant using viewport units (e.g. vw), ideally in a calc(), to set type size (and sometimes line-height). Then things got a little better when we got clamp() because the code got a lot more straightforward (by the way, this is a helpful mind trick). Now things are changing one more time, because we have container units and they change the approach again.

Just as 1vw equals 1% of the viewport width, so does 1cqi equal 1% of a container’s inline size. We’ll be using cqi for purposes of defining fluid typography since we want the size to be associated with the horizontal axis of the writing mode.

Speaking of relatively new units, we now have units that represent the current line height (and “root” line height) in CSS: lh and rlh. Paweł Grzybek writes about how to use them to acheive the idea of “vertical rhythm”:

Vertical rhythm is a design concept that helps to create a harmonious layout by following consistent spacing between elements, typically using the height of a line as a base. I learned it in my design days when printed media was still a thing.

It’s kind of an invisible idea that theoretically makes a page more pleasant to look at.

In the past this was quite a bit harder to pull off, and these units are yet another example of a new CSS technology making an old idea a lot easier.

The why of typography is interesting. There are aesthetics. Making type look good is an art, but it’s an art with everyday consequences. Poor typography can make people feel a product is shoddy, a restaurant doesn’t care, or a service isn’t trustworthy. Great type can be a cheat code in making people choose one thing over another simply through aesthetics. But another aspect of typography is legibility. If you want people to read text, and you do (and maybe even have them feel a certain way while reading it) then you’re very concerned with legibility.

Mary C. Dyson has a whole new book on this: Legibility. It’s certainly a book-worthy topic, as Mary makes clear in an early chapter:

Within typographic and graphic design, we might consider whether signs are legible (in particular from a distance), whether we can decipher small print (especially later in life), if icons can be easily identified or recognised (without text labels), if a novel or textbook is set in a readable type (encouraging us to read on). These questions emphasise that it is not only the physical characteristics of the text or symbol that need to be considered in determining whether or not the designs are legible, or how legible they are. The purpose for reading, the context of reading, and the characteristics of the reader also determine legibility.

My mind goes: pick fonts that are obviously readable, be generous with line height, don’t make the line length too long, and go big (but not too big). But that’s like legibility 101, and there is a lot more to consider, and a lot more depth to those basics.

Where do you actually go to find fresh fonts? I wish I had a perfect answer for you, but there are hundreds of font foundries with individual websites that all do things differently. My best advice is to bookmark them when you come across them, and when it’s time to pick fonts, make plenty of time to go window shopping.

Here’s one to save for sure though, because although I’m usually quite happy to pay for fonts, not every project has that in the budget, so free is what is needed. Google fonts, as ever, has a lot of potential there, but in the greater world of fonts is more limited than you might think. OK here is is for real: Collletttivo.

Collletttivo is an Open-Source type foundry and a network of people promoting the practice of type design through mutual exchange and collaboration.

It’s a pretty darn nice group of typefaces already.

I bet you know there are some generic keywords for fonts in CSS already, like serif and sans-serif. More recently, we’ve gotten keywords like system-ui which is supposed to pick whatever font that operating system uses primarily (which is awesome). There are more in that vein:

font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;

There is now discussion in the W3C for more generic font families, a lot of which is centered around fonts for non-Latin languages. I think that’s a fantastic idea. Imagine how disappointing it would be to choose a custom font for a non-Latin language, have there be some problem in loading it, and have the next font down the list not support the language you need.

These new generic font choices have practical consequences and apply in situations where your browser could cause readers problems if it falls back to a random font: either because different fonts are conventionally used to distinguish one part of text from another (eg. headings from body text,), or because the text may become unreadable with the wrong font (eg. non-nastaliq styles in Kashmir). It’s more than just presentational preferences.

Variable fonts: still cool.

Mandy Michael resurrected her site with the perfect URL: https://variablefonts.dev/

I’m tempted to say that variable fonts didn’t hit as hard as I thought they would hit when they were coming out. But… I might be wrong about that. They are supported across the board on the web. There are tons of them. Their support in design tools is pretty darn good. There are lots of good resource sites like Mandy’s. People generally know about them and think they are a good idea. So that’s a pretty darn good. I just feel like I don’t see them in use a ton. The biggest strike against them is how big they tend to be, and I think that scares people off.

How about we end with an actual font: Playpen Sans! It’s like a classy version of Comic Sans. I think it’s both more legible (a feat, as Comic Sans is already super legible) and more fun. I really like how there are a ton of alternate glyphs for each letter that automatically activate, meaning it actually looks like handwriting a lot more than if there is only one like most fonts. Plus it’s FREE so that rules.

Reminds me of Comic Code (which we offer as a code font family on CodePen) and all the variations of the Inkwell family.