I enjoy the sensation of a fresh and appealing typeface. Like design itself, type design follows trends, and even though I may not be able to explain it well, I can sense the difference between a fresh and stale type look. Perhaps this is the thinking of an amateur, and I’m sure the most sophisticated designers in the world have used the same typeface throughout their entire careers and would criticize my indecisive nature. But, whatever. I’m fine with being the ever-changing Pepsi logo compared to the unchanging Coca-Cola logo.
Saikrishna Vanneldas has done a great job of compiling some new fonts in the article “Bored with Poppins & Inter, Here are Some New fresh Sans-Serif For 2023.” The best part is that they are all free and open-source, which is nice, although I believe we should all pay for type in most situations (just not always).
Here are a couple of fonts mentioned in the article:
– Jakarata Sans on Google Fonts
– Manrope on Google Fonts
You may be familiar with CSS “viewport units” (e.g. vw, dvh, vmax, etc.), which essentially represent “1% of the browser window” in a given direction. Well, now we also have container units (supported universally) that are very similar, but represent “1% of the nearest container” in the given direction. If you’ve been interested in implementing fluid type over the years, you probably know that it is often done using viewport units and clamp() to achieve fluid type sizing across different screen sizes while setting minimum and maximum sizes. It’s worth considering including container units in this approach.
Most people agree that container queries are the best way to style an element based on its size, but they don’t directly address things like sizing type. However, container units certainly do. It could be as simple as the following example:
“`css
.card {
container: card / inline-size;
…
h2 {
font-size: clamp(1.4rem, 1rem + 5cqi, 4rem);
}
}
“`
In this example, I’m using cqi, which can be thought of as “container units in the inline direction.” I believe it will become a commonly used container unit. Stephanie Eckles has written an excellent in-depth article on this topic called “Container Query Units and Fluid Typography.” Stephanie covers setting up an appropriate system for this, including fallbacks and other considerations.
Let’s say you were planning to publish a book online as a web page, which implies a large amount of text, around 100,000 words. You need to think about the user experience. Are there chapters of reasonably small length, where each chapter could be treated as an individual blog post with its own URL, allowing readers to navigate through them in a linked manner? Or would you prefer to have the entire book on a single HTML page that users can scroll through? Alternatively, you might choose to go for a more old-school approach and use a library like Turn.js to create skeuomorphic page turns. (There are plenty of cool examples of page turning on CodePen.)
There is no one correct answer, but I have come across some good examples recently:
– Robin Sloan’s e-book template “Perfect Edition” uses horizontal scroll-snapping to create a book reading experience similar to modern e-book readers.
– Mat Marquis’ “JavaScript for Web Designers” by A Book Apart is freely available online and has a classy paginated-blog-posts look.
– Jeremy Keith’s “Resilient Web Design” works offline (once you’ve visited the page), which is a nice touch.
Elliot Jay Stocks has started a new podcast called “Hello, type friends!” which I highly recommend subscribing to. Elliot mentions that they won’t delve into the visual nuances of typography on the show because audio isn’t the best medium for that, but everyone involved will be typography enthusiasts, which sounds fun to me. I particularly enjoyed the first episode with Jessica Hische.
There’s this cool thing called Emoji Kitchen that allows you to combine different emojis together. However, in order to use it, you need Gboard, a keyboard replacement app with various features (available for Android and iOS). They now have a web page where you can browse the combinations directly. The user interface confused me a bit at first. You select one emoji from the top, and the middle panel shows you the combinations it can create. You can’t randomly select any two emojis and see what happens. Still, it’s super cool.
What’s amusing is that even though Emoji Kitchen is only a year old and its working mechanism isn’t explicitly explained, you can’t help but assume it’s powered by AI. If it were done manually, they probably wouldn’t have been able to keep up with the demand in just a year. On a similar note, Facebook is using AI to create stickers, which is not too different from Emoji Kitchen, except that it’s completely uncurated and can generate questionable content.
A random reminder: variable fonts are amazing! Jason Pamental has been advocating for them for many years, and Fixel is a particularly nice new one. If you happen to use a variable font and are concerned about file size, there is an app that can remove unused axes, resulting in significant savings.
