Chris’ Corner: Fresh Type

I like the feeling of a good fresh typeface. Like design itself, type design has trends, and without being able to articulate it particularly well, I feel like I can feel a fresh type look from a stale one. That’s probably the thinking of an amateur, and I’m sure the world’s fanciest designers probably used one typeface their entire career and would scold my fickle soul. But also whatever. I’m cool with being the ever-changing Pepsi logo to the never-changing Coca-Cola logo.

Saikrishna Vanneldas did a good job of rounding up some newer fonts in the article Bored with Poppins & Inter, Here are Some New fresh Sans-Serif For 2023. They are all free / open-source, so that’s nice, not that I don’t think we all should be paying for type (we should, just not all situations call for that).

You know how a “viewport unit” in CSS (e.g. vw, dvh, vmax, etc) essentially boil down to “1% of the browser window” in the given direction? Well hopefully you know that we also have container units now (supported across the board) which are very similar but “1% of the nearest container” in the given direction.

If you’ve been interested in implementing the idea of fluid type over the years, you know that a lot of it is done with viewport units and clamp() to achieve fluid type sizing across different size screens while capping the min and max sizes against extremes.

It’s worth thinking about making container units a part of this story. It’s pretty clear to most that container queries are the best way to style an element based on its size. But that doesn’t help as directly with things like sizing type. Container units certainly do.

It might be as simple as something like this:

.card {
  container: card / inline-size;
  ...

  h2 {
    font-size: clamp(1.4rem, 1rem + 5cqi, 4rem);
  }
}

I’m using cqi here which you can think of like “container units in the inline direction” and I think it’ll be a commonly used container unit.

Stephanie Eckles has the best deep dive article on this in Container Query Units and Fluid Typography. Stephanie covers setting up a proper system for all this with fallbacks and such.

Say you were going to publish a book online as a web page. A book, implying a whole lot of text. Call it 100,000 words. You need to think about the experience of that. Are there chapters of decently small length such that each of them could be almost like a blog post with an individual URL and you can proceed through them in a linked manner? Would you make the entire thing one massive single HTML page that you just scroll through? Maybe go old-school cool and use a library like Turn.js to make epic skeuomorphic page turns??

(Naturally, there are a bunch of cool examples of page turning on CodePen.)

There is no one right answer, but I have seen some good examples recently:

1. Robin Sloan’s e-book template Perfect Edition uses horizontal scroll-snapping to create a book reading experience that is how most modern e-book readers look/work to me.
2. Mat Marquis’ JavaScript for Web Designers by A Book Apart is published online for free and has an extremely classy paginated-blog-posts look.
3. Jeremy Keith’s Resilient Web Design works offline (assuming you’ve been there once), which is a nice touch.

Elliot Jay Stocks has a new podcast called Hello, type friends! which is an easy subscribe for me. Elliot says they won’t get into visual nuance of typography on the show, because audio would suck for that, but everyone involved will be type people so sounds fun to me. I enjoyed the first one with Jessica Hische.

There is this thing called Emoji Kitchen which allows you to combine emoji together:

But in order to use it, it’s baked into Gboard, a keyboard replacement thingy with all sorts of random features (works on Android and iOS though which is cool). They do now have a page that lets you browser the combinations right from the web.

The UI was a smidge confusing to me at first. You pick one from the top, then that middle panel just shows you the combinations it can make. You don’t get to pick any two random emojis and see what happens. Still super cool.

What’s funny, though, is even though Emoji Kitchen is only a year old and they don’t really say how it works, don’t you kinda just assume it’s AI-powered? If they did these by hand, I bet they probably wouldn’t now, just a year later. Facebook is making stickers with AI which isn’t terribly different than this really, except for, ya know, it’s totally un-curated and can make questionable stuff.

Random periodic reminder that variable fonts are awesome, this time from Jason Pamental who has been tooting that horn for a lot of years. Fixel is an awfully nice new one. If by some chance you’re using a variable font, but find the file size a little worrying, know that there is an app to remove the axes you aren’t using which can have pretty big savings.