Chris’ Corner: Fresh Type

By admin
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
CARDINAL

typeface their entire career and would scold my fickle soul. But also whatever. I’m cool with being the ever-changing

Pepsi
ORG

logo to the never-changing

Coca-Cola
ORG

logo.

Saikrishna Vanneldas did a good job of rounding up some newer fonts in the article

Bored with Poppins & Inter
ORG

, Here are Some New fresh Sans-Serif For

2023
DATE

. 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
ORG

(e.g. vw ,

dvh
ORG

,

vmax
PERSON

, etc) essentially boil down to “

1%
PERCENT

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%
PERCENT

of the nearest container” in the given direction.

If you’ve been interested in implementing the idea of fluid type over

the years
DATE

, 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
PERSON

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
CARDINAL

,

4rem
FAC

); } }

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
PERSON

has the best deep dive article on this in

Container Query Units
ORG

and Fluid Typography.

Stephanie
PERSON

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
CARDINAL

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
CARDINAL

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:


Robin Sloan
PERSON

’s e-book template

Perfect Edition
WORK_OF_ART

uses horizontal scroll-snapping to create a book reading experience that is how most modern e-book readers look/work to me.

Mat Marquis’ JavaScript
PERSON

for Web Designers by A Book Apart is published online for free and has an extremely classy paginated-blog-posts look.

Jeremy Keith’s
PERSON


Resilient Web Design
ORG

works offline (assuming you’ve been there once), which is a nice touch.


Perfect Edition

WORK_OF_ART


Elliot Jay
PERSON

Stocks has a new podcast called Hello, type friends! which is an easy subscribe for me.

Elliot
PERSON

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
ORDINAL

one with

Jessica Hische
PERSON

.

There is this thing called

Emoji Kitchen
ORG

which allows you to combine emoji together:

But in order to use it, it’s baked into

Gboard
PRODUCT

, a keyboard replacement thingy with all sorts of random features (works on

Android
ORG

and iOS though which is cool). They do now have a page that lets you browser the combinations right from the web.

The

UI
ORG

was a smidge confusing to me at

first
ORDINAL

. 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
CARDINAL

random emojis and see what happens. Still super cool.

What’s funny, though, is even though

Emoji Kitchen
ORG

is

only a year old
DATE

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
DATE

. Facebook is making stickers with AI which isn’t terribly different than this really, except for, ya know, it’s totally

un
ORG

-curated and can make questionable stuff.

Random periodic reminder that variable fonts are awesome, this time from

Jason Pamental
PERSON

who has been tooting that horn for

a lot of years
DATE

.

Fixel
PERSON

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.